From brand identity to design system

Why the brand gets lost between guidelines and product

Guidelines are often a PDF designed for communication: a logo, a palette, two typefaces, a few layouts. They describe successful examples. The product needs rules: which colour for a link, for an error, for a hovered background, in light and dark mode, with enough contrast.

Without a translation, every team interprets. The brand blue becomes three blues, the display typeface ends up in buttons, and a year later the product no longer really looks like the brand. Nobody made a mistake: the layer between intent and interface was simply missing.

What guidelines say, what the product needs

• Guidelines give a palette; the product needs roles: background, text, border, action, success, error, and their states.
• Guidelines give typefaces; the product needs a scale: sizes, line heights and weights for every reading level, from heading to caption.
• Guidelines give a mood; the product needs values: radii, spacing, shadows, animation durations.
• Guidelines show the ideal screen; the product has to handle empty states, errors, loading, overly long text and 320-pixel screens.

Translating colour: from palette to roles

Step one: generate a scale for each brand colour, from very light to very dark. The official colour has its place in it, but it is just one step among others. That is what gives you a subtle tinted background, a darker hover and readable text, without leaving the brand.

Step two: name roles rather than colours. A component does not ask for “blue 600”, it asks for “action colour”. That is the principle of three-tier tokens: reference, role, component. When the brand evolves, or a dark theme arrives, you change how roles map, not the components.

--ref-blue-600: #272DCB;            /* the guidelines colour */
--sys-color-action: var(--ref-blue-600);
--button-primary-bg: var(--sys-color-action);

Step three: check contrast. Many brand colours, chosen for a poster or a logo, do not meet the WCAG 4.5:1 threshold for text. That is fine: keep the colour for large surfaces and graphic elements, and pick a darker step for text and links.

Translating typography: from two typefaces to a scale

A strong identity often relies on a very expressive display typeface. It shines at large sizes, much less at 14 pixels in a table. The most useful rule: one role per typeface. A display face for headings, a text face for everything that is read or clicked.

• Define a short scale, five to seven sizes, with their line heights. Beyond that, nobody uses it correctly.
• Limit the weights actually loaded: each weight is one more file to download.
• Check the web and app licence of the typefaces before writing the first line of code.
• Provide a close fallback font so the page does not jump while loading.

Translating shape: writing down the implicit rules

A brand has habits nobody wrote down: sharp or soft corners, lots of air or high density, outlined or filled icons. As long as they stay implicit, they get lost. The work is to phrase them as short rules anyone can follow without the original designer.

On this site, for example, the corner rule fits in one sentence: what you click is square, what you look at is rounded, and fully round is reserved for dots, avatars and switches. Three radius tokens are enough to apply it everywhere.

Tone and motion are part of the brand too

A brand is also recognised by how it speaks and how it moves. Error messages, buttons and empty states are often written at the last minute by whoever writes the code. A few microcopy rules, with examples, keep the product from sounding like a tax form.

Motion is handled like colour: two or three durations and two or three easing curves, named by their role (enter, move, return), and respect for the system’s “reduce motion” setting.

Shared governance between brand and product

The classic trap: the brand team evolves the guidelines on its side, the product team evolves the design system on its own, and the two drift apart silently. The answer is not another committee, but a single source of truth for the foundations.

• Reference tokens belong to the brand: a new colour or typeface goes through it.
• Roles and components belong to the product, which guarantees accessibility and consistent usage.
• A regular meeting between the two, and a changelog everyone can read.

Where to start

1. Gather everything that exists: guidelines, Figma files, screenshots of the real product. List the gaps between the guidelines and what is live.
2. Generate the colour scales and check contrast. Decide which steps are used for text.
3. Name the colour roles, the type scale, radii and spacing, then set them as tokens.
4. Build a first component end to end with these tokens, the button for instance, and show it to both teams.
5. Write the brand’s implicit rules on one page, with do and don’t examples.
6. Agree on who decides what, and publish a first numbered version.

This is the core of my work: I come from brand design and I build design systems. Taking a brand from guidelines to product without diluting it is exactly what I do with teams.