Un guide de style de marque (brand style guide ou charte graphique) est le document unique qui rassemble les règles visuelles d'une marque : comment utiliser le logo, quelles couleurs sont valides, comment appliquer la typographie et ce qu'il ne faut jamais faire. Un bon guide sort l'identité de marque de la tête d'un seul designer et la transforme en un système reproductible que chacun peut suivre. Dans cet article, je détaille comment construire un tel guide à partir de zéro : quelles sections il lui faut et le niveau de détail que mérite chacune.
À quoi sert un guide de style ?
Une marque est rarement appliquée par une seule personne ; avec le temps, beaucoup de mains la manipulent. Une publication sociale, une facture, un site web, une enseigne ou une publicité proviennent de sources différentes. Sans règles écrites, chacun choisit une couleur de logo légèrement différente, un espacement légèrement différent et la police qui lui plaît — et la marque se délite peu à peu. Un guide de style empêche cette dérive :
- Cohérence : la marque a le même aspect à chaque point de contact, ce qui crée reconnaissance et confiance.
- Rapidité : quand tu crées un nouveau design ou contenu, les décisions sont déjà prises ; tu ne les rediscutes pas de zéro.
- Transmission : un nouveau membre d'équipe, une agence ou un imprimeur peut ouvrir le document et rester fidèle à la marque.
Tu peux publier le guide en PDF, en page partagée (Figma, Notion) ou en simple page web. Le format compte moins qu'un contenu clair et appuyé par des exemples.
Règles d'utilisation du logo
La section logo est souvent le cœur du guide, car c'est là que se produisent la plupart des erreurs. Commence par montrer toutes les versions valides du logo : verrouillages horizontal et vertical, le symbole seul, les variantes sur fond clair et sur fond foncé, et une version monochrome (noir/blanc) si nécessaire. Indique en une ligne où chacune doit être utilisée.
Deux règles figurent dans presque tous les guides et doivent être montrées visuellement :
- Zone de protection (clear space) : l'espace vide minimum à laisser autour du logo. Elle se définit généralement par rapport à un élément du logo (par exemple la hauteur du symbole ou la hauteur d'x d'une lettre), pour que la règle reste valable quand le logo est agrandi ou réduit.
- Taille minimale : la plus petite taille à laquelle le logo reste lisible (par exemple 24px de hauteur à l'écran, 15mm de largeur en impression). En dessous, le logo se dégrade.
Ajoute aussi une liste des « à ne pas faire » (misuse) illustrée par des exemples visuels : étirer le logo, déformer ses proportions, en changer la couleur sans autorisation, ajouter ombres ou effets, le poser sur une photo chargée sans contraste, ou le faire pivoter. Les exemples « ne pas faire » sont souvent plus efficaces que de longues explications.
Palette de couleurs et codes couleur
La section couleur définit les couleurs de la marque avec des valeurs exactes pour l'écran et pour l'impression. Si tu veux que le même bleu soit identique sur le web et sur une brochure, tu dois spécifier chaque couleur dans différents espaces colorimétriques :
- HEX et RGB — numérique (web, applications, écrans).
- CMJN (CMYK) — impression (brochures, cartes de visite, signalétique).
- Si nécessaire, Pantone (PMS) — référence pour les tons directs et les travaux monochromes.
Organise la palette par rôle : une ou deux couleurs principales, une couleur d'accent et quelques neutres (pour le texte et le fond). Côté web, définir ces couleurs en variables est un moyen pratique de garder le document et le code dans une seule source :
:root {
--brand-primary: #1f6feb; /* principale */
--brand-accent: #ffb020; /* accent */
--brand-ink: #11151c; /* texte */
--brand-paper: #f7f8fa; /* surface */
}Fais aussi de l'accessibilité une règle : le ratio de contraste entre le texte et le fond est essentiel à la lisibilité. Les WCAG recommandent un contraste d'au moins 4,5:1 pour un texte de taille normale. Indique clairement dans le guide quelles combinaisons de couleurs peuvent servir au texte et lesquelles sont purement décoratives.
Règles de typographie
La section typographie définit les polices de la marque et la façon de les utiliser. Liste d'abord les polices : une pour les titres, une pour le corps de texte (deux suffisent en général). S'il faut des polices différentes pour le web et l'impression, note les équivalents. Donne ensuite une échelle typographique pour que chaque page partage la même hiérarchie :
- Familles de polices : avec leurs noms, leurs graisses (light/regular/bold) et les détails de licence.
- Hiérarchie : valeurs de taille et de graisse pour titres, sous-titres, corps et petit texte.
- Interligne et espacement : des détails qui font la lisibilité mais que l'on oublie souvent.
Sur le web, lier la typographie au code est une bonne habitude :
:root {
--font-head: "Sora", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--step-h1: 2rem; /* 32px */
--step-h2: 1.5rem; /* 24px */
--step-body: 1rem; /* 16px */
--leading-body: 1.6;
}Surveille la licence des polices : des sources comme Google Fonts sont gratuites pour le web et la plupart des usages commerciaux, mais si tu as acheté une police, note sa portée d'usage dans le guide pour que l'équipe ne sorte pas accidentellement du cadre de la licence.
Éléments complémentaires et ton de voix
Logo, couleur et typographie forment le cœur, mais quelques sections supplémentaires complètent le guide. Selon la marque, tu peux ajouter :
- Iconographie : le style d'icônes (linéaire ou plein, rayon des angles, épaisseur de trait), pour que des icônes de sources différentes forment un ensemble cohérent.
- Style photo / illustration : des exemples du ton et de l'ambiance des visuels à utiliser.
- Espacement et grille : l'unité de base utilisée pour la mise en page (par exemple un système basé sur 8px).
- Ton de voix : la façon dont la marque s'exprime — avec des exemples « on dit ceci / on ne dit pas cela ».
Ces sections transforment la marque en un tout qui non seulement « a l'air juste » mais « sonne juste ». Les nourrir toutes de la même personnalité (les trois à cinq adjectifs de la marque) est la clé de la cohérence.
Garder le guide vivant
Un guide de style n'est pas un document figé le jour de sa rédaction. À mesure que la marque grandit, de nouvelles situations apparaissent : une nouvelle plateforme sociale, un nouveau produit, une nouvelle langue. Indique un numéro de version et une date sur le guide, consigne les changements et garde le fichier à un endroit unique facilement accessible à l'équipe. Le principe de source unique de vérité s'applique ici aussi : tout le monde regarde le même document à jour.
Le but du guide n'est pas d'imposer les règles comme un policier sévère ; c'est de lever l'incertitude qui freine la construction d'une marque cohérente, forte et reconnaissable. Des règles claires, paradoxalement, facilitent la créativité, car les décisions fondamentales sont prises et tu peux consacrer ton énergie au vrai travail.
Questions fréquentes
Un guide de style de marque, c'est la même chose qu'une identité de marque ?
Non. L'identité de marque est l'ensemble formé d'éléments comme le logo, la couleur, la typographie et le ton de voix ; le guide de style est le fichier de règles qui documente comment ces éléments sont utilisés. L'identité répond au « quoi », le guide au « comment ».
Une petite marque a-t-elle vraiment besoin d'un guide complet ?
Non, la portée s'adapte à la marque. Pour une petite marque, même un document de quelques pages couvrant les variantes du logo, la zone de protection, les codes couleur et une échelle typographique fait une grande différence. Ce qui compte n'est pas le nombre de pages mais la clarté des règles.
Dans quel format réaliser le guide ?
Cela dépend de la marque et de l'équipe. Un PDF se partage facilement ; une page vivante comme Figma ou Notion facilite les mises à jour ; une page web devient une référence directe pour l'équipe web. Dans la plupart des cas, une combinaison PDF plus fichier vivant partagé fonctionne bien.
Besoin d'un guide de style pour ta marque, à partir de zéro ? Je peux consigner l'usage du logo, les codes couleur et les règles de typographie dans un document cohérent et utilisable, pour que ton équipe respecte la marque sans effort. Pour parler de ton projet, contacte-moi.