Design system

ringring.run

Tokens, palette, type, and components. Every value here comes from tokens.css.

Logo

A handset inside a ring. It reads at 16px and scales to a hero.

ringring.run

Color

Swatches follow your system theme. Ratios are WCAG 2 contrast against Canvas and Surface.

Brand

Ringy Greenaccent-solid
Light#60d394text 8.3 AADark#60d394text 8.3 AA
Ringy Inkaccent
Light#2177485.4 AADark#60d3949.7 AA
Rungy Peachrungy-solid
Light#ff9b85text 8.0 AADark#ff9b85text 8.0 AA
Rungy Inkrungy
Light#a23d226.3 AADark#ff9b858.8 AA
Highlighthighlight
Light#aaf683text 13.0 AADark#aaf683text 13.0 AA

Neutrals

Inkforeground
Light#1d1d1f16.3 AADark#f5f5f716.6 AA
Graphitemuted
Light#6363685.8 AADark#a1a1a67.0 AA
Pewtersubtle
Light#6f6f744.8 AADark#8d8d925.5 AA
Canvasbackground
Light#fbfbfdDark#000000
Surfacesurface
Light#ffffffDark#161618
Mistsurface-2
Light#f5f5f7Dark#1c1c1e

Status

Passsuccess
Light#2177485.4 AADark#60d3949.7 AA
Unknown, estimatewarning
Light#84610b5.5 AADark#ffd97d13.3 AA
Problem, fail, urgentdanger
Light#c420145.7 AADark#f4847b7.3 AA

Type

Inter for interface text, with tighter tracking as size grows. Geist Mono for timings and IDs.

  • displayEvery missed call
  • title-1Ranked by opportunity
  • title-2Agent timeline
  • title-3Example Plumbing Co
  • headlineMissed calls after hours
  • bodyEach finding quotes its source.
  • calloutScan a business on Google Maps.
  • footnoteEstimates. Edit the assumptions.
  • caption12:04:31 PM · 1.2s
  • eyebrowHow it works
  • monoc2b1ac48 · 00:01.84 · $1,240

Shape and motion

Radii nest: outer radius equals inner radius plus padding. Motion is springs, short, and interruptible.

Radius and shadow

sm
md
lg
xl

Motion

  • duration-instant100ms · Press feedback
  • duration-fast200ms · Hover, color
  • duration-base300ms · Fades
  • ease-springdamping 1.0, response 0.35s · Layout, new rows
  • ease-spring-bouncydamping 0.8, response 0.35s · Segmented thumb

Reduced motion swaps movement for fades.

Components

Buttons respond on press. Badges carry status. Cards group.

QueuedRunningCompletedDemo dataFailed
Businesses
8
Diagnosed
8
Est./month
$4,820
Elapsed
41s
  1. Search12:04:01
    Found 8 businesses
  2. Reviews12:04:09
    Rate limited, retrying
  3. Diagnose12:04:22
    Reading reviews