Naming tokens that survive a rebrand
Every name encoding an appearance is a name that will be wrong within a year. --colour-blue-primary is already a bug with a date on it.
A good token name says what the thing is for and where it applies: --surface-raised, --text-muted, --border-focus, --space-section. A bad one says what it looks like: --grey-100, --blue-primary, --space-20. The second kind works perfectly until the value changes, at which point every usage is misleading and nobody dares rename it.
A pattern that extends is worth more than a pattern that is elegant. Category, role, variant, state, in that order, consistently, means a new token has an obvious name and you never have to hold the whole list in your head. Inconsistent ordering is the reason people give up on a system and start writing hex again.
You should now be able to
- Name tokens by role, scope and state
- Recognise a name that has hard-coded a value
- Design a naming pattern that extends without renaming
Loading…