One page, every token. Use the token name, never the value (TOK-1).
Your product's tokens come from its DESIGN.md. Where DESIGN.md defines none, the codebase's theme tokens decide. Where neither does, the shadcn and Tailwind defaults apply. The tables below are this site's tokens, from its DESIGN.md and app/globals.css.
Colour
| Token | Role | |
|---|---|---|
--background | The page canvas. | |
--surface | Panels and cards sitting on the page. | |
--foreground | Primary text ink. | |
--muted-foreground | Secondary text — darkened from zinc-500 to clear AA on the muted fill. | |
--border | Hairline dividers and default component borders. | |
--muted | Active fill and code background. | |
--accent | Hover fill. | |
--border-strong | Hover border. | |
--prose-body | Body text ink inside long-form content. | |
--ring | Focus ring colour. |
| Token | Role | |
|---|---|---|
--success | Success text — Radix grass-11. | |
--success-9 | Success solid fill — Radix grass-9. | |
--success-subtle | Success badge background. | |
--success-muted | Success badge border. | |
--warning | Warning text — darkened past Radix amber-11 to clear AA on a tinted background. | |
--warning-9 | Warning solid fill — Radix amber-9. | |
--warning-subtle | Warning badge background. | |
--warning-muted | Warning badge border. | |
--danger | Danger text — Radix red-11. | |
--danger-9 | Danger solid fill — Radix red-9. | |
--danger-subtle | Danger badge background. | |
--danger-muted | Danger badge border. |
See Colour for the Radix ramps and where each product's primary comes from.
Type scale
| Step | Size | Font |
|---|---|---|
| Display | 48px (also 60 / 72 / 96) | Plus Jakarta Sans 600 |
| Heading 1 | 30px | Plus Jakarta Sans 600 |
| Heading 2 | 24px | Plus Jakarta Sans 600 |
| Heading 3 | 20px | Plus Jakarta Sans 600 |
| Body Large | 18px | Inter 400 |
| Body | 16px | Inter 400 |
| Body Small | 14px | Inter 400 |
| Caption | 12px | Inter 500 |
| Label | 12px | Inter 600 |
See Typography for font roles and usage rules.
Spacing
| Step | Size |
|---|---|
| 1 | 4px |
| 2 | 8px |
| 3 | 12px |
| 4 | 16px |
| 5 | 20px |
| 6 | 24px |
| 8 | 32px |
| 10 | 40px |
| 12 | 48px |
| 16 | 64px |
| 20 | 80px |
| 24 | 96px |
The scale continues to 112 and 128px.
See Spacing and radius for the full spacing and radius specimens.
Radius
| Token | Value |
|---|---|
rounded-none | 0px |
rounded-xs | 2px |
rounded-sm | 4px |
rounded-md | 6px |
rounded-lg | 8px |
rounded-xl | 12px |
rounded-2xl | 16px |
rounded-3xl | 24px |
rounded-full | calc(infinity * 1px) |
Motion
| Token | Value |
|---|---|
--motion-fast | 120ms |
--motion-base | 200ms |
--motion-slow | 300ms |
--motion-story | 600ms |
--ease-out | cubic-bezier(0.215, 0.61, 0.355, 1) |
--ease-in-out | cubic-bezier(0.645, 0.045, 0.355, 1) |
Durations and easings are never hardcoded — always reference the token (MOT-2 ⚑). See Motion for the raced specimen.