# Tokens

> Every token this site uses, in one place: colour, type, spacing, radius, and motion. A worked example of the token set a DESIGN.md points to.

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](/standards/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](/standards/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](/standards/spacing-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](/standards/motion) for the raced specimen.

## Related

### Agent skill

- `/dx-harness:dx-design-polish`: Reviews the visual craft of a page: spacing, type, radius, colour, and shadow. Proposes ranked fixes.

[All skills](/harness/skills)

### In the catalogue

- [TOK-1](/standards/catalog/tok-1) (L1): UI code contains no raw colour values — only the colour tokens DESIGN.md defines (else the codebase's theme tokens, else shadcn's semantic tokens)
- [TOK-2](/standards/catalog/tok-2) (L1): All spacing values come from the spacing scale DESIGN.md defines (else the codebase's, else the shadcn/Tailwind default scale)
- [TOK-3](/standards/catalog/tok-3) (L1): Corner radii come from the radius scale DESIGN.md defines (else the codebase's, else the shadcn default radius scale)