Design tokens
Every value below is read out of the stylesheet that ships. If it is not here, it is not in the system.
Tokens are named for how big they are, never for what uses them. space/m and stroke/m and icon-size/m all mean "the middle step", so a layout reads on one scale instead of a dozen component-specific ones.
Spacing
The 4-based ramp. Outer padding on a control is uniform; the label carries its own inset.
| Token | Value at base |
|---|---|
| --space-12 | 12px |
| --space-128 | 128px |
| --space-16 | 16px |
| --space-20 | 20px |
| --space-24 | 24px |
| --space-32 | 32px |
| --space-4 | 4px |
| --space-40 | 40px |
| --space-48 | 48px |
| --space-64 | 64px |
| --space-8 | 8px |
| --space-80 | 80px |
| --space-96 | 96px |
| --space-6 | 6px |
| --space-l | var(--space-12) |
| --space-m | var(--space-8) |
| --space-s | var(--space-6) |
| --space-xs | var(--space-4) |
| --space-xl | var(--space-16) |
Stroke
Stroke is altitude, not component: detail, component, section.
| Token | Value at base |
|---|---|
| --stroke-1 | 1px |
| --stroke-2 | 2px |
| --stroke-3 | 3px |
| --stroke-l | var(--stroke-2) |
| --stroke-m | var(--stroke-1) |
| --stroke-s | var(--stroke-1) |
Icon size
The tier a control's height comes from - never its text.
| Token | Value at base |
|---|---|
| --icon-size-16 | 16px |
| --icon-size-24 | 24px |
| --icon-size-32 | 32px |
| --icon-size-48 | 48px |
| --icon-size-l | var(--icon-size-32) |
| --icon-size-m | var(--icon-size-24) |
| --icon-size-s | var(--icon-size-16) |
Type size
Responsive roles. These step at the breakpoints; the raw sizes behind them do not.
| Token | Value at base |
|---|---|
| --text-display | var(--font-size-48) |
| --text-display-inset | -3.7px |
| --text-hero | var(--font-size-40) |
| --text-lg | var(--font-size-24) |
| --text-md | var(--font-size-18) |
| --text-sm | var(--font-size-16) |
| --text-xl | var(--font-size-28) |
| --text-xs | var(--font-size-16) |
| --text-xxl | var(--font-size-32) |
Layout
Gutters and margins for the page grid.
| Token | Value at base |
|---|---|
| --layout-gutter | var(--space-16) |
| --layout-max-width | var(--size-content-max) |
| --layout-page | var(--space-16) |
| --layout-section | var(--space-64) |
Semantic colour
Colour tokens resolve through two axes and are documented on the Colour page, where you can switch both and watch them move.