Everything, in one place.
Start anywhere; copy what you need.
Every token, type style, colour and component specimen, built on the three-tier system. Search it, or browse by group below.
Nothing matches yet. Try a token name, a component, or a colour.
Colour
Apply Mapping tokens in your work; primitives and aliases exist to build them.
Content tokens
Text and icon colours across the content scale.
Surface & border
Surfaces, backgrounds and border mappings.
Brand blue
The full 100–900 brand blue ramp.
Neutral
Grayscale primitives from black to white.
Semantic
Positive, warning, negative and informative.
Alpha
Light and dark transparency stacks.
Typography
Aeonik Pro for headings, Atkinson Hyperlegible Next for everything else, Newsreader italic for a sparing accent.
Heading typeface
Aeonik Pro, Demibold, −0.5px tracking.
Heading scale
2xl to sm, capped at 40px desktop.
Subheading scale
Demibold and semibold subheadings.
Serif accent
Newsreader italic, for sparing emphasis.
Body typeface
Atkinson Hyperlegible Next, 400–700.
Body scale
Large, medium and small body sizes.
Label scale
Compact labels for UI and metadata.
Space & shape
A 4-point grid, a tight set of radii, and restrained elevation.
Components
Established patterns. The component library has the full set, live, with states.
Interactive
Feel the system move. Tonal states, live playgrounds, and the motion rules in action.
Brand
The double-underline wordmark, the motif, and how we sound.