Design Nomenclature / Systems & Spec
Design token
Also called token, design variable, style token
A named, single-source value for a design decision — a colour, a step on a spacing scale, a duration — held in a format that transforms into CSS, iOS, Android, or Figma. The name is the contract; the value is free to change per theme, platform, or density without the name changing.
In practice
Means a JSON entry to one team and a Figma variable to another, and the two are rarely in sync. Establish which direction generation runs before agreeing anything.
Not to be confused with
- VariableA platform's own named-value mechanism — a CSS custom property, a Figma variable, an iOS colour asset. It is where a token lands, not what a token is: a variable resolves at runtime in one platform's terms, while a token is a source entry meant to compile into all of them.
- Semantic tokenA token named for its role rather than its value — `color.text.subtle`, not `gray.600` — pointing at a primitive token beneath it. The primitive layer holds the palette; the semantic layer holds the decisions. Only the semantic layer should ever appear inside a component.