디자인 토큰을 구현 세부 정보로 사용하는 것을 중단한 이유

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.