Color
Use semantic tokens, never palette steps. The finish decides which palettes exist; the mode decides which step each role uses. Values below follow the finish and mode set in the header.
Background
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.bg.canvas | bg-canvas | neutral.light.2 | ||
| color.bg.surface | bg-surface | neutral.light.1 | ||
| color.bg.sunken | bg-sunken | neutral.light.3 | Wells: table headers, code, count chips. | |
| color.bg.overlay | bg-overlay | neutral.light.1 | Floating layers. Pair with material.overlay.*. | |
| color.bg.hover | bg-hover | neutral.light.4 | ||
| color.bg.active | bg-active | neutral.light.5 | Pressed and selected rows. |
Text
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.fg.default | text-default | neutral.light.12 | Primary text. At least 7:1 on canvas and surface. | |
| color.fg.muted | text-muted | neutral.light.11 | Secondary text. At least 4.5:1 on canvas and surface. | |
| color.fg.disabled | text-disabled | neutral.light.8 | Disabled labels only. Exempt from contrast minimums, so never use it for readable text. | |
| color.fg.on-accent | text-on-accent | accent.light.contrast | Text and icons on color.accent.solid. |
Border
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.border.subtle | border-subtle | neutral.light.6 | Dividers and card edges. | |
| color.border.default | border-default | neutral.light.7 | Input and control borders. | |
| color.border.strong | border-strong | neutral.light.8 | Hovered borders. |
Accent
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.accent.solid | bg-accent | accent.light.9 | Primary buttons, selected indicators. | |
| color.accent.solid-hover | bg-accent-hover | accent.light.10 | ||
| color.accent.subtle | bg-accent-subtle | accent.light.3 | Tinted backgrounds for selected or highlighted items. | |
| color.accent.subtle-hover | bg-accent-subtle-hover | accent.light.4 | ||
| color.accent.border | border-accent | accent.light.7 | ||
| color.accent.text | text-accent | accent.light.11 | Links and accent text. At least 4.5:1 on canvas and surface. |
Focus
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.focus.ring | outline-focus | accent.light.9 | Focus rings. At least 3:1 against canvas and surface. |
Success
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.success.solid | bg-success | success.light.9 | ||
| color.success.subtle | bg-success-subtle | success.light.3 | ||
| color.success.border | border-success | success.light.7 | ||
| color.success.text | text-success | success.light.11 | At least 4.5:1 on canvas and surface. |
Warning
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.warning.solid | bg-warning | warning.light.9 | ||
| color.warning.subtle | bg-warning-subtle | warning.light.3 | ||
| color.warning.border | border-warning | warning.light.7 | ||
| color.warning.text | text-warning | warning.light.11 | At least 4.5:1 on canvas and surface. |
Danger
| Token | Tailwind | Maps to | Use | |
|---|---|---|---|---|
| color.danger.solid | bg-danger | danger.light.9 | ||
| color.danger.subtle | bg-danger-subtle | danger.light.3 | ||
| color.danger.border | border-danger | danger.light.7 | ||
| color.danger.text | text-danger | danger.light.11 | At least 4.5:1 on canvas and surface. |
Palettes · Su 素
Generated in OKLCH from palette.config.ts. Every step has one job, so modes can map roles to steps. Don't use these directly in product code.
neutral
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
accent
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
success
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
warning
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
danger
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
bgbgfillfillfillborderborderbordersolidsolidtexttext