Foundations
Foundations
The package has 373 tokens in three layers: 126 primitives, 141 semantic tokens and 106 component tokens. These pages show the semantic layer in the base theme, which is the one you write CSS against.
Foundation pages
- ColorSurfaces, text, accent, borders and feedback, light and dark.39 tokens
- SpacingGaps and padding, named by what they separate.19 tokens
- TypographyThe type scale, families, weights and line heights.39 tokens
- MotionDurations and easing curves, with a demo.7 tokens
Other tokens
The semantic tokens that don’t need a page of their own. None of them change between light and dark.
Radius
Corner rounding by role: components, interactive controls, images and pills.
| Token | Value | Used by |
|---|---|---|
--border-radius-component | 8px | Alert, Card, Dialog, Menu and 4 more |
--border-radius-interactive | 4px | Alert, Dialog, Drawer, Menu and 11 more |
--border-radius-image | 0.75rem | Card |
--border-radius-pill | 9999px | Avatar, Badge, Button, Input and 2 more |
Border width
The default border and the border on interactive controls.
| Token | Value | Used by |
|---|---|---|
--border-width-interactive | 1px | Menu, NavigationMenu, Button, Checkbox and 4 more |
--border-width-default | 1px | Alert, Card, Dialog, Drawer and 12 more |
Shadow
Elevation by component: cards, dropdowns, dialogs and toasts.
| Token | Value | Used by |
|---|---|---|
--shadow-card | 0 1px 2px 0 rgba(0,0,0,0.05) | — |
--shadow-card-hover | 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10) | Card |
--shadow-dropdown | 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10) | Menu, NavigationMenu, Select |
--shadow-dialog | 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10) | Drawer |
--shadow-toast | 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10) | Toast, Tooltip |
Size
The focus ring, icon sizes, the default dialog width and the container widths for text, media and pages.
| Token | Value | Used by |
|---|---|---|
--focus-ring-width | 2px | Alert, Card, Dialog, Drawer and 18 more |
--focus-ring-offset | 4px | Alert, Card, Dialog, Drawer and 19 more |
--size-icon-xs | 12px | Link |
--size-icon-sm | 16px | Menu, NavigationMenu, SideNav, Spinner |
--size-icon-md | 20px | Alert, Toast, Accordion, Spinner |
--size-icon-lg | 24px | Spinner |
--size-icon-xl | 32px | — |
--size-dialog-default | 560px | — |
--size-container-text | 45rem | — |
--size-container-media | 60rem | — |
--size-container-wide | 80rem | — |
--size-container-page | 90rem | — |
--size-container-site | 90vw | — |
Opacity
The overlay behind a dialog, and disabled controls.
| Token | Value | Used by |
|---|---|---|
--opacity-overlay | 0.3 | — |
--opacity-disabled | 0.1 | Menu, Accordion, Pagination, Tabs and 7 more |
Z-index
Stacking order, lowest to highest. The skip link sits above everything.
| Token | Value | Used by |
|---|---|---|
--z-sticky | 100 | — |
--z-dropdown | 200 | NavigationMenu |
--z-overlay | 300 | — |
--z-modal | 400 | — |
--z-toast | 500 | Toast |
--z-tooltip | 600 | Tooltip |
--z-skip-link | 700 | SkipLink |
How the tokens are layered
Primitives are raw values: a gray ramp, a 4px spacing step. Components never use them; the linter fails the build if one does. Semantic tokens name a role, like --color-text-secondary or --space-element-gap, and point at a primitive. A brand or dark mode changes what they point at. Component tokens name one component’s decisions, like --button-padding-x, and are listed on each component’s page.
Every token, primitives included, with all four resolved values, is in tokens.json.