Tokens
Globally defined design tokens — CSS custom properties (variables) that control the visual foundation of the product.
Tokens define values that are referenced everywhere: colours, spacing, border radii, typography scales, shadow levels. When a token changes, every component that uses it updates automatically.
Why tokens matter
They are the bridge between the design system and the code. Changing --color-primary in one place changes the button, the link, the badge, and everything else that references it. Dark mode is implemented by swapping one set of token values for another.
Relation to dark mode
Dark mode works by redefining colour tokens for a dark surface context. The component code doesn’t change — only the token values do.
Scope
Tokens are a product-level design system concept. They are not user-configurable. They live in the codebase as CSS custom properties.