System / Tokens
Design tokens
Semantic tokens are the only values components may use. Values below are read live from the running theme, so the table always reflects reality. Defined in packages/tokens/.
Color
| Token | Value |
|---|
| --color-bg | — |
| --color-text | — |
| --color-text-muted | — |
| --color-text-subtle | — |
| --color-surface-muted | — |
| --color-on-muted | — |
| --color-on-muted-subtle | — |
| --color-surface-inverse | — |
| --color-on-inverse | — |
| --color-on-inverse-muted | — |
| --color-accent | — |
| --color-on-accent | — |
| --color-accent-2 | — |
| --color-on-accent-2 | — |
| --color-border | — |
| --color-link | — |
| --color-link-hover | — |
Type
| Preview | Token | Value |
|---|
| Ag | --text-display | — |
| Ag | --text-h1 | — |
| Ag | --text-h2 | — |
| Ag | --text-h3 | — |
| Ag | --text-lead | — |
| Ag | --text-body | — |
| Ag | --text-small | — |
Space
| Preview | Token | Value |
|---|
| --space-2 | — |
| --space-4 | — |
| --space-6 | — |
| --space-8 | — |
| --space-10 | — |
| --space-12 | — |
| --space-16 | — |
| --space-20 | — |
| --space-section | — |
| --space-section-sm | — |
Shape & layout
| Token | Value |
|---|
| --radius-control | — |
| --radius-card | — |
| --layout-max | — |
| --layout-gutter | — |