Token reference
Complete reference for the v2 design token system. All tokens are CSS custom properties defined via Tailwind v4's @theme directive.
Color scales
Each scale provides 14 OKLCH steps (0-13). Step 0 is the lightest extreme, step 13 the darkest. Dark mode swaps the underlying values — step numbers stay the same.
neutral
0
1
2
3
4
5
6
7
8
9
10
11
12
13
brand
0
1
2
3
4
5
6
7
8
9
10
11
12
13
brand-secondary
0
1
2
3
4
5
6
7
8
9
10
11
12
13
accent
0
1
2
3
4
5
6
7
8
9
10
11
12
13
danger
0
1
2
3
4
5
6
7
8
9
10
11
12
13
success
0
1
2
3
4
5
6
7
8
9
10
11
12
13
warning
0
1
2
3
4
5
6
7
8
9
10
11
12
13
info
0
1
2
3
4
5
6
7
8
9
10
11
12
13
Intent semantic tokens
Set by intent utilities (e.g. intent-accent). Each intent maps scale steps to semantic roles.
Surface
| Token | Step | Usage |
|---|---|---|
--intent-surface-default | 1 | Page/canvas background |
--intent-surface-subtler | 2 | Barely tinted background |
--intent-surface-subtle | 3 | Noticeable tint, button hover bg |
--intent-surface-strong | 9 (neutral: 12) | Solid color, primary buttons |
--intent-surface-inverted | 12 | Inverted surface |
--intent-surface-raised | 0 (dark: 2) | Elevated card with shadow |
--intent-surface-sunken | 2 (dark: 0) | Inset area with shadow |
Border
| Token | Step | Usage |
|---|---|---|
--intent-border-subtler | 5 | Card edges, very faint |
--intent-border-subtle | 6 | Dividers, hr |
--intent-border-normal | 7 | Standard borders |
--intent-border-strong | 9 | Bold borders |
--intent-border-inverted | 12 | Inverted borders |
Foreground
| Token | Step | Usage |
|---|---|---|
--intent-fg-subtler | 10 | Placeholder, hint text |
--intent-fg-subtle | 11 | Secondary text, button text |
--intent-fg-default | 12 | Body text |
--intent-fg-strong | 13 | Bold headings |
--intent-fg-inverted | 0 | White/black text on strong surfaces |
Raw steps
| Token | Step | Usage |
|---|---|---|
--intent-0 … --intent-13 | 0–13 | Direct access to any scale step for hover/active states |
Typography
Font sizes (fluid from lg)
| Token | Step | Usage |
|---|---|---|
--text-xs | 0.75rem | 12px |
--text-sm | 0.875rem | 14px |
--text-base | 1rem | 16px |
--text-lg | clamp(1.125rem…1.25rem) | 18–20px fluid |
--text-xl | clamp(1.25rem…1.5rem) | 20–24px fluid |
--text-2xl | clamp(1.5rem…2rem) | 24–32px fluid |
--text-3xl | clamp(1.75rem…2.5rem) | 28–40px fluid |
--text-4xl | clamp(2rem…3rem) | 32–48px fluid |
--text-5xl | clamp(2.25rem…4rem) | 36–64px fluid |
Semantic line heights
| Token | Step | Usage |
|---|---|---|
--leading-display | 1.2 | Headings |
--leading-ui | 1.35 | App interface |
--leading-prose | 1.5 | Long-form |
--leading-code | 1.625 | Code blocks |
Semantic letter spacing
| Token | Step | Usage |
|---|---|---|
--tracking-display | -0.02em | Headings |
--tracking-ui | -0.01em | App interface |
--tracking-prose | -0.01em | Long-form |
--tracking-code | 0em | Code blocks |
Elevation
Box shadows
| Token | Step | Usage |
|---|---|---|
--elevation-raised | drop shadow | Cards, floating elements |
--elevation-sunken | inset shadow | Recessed areas, inputs |
--elevation-overlay | large shadow | Modals, popovers |
All tokens are defined in packages/core/src/css/tokens.css. Intent mappings are in intents.css. Emphasis utilities are in emphasis.css.