Foundations
Tokens, motion, elevation
Getting started

Foundations

Semantic tokens, a motion system, and elevation levels shared by every component. Change the theme to see all of them adapt.

Color tokens

Updated

Semantic tokens switch in dark mode automatically. Click a swatch to copy its CSS variable.

Motion curves

New

Four easing curves power every animation. Springs are CSS linear() curves, so they are GPU-friendly and need zero JavaScript.

ease-spring
Transforms, indicators, panels
ease-bounce
Pops, checkmarks, dots
ease-out-expo
Fades, fills, reveals
ease-snappy
Exits and dismissals

Elevation

New

Four levels tuned for light and dark themes. Hover a tile to lift it.

elevated-sm
elevated-md
elevated-lg
elevated-xl

Typography

A monospace-first type scale with tabular numbers everywhere it matters.

The vintage terminal hums at 60fpsDisplay · 30px
The vintage terminal hums at 60fpsHeading · 24px
The vintage terminal hums at 60fpsTitle · 18px
The vintage terminal hums at 60fpsLabel · 14px
The vintage terminal hums at 60fpsBody · 14px
The vintage terminal hums at 60fpsCaption · 12px