A rebrand is the stress test every design system eventually faces. If the new palette requires editing two hundred components, the system was a component library with a colour problem. If it requires editing one token file, it was a system.
We rebuilt three product design systems ahead of rebrands in the past two years. The teams that finished quickly shared the same structure, and it had less to do with tooling than with where they allowed brand decisions to live.
Separate brand from product
Brand tokens describe identity: the exact red, the display typeface, the corner radius in a campaign. Product tokens describe intent: danger, emphasis, surface, control height. Components should consume intent, not identity. When the brand red changes, the danger token changes and every component follows.
The separation sounds obvious in a slide deck and gets violated in the first sprint. Someone hard-codes the brand red because the danger token is not quite right, and the shortcut survives until the audit. A lint rule or a token-only build step catches most of these before they merge.
Name for meaning, not appearance
blue-500 describes a colour. action-primary describes a job. The first name becomes a lie the moment the palette changes; the second survives. Use a numeric scale for the raw palette and semantic names for everything a component touches.
The same rule applies to spacing and typography. space-4 is a scale step. stack-gap is a decision. Keep both, and make components use the decision. When a new brand guide arrives with a different rhythm, you remap the scale and adjust the decisions, not every layout.
Structure the repository around change
A workable structure has four layers. The foundation folder holds raw palette, type scale, spacing and elevation. The semantic folder maps foundation values to intent. The component folder consumes semantics and contains no raw values. The pattern folder composes components for product use cases.
Each layer has an owner and a review rule. Foundation changes need brand approval. Semantic changes need design and accessibility review. Component changes need a visual regression test. Pattern changes can move faster because they compose approved parts.
If a rebrand requires a component migration, the system is describing the old brand more precisely than it is describing the product.
Document the seams
Every system has places where brand expression is allowed to be loud: campaign headers, empty states, onboarding art. Mark those seams explicitly. A component called campaign-hero may use brand colour directly, because its job is expression. A button may not.
Write the rule down where designers and engineers will see it, not in a wiki nobody opens. A short comment in the token file and a lint exception with an expiry date works better than a policy document. The goal is to make the right thing easier than the shortcut.
Key facts
- Components consume intent tokens, never raw brand values.
- Keep a raw palette and a semantic layer; do not merge them.
- Name tokens for the job, not the colour or size.
- Split foundation, semantic, component and pattern layers.
- Mark expressive brand seams and lint the exceptions.
Plan the migration before the rebrand
Inventory every place the current brand appears: components, illustrations, email templates, social exports and presentation decks. The off-system assets usually take longer than the product itself. A rebrand that updates the app but leaves forty slide templates untouched looks unfinished for a year.
Build a thin migration guide with before-and-after examples, a mapping table from old to new tokens, and a deadline for each surface. Keep the old tokens available for one release cycle, then remove them. Permanent compatibility layers become the next audit's biggest finding.
Test with real content
New palettes fail on real text, not on lorem ipsum. Test long product names, error messages, tables with dense numbers, and the disabled state that nobody designs. Check contrast at the smallest size you ship, including placeholder text and focus rings.
Run a visual regression suite across light, dark and high-contrast modes if you support them. The rebrand is exactly when a missed token shows up as a white card on a white background in a checkout flow. For the image pipeline that feeds these surfaces, see AI image tools in production design. For measuring whether the new design performs, read cookieless analytics.
Bottom line
A design system survives a rebrand when brand decisions live in one layer and product decisions live in another. Name for meaning, structure for change, document the seams and test with real content. The next rebrand will be a config change instead of a rescue mission.
