Design Nomenclature / Systems & Spec
Variable
Also called CSS variable, custom property, CSS custom property, Figma variable
A 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.
In practice
The two words are used interchangeably, and the collapse is harmless right up until a second platform arrives. `--color-text-subtle` is a variable that a token generated; edit the variable and the next build silently overwrites you.
Not to be confused with
- Design tokenA 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.
- 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.