Design tokens are not CSS variables. This distinction sounds semantic, but getting it wrong produces systems that serve neither designers nor developers.
The mistake
When teams generate tokens from Figma and map them 1:1 to CSS variables, they end up with --color-blue-500 everywhere. This is an implementation detail, not a token. A token is a decision: --color-accent. The implementation of that decision can change — the token should not.
The correct layer
Tokens belong at the semantic layer. They answer the question "what is this for?" not "what is this value?". --color-border-subtle is a token. --gray-200 is a primitive.
Originally published on ysndmr.com.
Top comments (0)