From Moodboard to Design Tokens: A Rebrand Workflow That Holds
A rebrand fails when it stops at a PDF. The work holds only when colour, type and spacing become tokens that product teams can use without asking the designer.
Rebrands are usually presented as a visual event: a new logo, a new palette, a launch page. The harder work begins after the reveal, when every product surface, email template and partner asset has to adopt the new direction without drifting into a dozen interpretations.
The teams that handle this well treat the rebrand as a system change. They turn visual decisions into tokens, ship components that use those tokens, and give product teams a way to adopt the new look without a designer in every review. The result is not just consistency; it is speed.
Start with decisions, not moodboards
A moodboard is useful for exploration, but it is not a specification. Before opening Figma, write down the decisions the brand needs to encode:
- What should the product feel like at first glance: calm, editorial, technical, playful?
- Where should colour carry meaning, and where should it stay decorative?
- How much density can the interface tolerate before it feels crowded?
- Which existing patterns must survive because users depend on them?
These answers become constraints. A direction that says "calm and editorial" implies generous spacing, restrained accent colour and a type scale with clear hierarchy. A direction that says "dense and technical" implies tighter spacing and more information per screen. Without those statements, every review becomes a matter of taste.
Translate direction into tokens
A token is a named decision. Start with three layers and resist the urge to add more until the team feels the pain.
- Primitive tokens. Raw values: the palette, the type scale, spacing steps, radii. These are not used directly in components.
- Semantic tokens. Purpose-driven names: surface, text-primary, text-muted, border, accent, danger. These are what components consume.
- Component tokens. Only for components with genuinely unique behaviour, such as a button's hover state or a card's elevation.
Name semantic tokens by role, not by appearance. text-muted survives a palette change; gray-500 does not. Keep the primitive layer small enough to audit, and document contrast ratios for every text-on-surface pairing.
Type deserves the same treatment. Define a modular scale, line-height pairs and a small set of weights. If the brand uses two typefaces, assign each a clear job: one for display, one for interface and long-form reading. A third face is usually decoration that will be dropped within a year.
Component migration order
Migrating every component at once creates a long-lived branch and a painful merge. A better order follows user exposure:
- Foundations: colour, type, spacing and focus states.
- High-frequency primitives: buttons, inputs, links, badges.
- Layout shells: headers, navigation, page containers.
- Composite components: cards, tables, forms, modals.
- Edge surfaces: emails, error pages, partner widgets.
At each step, ship a visible change to a real surface. Teams trust a design system when they see it working, not when they read a migration guide.
Governance that survives launch
Governance is often mistaken for a approval committee. For a small team, it is better to make the right thing the easy thing:
- Tokens live in code. A single source exported to CSS, Figma and mobile. No parallel palettes.
- Changes go through review. A token change is a code change with a visual diff and a migration note.
- Deprecation has a date. Old tokens get a warning and a removal date, not an indefinite grace period.
- Contribution is documented. A short guide explaining how to propose a component or a new semantic token.
Keep a lightweight decision log. When someone asks why the accent colour changed in dark mode, the answer should be a link, not a memory.
What good looks like after 90 days
Three months after launch, a healthy rebrand has a few observable signs:
- New pages are built from existing components without a designer inventing a layout for each one.
- Colour and type changes ship in hours, not weeks, because they are token updates.
- Product teams can explain the brand direction in one sentence and point to the tokens that express it.
- Accessibility checks are part of the component review, not a separate audit.
If those are true, the rebrand has become infrastructure. If they are not, the PDF is still the source of truth, and the drift has already started.
The bottom line
A rebrand holds when it is translated into decisions, tokens and components. Moodboards align people; tokens let them execute. Invest in the boring middle — naming, contrast, migration order and deprecation — and the visual launch will still look good six months later.