# Design system — tokens & theming The client's visual language lives in a single set of CSS custom properties (design tokens). Components reference the tokens (`var(--color-…)`, `var(--space-…)`) instead of literal hex/px, so a palette change is a one-file edit and the light and dark themes stay in lockstep. ## Where the tokens live - [`src/lib/theme/tokens.css`](../frontend/src/lib/theme/tokens.css) — every token. Theme-independent scales (spacing, radii, typography) sit in `:root`; the colour/shadow palette is defined twice, once for dark (`:root, :root[data-theme="dark"]`) and once for light (`:root[data-theme="light"]`). - [`src/lib/theme/base.css`](../frontend/src/lib/theme/base.css) — a small global baseline (document background, default text/typography, a token-driven focus ring, selection colour). Everything else stays in component-scoped `