Vocabulary
The authoring menu: every role you can reach for, by job, one line of what it's for. This is the lexicon — the names and their meaning.
Primitives
The raw scales, read straight from the CSS with their values.
Colour — Neutral
| token |
description |
| --color-black |
#000000 |
| --color-white |
#ffffff |
| --color-neutral-50 |
oklch(98.5% 0 0) |
| --color-neutral-100 |
oklch(97% 0 0) |
| --color-neutral-200 |
oklch(92.2% 0 0) |
| --color-neutral-300 |
oklch(87% 0 0) |
| --color-neutral-400 |
oklch(70.8% 0 0) |
| --color-neutral-500 |
oklch(55.6% 0 0) |
| --color-neutral-600 |
oklch(43.9% 0 0) |
| --color-neutral-700 |
oklch(37.1% 0 0) |
| --color-neutral-800 |
oklch(26.9% 0 0) |
| --color-neutral-900 |
oklch(20.5% 0 0) |
| --color-neutral-950 |
oklch(14.5% 0 0) |
Colour — Blue
| token |
description |
| --color-blue-50 |
oklch(97% 0.014 254.604) |
| --color-blue-100 |
oklch(93.2% 0.032 255.585) |
| --color-blue-200 |
oklch(88.2% 0.059 254.128) |
| --color-blue-300 |
oklch(80.9% 0.105 251.813) |
| --color-blue-400 |
oklch(70.7% 0.165 254.624) |
| --color-blue-500 |
oklch(62.3% 0.214 259.815) |
| --color-blue-600 |
oklch(54.6% 0.245 262.881) |
| --color-blue-700 |
oklch(48.8% 0.243 264.376) |
| --color-blue-800 |
oklch(42.4% 0.199 265.638) |
| --color-blue-900 |
oklch(37.9% 0.146 265.522) |
| --color-blue-950 |
oklch(28.2% 0.091 267.935) |
Colour — Green
| token |
description |
| --color-green-50 |
oklch(98.2% 0.018 155.826) |
| --color-green-100 |
oklch(96.2% 0.044 156.743) |
| --color-green-200 |
oklch(92.5% 0.084 155.995) |
| --color-green-300 |
oklch(87.1% 0.15 154.449) |
| --color-green-400 |
oklch(79.2% 0.209 151.711) |
| --color-green-500 |
oklch(72.3% 0.219 149.579) |
| --color-green-600 |
oklch(62.7% 0.194 149.214) |
| --color-green-700 |
oklch(52.7% 0.154 150.069) |
| --color-green-800 |
oklch(44.8% 0.119 151.328) |
| --color-green-900 |
oklch(39.3% 0.095 152.535) |
| --color-green-950 |
oklch(26.6% 0.065 152.934) |
Colour — Amber
| token |
description |
| --color-amber-50 |
oklch(98.7% 0.022 95.277) |
| --color-amber-100 |
oklch(96.2% 0.059 95.617) |
| --color-amber-200 |
oklch(92.4% 0.12 95.746) |
| --color-amber-300 |
oklch(87.9% 0.169 91.605) |
| --color-amber-400 |
oklch(82.8% 0.189 84.429) |
| --color-amber-500 |
oklch(76.9% 0.188 70.08) |
| --color-amber-600 |
oklch(66.6% 0.179 58.318) |
| --color-amber-700 |
oklch(55.5% 0.163 48.998) |
| --color-amber-800 |
oklch(47.3% 0.137 46.201) |
| --color-amber-900 |
oklch(41.4% 0.112 45.904) |
| --color-amber-950 |
oklch(27.9% 0.077 45.635) |
Colour — Red
| token |
description |
| --color-red-50 |
oklch(97.1% 0.013 17.38) |
| --color-red-100 |
oklch(93.6% 0.032 17.717) |
| --color-red-200 |
oklch(88.5% 0.062 18.334) |
| --color-red-300 |
oklch(80.8% 0.114 19.571) |
| --color-red-400 |
oklch(70.4% 0.191 22.216) |
| --color-red-500 |
oklch(63.7% 0.237 25.331) |
| --color-red-600 |
oklch(57.7% 0.245 27.325) |
| --color-red-700 |
oklch(50.5% 0.213 27.518) |
| --color-red-800 |
oklch(44.4% 0.177 26.899) |
| --color-red-900 |
oklch(39.6% 0.141 25.723) |
| --color-red-950 |
oklch(25.8% 0.092 26.042) |
Type
| token |
description |
| --font-family-sans |
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
| --font-family-mono |
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace |
| --font-size--2 |
0.64rem |
| --font-size--1 |
0.8rem |
| --font-size-0 |
1rem |
| --font-size-1 |
1.25rem |
| --font-size-2 |
1.56rem |
| --font-size-3 |
1.95rem |
| --font-size-4 |
2.44rem |
| --font-size-5 |
3.05rem |
| --font-size-6 |
3.81rem |
| --font-weight-light |
300 |
| --font-weight-normal |
400 |
| --font-weight-medium |
500 |
| --font-weight-semibold |
600 |
| --font-weight-bold |
700 |
| --line-height-tight |
1.2 |
| --line-height-normal |
1.5 |
| --line-height-loose |
1.6 |
| --letter-spacing-tight |
-0.02em |
| --letter-spacing-normal |
0 |
| --letter-spacing-wide |
0.02em |
| --letter-spacing-wider |
0.08em |
Space
| token |
description |
| --space-void |
0 |
| --space-hairline |
1px |
| --space-1 |
0.25rem |
| --space-2 |
0.5rem |
| --space-3 |
0.75rem |
| --space-4 |
1rem |
| --space-5 |
1.25rem |
| --space-6 |
1.5rem |
| --space-7 |
1.75rem |
| --space-8 |
2rem |
| --space-12 |
3rem |
| --space-16 |
4rem |
| --space-32 |
8rem |
Borders
| token |
description |
| --border-width-1 |
1px |
| --border-width-2 |
2px |
| --border-width-4 |
4px |
| --border-radius-void |
0 |
| --border-radius-circle |
50% |
| --border-radius-pill |
9999px |
| --border-radius-sm |
0.25rem |
| --border-radius-md |
0.375rem |
| --border-radius-lg |
0.5rem |
| --border-radius-xl |
0.75rem |
Semantics
The named jobs — each maps a meaning onto a primitive, so the value can shift without the name moving.
Colour — Text
| token |
description |
| --color-text |
high-contrast body text |
| --color-text-muted |
low-contrast text: captions, small print, the h2 label |
| --color-on-solid |
text / icon on a neutral solid fill |
Colour — Surfaces
| token |
description |
| --color-background |
the page canvas |
| --color-background-subtle |
a faint step off the canvas |
| --color-surface |
a raised element background (cards, wells) |
| --color-surface-hover |
that element, hovered |
| --color-surface-active |
that element, active / selected |
| --color-solid |
a neutral solid fill |
| --color-solid-hover |
that fill, hovered |
Colour — Borders
| token |
description |
| --color-border-subtle |
the faintest separator / hairline |
| --color-border |
the standard border + focus ring |
| --color-border-hover |
a border on hover |
Colour — Accent
| token |
description |
| --color-accent-surface |
tinted accent background |
| --color-accent-surface-hover |
tinted accent background, hovered |
| --color-accent-border |
accent border / focus ring |
| --color-accent-solid |
brand fill: buttons, links |
| --color-accent-solid-hover |
brand fill, hovered |
| --color-accent-on-solid |
text / icon on the brand fill |
| --color-accent-text |
accent-coloured text |
Colour — Status
Four families, one shape. Never the sole signal — pair with an icon or word.
| token |
description |
| --color-success-surface |
success — tinted status background |
| --color-success-border |
success — status border |
| --color-success-text |
success — status-coloured text |
| --color-success-solid |
success — status fill |
| --color-success-on-solid |
success — text / icon on the status fill |
| --color-warning-surface |
warning — tinted status background |
| --color-warning-border |
warning — status border |
| --color-warning-text |
warning — status-coloured text |
| --color-warning-solid |
warning — status fill |
| --color-warning-on-solid |
warning — text / icon on the status fill |
| --color-danger-surface |
danger — tinted status background |
| --color-danger-border |
danger — status border |
| --color-danger-text |
danger — status-coloured text |
| --color-danger-solid |
danger — status fill |
| --color-danger-on-solid |
danger — text / icon on the status fill |
| --color-info-surface |
info — tinted status background |
| --color-info-border |
info — status border |
| --color-info-text |
info — status-coloured text |
| --color-info-solid |
info — status fill |
| --color-info-on-solid |
info — text / icon on the status fill |
Type
| token |
description |
| --font-family-body |
body copy face |
| --font-family-heading |
heading face |
| --font-family-code |
mono / code face |
| --text-size-body |
base reading size |
| --text-size-secondary |
one step down (captions, kbd, samp) |
| --text-size-muted |
smallest text (small) |
| --text-size-lede |
a lead paragraph |
| --text-size-title |
a title |
| --text-size-display |
the display / h1 size |
| --text-size-code |
inline code size |
| --text-lineheight-body |
body leading |
| --text-lineheight-heading |
heading leading |
| --text-lineheight-code |
code leading |
| --text-letterspacing-body |
body tracking |
| --text-letterspacing-heading |
heading tracking |
| --text-inlinesize-body |
the body measure (line-length cap) |
| --text-inlinesize-heading |
heading measure |
| --link-underline-thickness |
link underline thickness |
| --link-underline-offset |
link underline offset |
Space
| token |
description |
| --space-inset-3xs |
container padding — smallest |
| --space-inset-2xs |
container padding |
| --space-inset-xs |
container padding |
| --space-inset-s |
container padding |
| --space-inset-m |
container padding |
| --space-inset-l |
container padding |
| --space-inset-xl |
container padding |
| --space-inset-2xl |
container padding — largest |
| --space-gap-xs |
row / cluster gap (CSS gap) |
| --space-gap-s |
row / cluster gap |
| --space-gap-m |
row / cluster gap |
| --space-gap-l |
row / cluster gap |
| --flow-space-2xs |
vertical rhythm between prose — tight |
| --flow-space-s |
vertical rhythm between prose |
| --flow-space-m |
vertical rhythm between prose |
| --flow-space-xl |
vertical rhythm between prose — wide |
Borders
| token |
description |
| --border-width-default |
standard hairline border |
| --border-radius-control |
inline controls: code, kbd, link hover |
| --border-radius-card |
blocks: pre, details, cards |
| --focus-ring-width |
the focus outline width |
| --focus-ring-offset |
the focus outline offset |