Design tokens

The single source of truth, every color, type, spacing, radius, and shadow value as a CSS custom property. Link it once and build on-brand.

Use it

Link /_shared/tokens.css in your <head> before any inline styles. Every value resolves to var(--token), so you build on-brand by reference instead of copying hex codes around.

<link rel="stylesheet" href="/_shared/tokens.css">

.cta {
  background: var(--color-blue-600);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}

Download

Design tokens

The full token system + the written spec.

tokens.css Design system spec (.md)

What's inside

Group	Examples
Color	`--color-blue-600`, `--color-ink-900`, `--chip-violet-bg`
Surfaces	`--color-surface-cream`
Type	`--font-family`, `--text-hero`, `--font-mono`
Spacing	`--space-1` … `--space-24`
Radius	`--radius-xs` … `--radius-2xl` (multiples of 4)
Elevation	`--shadow-card`, `--shadow-frame`
Layout	`--max-width`, `--prose-default`

Foundations

Each token family is documented with live specimens under Foundations, see the values in context before you reach for them.

Color →
Typography →
Spacing →
Radius →
Elevation →