Design tokens & theming
Tokens become expensive when every team invents a name for the same decision.
Separate primitives from decisions
Keep raw colour, type and spacing values in one layer, then express product decisions in another. People should reach for purpose before they reach for a hex value.
Name tokens by role
Use names that describe the job the token performs: text, surface, border, focus and action. Brand names and visual adjectives age faster than the interface does.
Publish fewer choices
A small token set is easier to remember, test and migrate. Retire near-duplicates before documenting new ones, and show the reason in the changelog.
A token is a promise. Do not make more promises than the team can keep.
Files for this chapter
JSONtokens.json (W3C format)DownloadFIGFoundations library v2.1Open