De l’identité de marque au design system

Pourquoi la marque se perd entre la charte et le produit

La charte est souvent un PDF pensé pour la communication : un logo, une palette, deux typographies, quelques mises en page. Elle décrit des exemples réussis. Le produit, lui, a besoin de règles : quelle couleur pour un lien, pour une erreur, pour un fond survolé, en clair et en sombre, avec un contraste suffisant.

Faute de traduction, chaque équipe interprète. Le bleu de marque devient trois bleus, la typographie de titre se retrouve dans des boutons, et au bout d’un an le produit ne ressemble plus vraiment à la marque. Personne n’a fait d’erreur : il manquait simplement le niveau entre l’intention et l’interface.

Ce que la charte dit, ce que le produit demande

• La charte donne une palette ; le produit demande des rôles : fond, texte, bordure, action, succès, erreur, et leurs états.
• La charte donne des polices ; le produit demande une échelle : tailles, interlignages et graisses pour chaque niveau de lecture, du titre à la légende.
• La charte donne une ambiance ; le produit demande des valeurs : rayons, espacements, ombres, durées d’animation.
• La charte montre l’écran idéal ; le produit doit gérer le vide, l’erreur, le chargement, le texte trop long et l’écran de 320 pixels.

Traduire la couleur : de la palette aux rôles

Première étape : générer une gamme pour chaque couleur de marque, du très clair au très foncé. La couleur officielle y trouve sa place, mais elle n’est qu’un échelon parmi d’autres. C’est ce qui permet d’avoir un fond teinté discret, un survol plus foncé et un texte lisible, sans sortir de la marque.

Deuxième étape : nommer des rôles plutôt que des couleurs. Le composant ne demande pas « bleu 600 », il demande « couleur d’action ». C’est le principe des tokens en trois niveaux : référence, rôle, composant. Le jour où la marque évolue, ou qu’un thème sombre arrive, on change la correspondance des rôles, pas les composants.

--ref-blue-600: #272DCB;            /* la couleur de la charte */
--sys-color-action: var(--ref-blue-600);
--button-primary-bg: var(--sys-color-action);

Troisième étape : vérifier les contrastes. Beaucoup de couleurs de marque, choisies pour une affiche ou un logo, ne passent pas le seuil WCAG de 4,5:1 pour du texte. Ce n’est pas un drame : on garde la couleur pour les grandes surfaces et les éléments graphiques, et on choisit un échelon plus foncé pour le texte et les liens.

Traduire la typographie : de deux polices à une échelle

Une identité forte repose souvent sur une police de titre très expressive. Elle fait merveille en grand, beaucoup moins à 14 pixels dans un tableau. La règle la plus utile : un rôle par police. Une police d’affichage pour les titres, une police de texte pour tout ce qui se lit ou se clique.

• Définir une échelle courte, cinq à sept tailles, avec leur interlignage. Au-delà, personne ne s’en sert correctement.
• Limiter les graisses réellement chargées : chaque graisse est un fichier de plus à télécharger.
• Vérifier la licence web et applicative des polices avant d’écrire la première ligne de code.
• Prévoir une police de secours proche, pour que la page ne saute pas au chargement.

Traduire la forme : écrire les règles implicites

Une marque a des habitudes que personne n’a écrites : des angles plutôt vifs ou plutôt doux, beaucoup d’air ou une grande densité, des pictogrammes au trait ou pleins. Tant qu’elles restent implicites, elles se perdent. Le travail consiste à les formuler en règles courtes, compréhensibles sans le designer d’origine.

Sur ce site, par exemple, la règle des angles tient en une phrase : ce qu’on clique est carré, ce qu’on regarde est arrondi, et le rond est réservé aux pastilles, avatars et interrupteurs. Trois tokens de rayon suffisent à l’appliquer partout.

Le ton et le mouvement font aussi partie de la marque

Une marque se reconnaît aussi à la façon dont elle parle et dont elle bouge. Les messages d’erreur, les boutons et les états vides sont souvent écrits à la dernière minute, par la personne qui code. Quelques règles de microcopie, avec des exemples, évitent un produit qui parle comme un formulaire administratif.

Le mouvement se traite comme la couleur : deux ou trois durées et deux ou trois courbes, nommées par leur rôle (apparition, déplacement, retour), et le respect du réglage « réduire les animations » du système.

Une gouvernance commune à la marque et au produit

Le piège classique : l’équipe marque fait évoluer la charte de son côté, l’équipe produit fait évoluer le design system du sien, et les deux divergent en silence. La solution n’est pas un comité de plus, mais une source de vérité unique pour les fondations.

• Les tokens de référence appartiennent à la marque : une nouvelle couleur ou une nouvelle police passe par elle.
• Les rôles et les composants appartiennent au produit, qui garantit l’accessibilité et la cohérence d’usage.
• Un rendez-vous régulier entre les deux, et un journal des versions que tout le monde peut lire.

Par où commencer

1. Rassembler tout ce qui existe : charte, fichiers Figma, captures du produit réel. Lister les écarts entre la charte et ce qui est en ligne.
2. Générer les gammes de couleurs et vérifier les contrastes. Décider quels échelons servent au texte.
3. Nommer les rôles de couleur, l’échelle typographique, les rayons et les espacements, puis les poser en tokens.
4. Construire un premier composant de bout en bout avec ces tokens, le bouton par exemple, et le montrer aux deux équipes.
5. Écrire les règles implicites de la marque en une page, avec des exemples à faire et à ne pas faire.
6. Fixer qui décide de quoi, et publier une première version numérotée.

C’est le cœur de mon métier : je viens du brand design et je construis des design systems. Faire passer une marque de la charte au produit sans la diluer, c’est exactement le travail que je mène avec les équipes.