Naming design tokens so they last
A token called blue-500 breaks the day the brand changes. Name tokens for what they do, not what they look like.
- Written by
- Anders Lindqvist
- Published
- 30 July 2026
- Reading time
- 1 min read
The first token set most teams write is a list of colours: blue-100 to blue-900, grey-50 to grey-950. It works until the brand refresh, when “blue” turns green and every name in the file becomes a lie.
Two layers
Keep the raw palette, but never use it directly in components. On top of it, add a second layer named for purpose: background, surface, text-muted, border, accent. Components only ever use the second layer.
Names that survive
A good test: could this name still be true after a redesign? “accent” can be any colour. “orange” can’t. “text-muted” survives a dark mode. “grey-600” doesn’t.
Start small
You don’t need two hundred tokens. Most products get far with twenty. Add a new one only when two components genuinely need different values, not because a designer nudged a shade once.
The tokens lesson in Design systems in Figma builds this setup from scratch, in variables you can export straight to code.
Keep reading.
· 2 min read
Auto layout is a shelf, not a spreadsheet
The mental model that finally makes Figma's auto layout click, and why it makes handoff easier too.
Ingrid Halvorsen
· 1 min read
What AI can't do for your user research
AI tools are great at summarising interviews. They are bad at noticing what people didn't say.
Sofia Ricci
· 2 min read
Why we teach Astro before React
Most beginners don't need a JavaScript framework. They need a page on the internet, and Astro gets them there faster.
Marco Bellini