Design Tokens

Design tokens are the single source of truth for design decisions.

Philosophy

• CSS-first: Define tokens in CSS @theme, not JavaScript config
• Semantic naming: --color-primary not --color-blue-500
• Brand-tinted neutrals: Add imperceptible brand hue (chroma 0.005-0.02), not pure gray
• OKLCH colors: Perceptually uniform, better than RGB/HSL

Why Tailwind CSS 4 @theme

• CSS-native (no build step overhead)
• Type-safe auto-completion
• CSS variable integration (var(--color-primary))
• Dark mode built-in

Migration from Tailwind 3: Delete tailwind.config.js, move to CSS @theme.