CF Design System

Un seul système pour habiller toutes les marques du groupe, et réduire la dette design.

@GroupeCF

RÔLE

Solo designer

TIMELINE

Sept. 2025 - Jan. 2026

ECHELLE

Web + Mobile

PLATEFORME

Web + Mobile

Contexte

Le Groupe CF réunit plusieurs expertises au service des dirigeants d'entreprise, chacune avec sa propre identité de marque. Ces expertises se rejoignent sur une plateforme commune et simplifiera la création de nouveaux outils. Pour que cette plateforme reste cohérente d'une marque à l'autre, il fallait un socle visuel partagé et cohérent. Le design system est la fondation qui permet à un seul produit de porter toutes les identités du groupe en un seul endroit.

Objectifs

Porter toutes les marques avec une seule librairie

→ Faciliter le développement en créant un prototype kit pour assurer la continuité et la cohérence.

Réduire la dette design et technique

→ Une nouvelle base de travail saine pour l'équipe produit.

Aligner design et développement

→ Une gestion des design tokens permettant la gestion d'un dark/light + brands mode.

Collaboration avec :

🔹 2 développeurs en charge de l'intégration des tokens et de Storybook

Challenge

Le design system naît d'un problème rencontré sur Hub CF : impossible de réunir les expertises du Groupe CF dans une plateforme cohérente quand chaque écran réinvente ses couleurs et ses composants.

Au démarrage, l'interface se construisait au fil de l'eau, avec des valeurs codées en dur. À mesure que les marques s'ajoutaient, la dette technique et design explosait : duplication, dérives entre Figma et la production, mode sombre impossible à déployer malgré les demandes récurrentes et une normalisation dans les interfaces d'autres outils.

J'ai pris l'initiative de remplacer cette accumulation par une architecture de tokens, documentés sur storybook.

Production

J'ai choisi un système qui repose sur une structure scalable à trois niveaux, qui sépare les valeurs brutes des intentions de design :

En tant que seul Product / Brand Designer sur ce socle, j'ai conçu l'architecture de tokens et piloté son intégration au sein de la guild UI/UX, avec 2 développeurs en charge de la mise en production.

Le pivot primary est le cœur du système : changer l'entité active suffit à transformer toute l'UI, sans toucher un composant.

Avec la guild, nous avons industrialisé ce socle dans Storybook, qui documente chaque composant et ses tokens. Designers et devs y partagent une source unique de vérité, ce qui réduit les allers-retours en QA.

Mode Brand : la couche pivot du multi-marque. Chaque marque du groupe y est définie comme un alias qui pointe vers une palette brute.
Sémantiques : des rôles d'usage qui pointent vers le mode brand ou les primitives, pour qu'un composant appelle une intention et non une couleur. Ex. interactive.background.primary, feedback.border.positive
Modes (light / dark) : redéfinissent la source des tokens sémantiques, donc changer de thème adapte les couleurs sans toucher aux composants.

Mode Brand : la couche pivot du multi-marque. Chaque marque du groupe y est définie comme un alias qui pointe vers une palette brute.
Sémantiques : des rôles d'usage qui pointent vers le mode brand ou les primitives, pour qu'un composant appelle une intention et non une couleur. Ex. interactive.background.primary, feedback.border.positive
Modes (light / dark) : redéfinissent la source des tokens sémantiques, donc changer de thème adapte les couleurs sans toucher aux composants.

Résulats

7 identités de marque portées par une seule librairie, sans duplication.

Dette design réduite : plus aucune valeur arbitraire en CSS.
Mode sombre natif, géré par les tokens.
Parité Figma ↔ code via Storybook, frictions en QA quasi disparues.
Time-to-market : ajouter une marque ne demande plus de développement, juste une nouvelle correspondance de token.