Design Tokens Are Not CSS Variables. Here's the Difference That Matters.

The Confusion Is Everywhere Ask ten frontend engineers what a design token is and nine of them will show you a CSS custom property. That's not wrong. But it's also not the whole story — and the difference matters more than most teams realize until they're deep in a multi-platform codebase with drift between iOS, web, and Figma. What a Design Token Actually Is A design token is a platform-agnostic name-value pair with semantic meaning. The key word: platform-agnostic. CSS variables live in CSS. A design token lives in a format that can compile into CSS, Swift, Kotlin, Tailwind config, or whatever your stack needs. The token is the source of truth. The CSS variable is one output of that source of truth. The W3C DTCG (Design Token Community Group) format makes this concrete: This is what tools like Style Dictionary, Theo, and Supernova expect. This is what Figma Variables exports. This is what enables one palette to compile into every target format your team ships. Why the Distinction Bre