Case study · Design System

Covéa

2026

Building a design system from scratch to unify a multi-brand product and speed up delivery

A system serving three brands — GMF, MAAF and MMA — from a single source of truth.

Overview

At a glance

Client

Covéa (GMF · MAAF · MMA)

Tools

· Figma · Jira

Team

· 1 product designer (me) · 2 developers

Year

2026

Role

Lead UX/UI Designer

KPI

· Productivity · Adoption

The problem

From a multi-brand product built by many hands, with nothing shared underneath

No shared foundation

10+ designers worked on the product over the years, each succeeding the last. Every newcomer reinvented the wheel: new colors, CTAs with different radius, components rebuilt from scratch.

An archaic approach to multi-brand variations

POs specified brand colors in Confluence pages — impossible to preview before development. A single brand variant could take ~3 hours, a constant source of errors.

Designer

Figma

No shared tokens

Button

Code

3 buttons shipped

Same tool — but nothing shared inside. Three designers, three buttons, all shipped to code.

The solution

To one structured, visual source of truth — for designers and developers

One source of truth design system for designers and developers.

Figma Variables Mode set up, so we can show to all brands the results live in juste 2 clicks.

Designers

Design in Figma

One source of truth

Design system

Developers

Build in code

Same tokens for both. Change once — design and code stay in sync.

What I carried out

The activities I led, end to end

Audit the existing

Inventoried every color, text style and component in the live product, and grouped them by function to make the inconsistency measurable.

Audit the existing

Inventoried every color, text style and component in the live product, and grouped them by function to make the inconsistency measurable.

Workshop with developers

Ran a working session with the two developers to align on token naming, structure, and how the system would plug into the codebase.

Workshop with developers

Ran a working session with the two developers to align on token naming, structure, and how the system would plug into the codebase.

Prioritization

Built a prioritization list — which components and tokens to rationalize first, based on reuse and impact across the three brands.

Prioritization

Built a prioritization list — which components and tokens to rationalize first, based on reuse and impact across the three brands.

Redesign token-driven

Rebuilt each component in a single tokenized version — one source of truth in place of many near-identical variants.

Redesign token-driven

Rebuilt each component in a single tokenized version — one source of truth in place of many near-identical variants.

Handoff the design system

Documented and handed off the system in Figma, with Variable Modes ready to switch GMF, MAAF and MMA in two clicks.

Handoff the design system

Documented and handed off the system in Figma, with Variable Modes ready to switch GMF, MAAF and MMA in two clicks.

Reviewed the implementation with the devs to make sure tokens and components rendered consistently across every brand mode.

The results

Measurable impact on both sides of the handoff

100%

of devs say it makes their work significantly easier

+30%

estimated productivity, dev side

+25%

estimated productivity, design side

2× clicks

per brand theme — vs. ~3h before

100%

of devs say it makes their work significantly easier

+30%

estimated productivity, dev side

+25%

estimated productivity, design side

2× clicks

per brand theme — vs. ~3h before

Discovery & audit

Making the inconsistency visible

Before building anything, I made the problem measurable. I inventoried every color, text style and component used across the product — turning a vague ‘it feels inconsistent’ into something the team could see and quantify.

near-identical brand color values

near-identical color values for text/default

text sizes for H2

versions of the primary button

Je calcule mes économies

J’enregistre

Texte CTA

Devis assurance Auto

Texte CTA

versions of the “voir plus” button

Voir tout

and many other components — duplicated

Input fields ×4

Cards ×3

Dropdowns ×5

Tabs ×2

Badges ×3

and more…

Definition

Color system

Color structured by function, not by value

The audit surfaced several near-identical hex values for the same role. I collapsed each function down to a single source token.

The work — token by token

For each role, the same work: the several different hex found in the product, mapped into one semantic token that consumes a single primitive.

The element & its raw hex

Semantic token → primitive

Black text

BEFORE

Painted with 3 different hex

#0B0E17

#12161C

#141A24

→

AFTER

1 token for this function

text/neutral/default

consumes → Gray/20

Brand surface

BEFORE

Painted with 5 different hex

#008296

#007A8C

#007B9C

#037E91

#016E7E

→

AFTER

1 token for this function

surface/brand/default

consumes → Brand/100

Repeat this for every color role

↓

The result — the token set

SURFACE

surface/neutral/default

Gray/200

surface/neutral/alt

Gray/180

surface/brand/weak

Brand/30

surface/brand/default

Brand/100

Etc

TEXT

text/neutral/default

Gray/20

text/neutral/subtle

Gray/40

text/brand/default

Brand/100

Etc

BORDER

border/neutral/weak

Gray/30

border/neutral/default

Gray/50

border/brand/default

Brand/100

Etc

Text styles

A scalable type scale, mapped onto every existing layer

I defined the scale, then annotated every text layer in Figma — current size → target style — so the migration was unambiguous.

display/xl

Get covered in minutes

heading/h2

Compare the offers

heading/h3

Your coverage, explained

body/m

Body copy — clear, legible, AA-contrast on every surface.

label/s

LABEL · CTA · FILTER

Components

From many versions of one component, to a single source

Grouped by type, many components existed in several versions for no reason. I rebuilt each in one harmonized, tokenized version.

BEFORE

Same CTA, 4 versions

Get a quote

Get a quote

Get a quote

→

AFTER

One tokenized component

The results

The solution

One structured, visual source of truth — for designers and developers

One source of truth design system for designers and developers.

Figma Variables Mode set up, so we can show to all brands the results live in juste 2 clicks.

Designers

Design in Figma

One source of truth

Design system

Developers

Build in code

Same tokens for both. Change once — design and code stay in sync.

Brand variants · Figma Modes

Three brands in 2 clicks, not 3 hours

The same component, re-themed live. Pick a brand — every color, typeface, button and accent updates from one token set.

Aperçu automatique— ou choisis une marque

Live demo — one component, every brand mode

Switch the brand theme

Devis assurance

Votre avantage auto

Comparez les offres et choisissez la formule adaptée. Même composant, mêmes tokens — thémé par marque.

surface/brand/default#008296
action/primary/default#006f78
surface/brand/weak#e6f3f5
text/neutral/default#0B0E17
text/neutral/subtle#3A4254
Typography · swapped by mode
Aafont/titleRaleway
Aafont/bodyOpen Sans

The results

Measurable impact on both sides of the handoff

100%

of devs say it makes their work significantly easier

+30%

estimated productivity, dev side

+25%

estimated productivity, design side

2× clicks

per brand theme — vs. ~3h before

100%

of devs say it makes their work significantly easier

+30%

estimated productivity, dev side

+25%

estimated productivity, design side

2× clicks

per brand theme — vs. ~3h before

Next case study

Redesigning an insurance website to convert

Keep exploring

Back to all work

Axel Meimoun