← Back to blog
Design systemApril 9, 2025· 5 min read
Design tokens, no hype: how we build them in Tailwind 4
Tailwind 4 dropped JS config and standardised OKLCH. What that means for a client design system, and how we rewrote ours.
Creastra Digest
- Tokens live in @theme, not in JS
- OKLCH/oklab — for color-mix() with stable lightness
- Themes via CSS variables on :root, no recompile
A year ago our design system was 600 lines of JS config and a 12MB package. Today: 180 lines of CSS and zero JS. Tailwind 4 made us 3× faster.
Why OKLCH
In sRGB the same "intensity" reads differently across hues: yellow looks brighter than blue at the same lightness. OKLCH fixes this — same L = same perceived brightness. For UI it means hover states and border colours feel consistent across hues.
background: color-mix(in oklab, var(--accent), transparent 80%);Themes without recompile
A theme is a set of CSS variables on [data-theme="X"]. Switch is instant — no HMR, no bundle flicker. The same bg-accent class works in both themes because --accent simply changes.