Design Tokens & Theming
Architect a design-token system — semantic color, typography, spacing, and radius scales as CSS variables with light/dark themes. Uses the Tailwind CSS 4 @theme directive for a single source of truth.
This skill establishes a token architecture: primitive and semantic tokens for color, typography, spacing, and radii exposed as CSS custom properties, wired through the Tailwind CSS 4 @theme directive. It sets up light/dark and brand themes, naming conventions, and consistent scales that components consume.
design-tokens theming css-variables tailwind dark-mode
When to use
Use when establishing a design system's foundations, defining semantic color/spacing/typography scales, implementing dark mode via tokens, or unifying brand theming across components.
Examples
Semantic token layer
Primitives to semantics
Define a design-token system with primitive color scales and semantic tokens (surface, text, accent, border) as CSS variables via Tailwind 4 @theme
Themeable dark mode
Swap tokens by theme
Set up light and dark themes that swap semantic token values with a data-theme attribute, so all components re-theme with no per-component changes