Design Tokens That Survive a Rebrand
Most token systems break the moment the brand changes. Here is how to structure tokens so a rebrand is a config change, not a rewrite.
Why most token systems fail
Most token systems are built from the color up. You define your brand blue, your brand red, your brand gray. Then you build components that reference those colors directly. When the brand changes — and it always does — you have to update every component. A rebrand becomes a rewrite.
The problem is that tokens are named after their values, not their purposes. A token called "blue-500" tells you what the color is, but not what it is for. When the brand changes from blue to green, "blue-500" is now green, and every component that references it is semantically wrong.
The three-layer model
A resilient token system has three layers. The first layer is primitive tokens: raw values like "blue-500" or "spacing-4". These describe what the value is. The second layer is semantic tokens: purpose-based names like "color-primary" or "spacing-card-padding". These describe what the value is for. The third layer is component tokens: specific names like "button-background" or "card-border-radius". These describe where the value is used.
Components reference only component tokens. Component tokens reference semantic tokens. Semantic tokens reference primitive tokens. When the brand changes, you update the mapping from semantic to primitive. The components do not change because they never referenced the primitive directly.
Practical implementation
Start with the semantic layer. Define a small set of purpose tokens: primary, secondary, accent, success, warning, error, and a neutral ramp. Each one maps to a primitive. Then define component tokens only for components that have unique needs. Most components can use semantic tokens directly; only a few need their own.
The test is simple: can you rebrand by changing only the primitive-to-semantic mapping? If yes, your system is resilient. If you have to touch component tokens, your layers are leaking. Fix the leak before it becomes a rebrand emergency.
