What are design tokens?

WHAT THIS TESTS Whether you understand design tokens as the abstracted, named representation of design decisions that can target multiple platforms, not just a CSS variable by another name.

A GOOD ANSWER COVERS Design tokens are named entities that store visual design decisions: a color, a spacing step, a font size, a radius. They are platform-agnostic, typically authored once in a neutral format like JSON, and then transformed into platform-specific outputs by a build tool such as Style Dictionary, producing CSS custom properties for web, XML for Android, or Swift constants for iOS. Components consume tokens by name rather than raw values, so the design decision lives in one place. A useful distinction is primitive tokens, like blue-500 holding a raw hex, versus semantic tokens, like color-action-primary that points at a primitive and carries meaning. Components should consume semantic tokens.

COMMON WRONG ANSWERS Calling a hardcoded hex value a token misses the naming and indirection that give tokens their power. Saying tokens are only CSS variables ignores that they are a source of truth transformed to many platforms. Skipping the primitive-versus-semantic layering leads to brittle systems where a rebrand touches everything.

LIKELY FOLLOW-UPS Why two layers of tokens? Primitives hold raw values, semantics give intent and let you reskin by repointing. How are tokens shared with designers? Through the same JSON source synced to design tools. How do you transform them? A build step generates per-platform files.

ONE CONCRETE EXAMPLE Define a primitive token blue-600 with a hex value, then a semantic token color-button-bg that references blue-600. Style Dictionary transforms these into a CSS custom property. The button rule sets background to var(--color-button-bg). To make the button green, you repoint color-button-bg to a green primitive in the source, rebuild, and every button updates without touching component CSS or hunting for hardcoded values.