Design tokens that scale across brands
How a three-tier token architecture let one client run five brands from a single component library.
Elena Vos
Design tokens are named values — colours, spacing, typography — that both designers and code can share. Used well, they let you change a brand's look without touching a single component.
Three tiers
- Primitive tokens describe raw values:
blue-600,space-4. - Semantic tokens describe intent:
color-action,space-section. - Component tokens are optional and describe exceptions:
button-radius.
Components only ever use semantic tokens. To create a new brand, you remap semantic tokens to a different set of primitives.
The result
For a hospitality group with five hotel brands, this approach meant one component library, one codebase and five distinct identities. New brands now launch in weeks rather than months.
Keep reading
DesignDesigning for calm: why the best products feel quiet
Attention is the scarcest resource your users have. Here is how we design interfaces that respect it, and why calm products convert better.
Elena Vos
TechnologyGuidesHeadless CMS without the headache
Structured content gives teams superpowers, but only if editors can actually use it. Our playbook for headless projects that editors love.
Marcus Lindqvist
CompanyDesignIntroducing Polaris, our first desk lamp
Two years, forty prototypes and one obsession with even light. The story behind the lamp that started our product line.
Elena Vos