BDTK / 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/.
Surface pairs
Every background token pairs with an on-* text token. Use these together — a Section's tone picks the pair for you.
| 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 | — |
| --color-link-on-inverse | — |
| --color-link-hover-on-inverse | — |
Role colors
Raw semantic roles, independent of surface pairing — used for status/feedback, not for text-on-background decisions.
| Token | Value |
|---|
| --color-primary | — |
| --color-secondary | — |
| --color-danger | — |
| --color-success | — |
| --color-warning | — |
Type scale
| Preview | Token | Value |
|---|
| Ag | --text-xs | — |
| Ag | --text-sm | — |
| Ag | --text-base | — |
| Ag | --text-lg | — |
| Ag | --text-xl | — |
| Ag | --text-2xl | — |
| Ag | --text-display | — |
| Ag | --text-h1 | — |
| Ag | --text-h2 | — |
| Ag | --text-h3 | — |
| Ag | --text-lead | — |
| Ag | --text-body | — |
| Ag | --text-small | — |
| Ag | --text-xsmall | — |
| Ag | --text-eyebrow | — |
Weight & leading
| Preview | Token | Value |
|---|
| Ag | --weight-regular | — |
| Ag | --weight-medium | — |
| Ag | --weight-bold | — |
| Ag Ag | --leading-tight | — |
| Ag Ag | --leading-normal | — |
| Ag Ag | --leading-loose | — |
Space
| Preview | Token | Value |
|---|
| --space-1 | — |
| --space-2 | — |
| --space-3 | — |
| --space-4 | — |
| --space-5 | — |
| --space-6 | — |
| --space-7 | — |
| --space-8 | — |
| --space-block-sm | — |
| --space-block | — |
| --space-block-lg | — |
| --space-section-sm | — |
| --space-section | — |
Shape & layout
| Token | Value |
|---|
| --radius-control | — |
| --radius-card | — |
| --layout-max | — |
| --layout-gutter | — |
Measures & containers
--measure-* caps text line length (ch-based). --container-* caps component/layout width (px-based).
| Token | Value |
|---|
--measure-xs | — |
--measure-sm | — |
--measure-md | — |
--measure-lg | — |
--container-flow | — |
--container-console | — |
Shadow
| Preview | Token | Value |
|---|
| --shadow-card | — |
| --shadow-raised | — |
| --shadow-overlay | — |
Motion
| Token | Value |
|---|
--dur-fast | — |
--dur-normal | — |
--dur-slow | — |
--ease | — |
Z-index
| Token | Value |
|---|
--z-sticky | — |
--z-nav | — |
--z-overlay | — |
--z-modal | — |
--z-tooltip | — |
Safe area
Environment insets for notches/home indicators — env(safe-area-inset-*) with a 0px fallback.
| Token | Value |
|---|
--safe-top | — |
--safe-right | — |
--safe-bottom | — |
--safe-left | — |
Icon
| Preview | Token | Value |
|---|
| --icon-size-sm | — |
| --icon-size-md | — |
| --icon-size-lg | — |
| --icon-stroke-width | — |