Why Tokens Are Layered into Primitive and Semantic Names
A token set defines blue-500: #2D6CDF (a primitive) and
color-primary-500 (a semantic token pointing at that primitive),
rather than components referencing the hex value directly.
What does this extra layer of indirection make possible?
The correct answer is "A full rebrand by repointing which primitive a semantic token maps to."
Layering tokens into a primitive (the raw value) and a semantic
layer (a name like color-primary-500 that points at the primitive)
is what makes a full rebrand possible without renaming anything
components already reference: swap which primitive color-primary- 500 points to, and every component using the semantic name updates
automatically, while the primitive palette can also change
independently without touching component code at all.
The distractors misdescribe the purpose: the layering isn't unnecessary complexity — it's specifically what removes a find-and- replace operation across a whole codebase during a rebrand or dark-mode rollout; it isn't primarily about CSS compile speed, which isn't the mechanism this subject describes at all; and it isn't a Figma-only requirement with no effect on shipped code — the same layering is what a build tool like Style Dictionary turns into real platform-specific output (CSS, Swift, XML) from one source.
Share this question