Style guide

Un style guide, ou guide de style, est le document qui dit comment une marque s’affiche et s’exprime : règles visuelles, règles d’écriture, exemples à suivre. Il permet à n’importe qui, en interne ou chez un prestataire, de produire un contenu qui ressemble à la marque sans demander la permission à chaque ligne.

Trois sortes de style guides

Le mot recouvre trois documents voisins, et la requête « style guide » les mélange :

• Le style guide de marque : le plus courant. Il réunit les règles graphiques et éditoriales d’une entreprise. C’est de lui qu’on parle le plus souvent.
• Le guide de style éditorial : il ne porte que sur l’écriture. Dans le monde anglophone, les référentiels les plus connus sont l’AP Stylebook (presse) et le Chicago Manual of Style (édition). En France, les rédactions s’appuient souvent sur le Lexique des règles typographiques en usage à l’Imprimerie nationale pour la typographie.
• Le guide de style d’interface : il décrit l’apparence des écrans d’un produit (boutons, champs, espacements). Quand il se complète de code et de documentation, il devient un design system.

Ce que contient un bon style guide

Le volet visuel

• Le logo : zone de protection, taille minimale, versions autorisées, et surtout les usages interdits (étirer, recolorer, poser sur un fond qui le rend illisible).
• Les couleurs : codes exacts, proportions d’usage, associations qui respectent le contraste.
• Les typographies : polices, hiérarchie des titres, tailles, interlignage, alignement.
• Les images et les icônes : style, cadrage, traitement, ce qu’on ne montre pas.

Le volet éditorial

• Le ton de voix : tutoiement ou vouvoiement, niveau d’humour, longueur des phrases.
• Le vocabulaire : les mots à employer, ceux à bannir, les termes techniques qu’on traduit ou qu’on garde.
• Les conventions : majuscules, ponctuation, format des dates et des chiffres, façon d’écrire le nom de la marque.

Ce dernier point paraît mineur et ne l’est pas. Chez Mazette.co, par exemple, une règle simple : le nom s’écrit toujours « Mazette.co », avec cette casse, jamais « Mazette » seul. Une règle de ce genre prend une ligne dans le guide et évite des centaines d’incohérences.

La règle, l’exemple juste, l’exemple faux

Les guides qui servent vraiment tiennent en un format : une règle courte, un exemple conforme, un exemple à éviter. « Le logo ne se recolore pas » est vite oublié. Le même principe accompagné de deux vignettes, la bonne et la mauvaise, se retient. Même chose pour l’écriture : à côté de « on évite le jargon », une phrase réécrite avant et après vaut cent consignes.

Comment créer un style guide

1. Partir de l’existant. Rassemblez les derniers supports produits (site, présentations, e-mails, posts) et notez ce qui varie d’un support à l’autre.
2. Fixer les bases de la marque. Positionnement, valeurs et ton de voix doivent être décidés avant les règles de détail.
3. Choisir les règles qui comptent. Mieux vaut vingt règles appliquées que deux cents ignorées : gardez celles qui évitent de vraies erreurs.
4. Illustrer chaque règle. Un bon et un mauvais exemple, tirés de vrais cas.
5. Tester sur quelqu’un qui ne connaît pas la marque. Un nouvel arrivant ou un prestataire doit pouvoir produire une page conforme à partir du seul document.
6. Publier à un endroit que tout le monde trouve. Une page web partagée vaut mieux qu’un PDF perdu dans un dossier.

À quoi ressemble une règle bien écrite

Voici deux règles telles qu’on les rédige dans un guide, avec leur exemple conforme et leur exemple à éviter :

• Règle : on vouvoie toujours le lecteur. À faire : « Vous pouvez modifier votre site sans développeur. » À éviter : « Tu peux modifier ton site tout seul. »
• Règle : un seul bouton principal par écran. À faire : un bouton plein pour l’action attendue, des liens simples pour le reste. À éviter : trois boutons de même poids qui se font concurrence.

Chaque règle tient en une phrase, et l’exemple se vérifie d’un coup d’œil.

Le style guide d’un site : une page vivante

Pour une équipe qui construit un site, le style guide a une forme particulière : une page du site (ou du fichier de maquettes) qui montre les titres, les paragraphes, les boutons et les couleurs tels qu’ils sont réellement codés. Les développeurs s’y réfèrent pour ne rien réinventer, et les designers y repèrent tout de suite un écart entre la maquette et la production. C’est le chaînon entre le style guide de marque, qui dit ce qu’il faut faire, et le design token, qui le stocke sous forme de valeurs utilisables par le code.

Le faire vivre

Un style guide n’est jamais fini. Désignez une personne qui en est responsable, datez les versions, et prévoyez une relecture à chaque évolution notable : nouveau produit, nouvelle plateforme, nouveau canal. S’il n’est consulté que le jour du lancement, il ne sert à rien. S’il est cité dans les relectures de contenu, il devient un réflexe.

Style guide et documents voisins

• La charte graphique pose le socle visuel : logo, couleurs, typographies.
• Le brand book est le document le plus large : il ajoute l’histoire, les valeurs et le positionnement.
• Le UI kit donne les composants d’interface prêts à l’emploi, côté design.

Pour poser ces règles sur une marque qui évolue vite, Brand et design graphique chez Mazette.co part de la stratégie, puis formalise l’identité et ses règles d’usage.