Charte graphique : définition, exemples et modèle

Une charte graphique est le mode d'emploi de l'identité visuelle d'une marque.

Réponse directe. Une charte graphique est le document de référence qui fixe les règles d'usage de l'identité visuelle d'une marque : logo et variantes, palette avec codes hex, RVB et CMJN, typographies, style des images, mise en page, ton et exemples corrects ou incorrects. Elle se diffuse en PDF et permet à chacun de produire des supports cohérents.

Voici ce qu'elle contient rubrique par rubrique, trois exemples publics à étudier, des exemples par type d'entreprise et un modèle de charte graphique à copier.

Qu'est-ce qu'une charte graphique ?

On parle aussi de guide de style, de cahier des normes graphiques ou de brand book. Le nom varie, la fonction reste la même : permettre à quelqu'un qui n'a pas participé à la création de l'identité — un stagiaire, une agence, un imprimeur — de produire un support cohérent sans demander l'autorisation.

Il faut la distinguer de deux notions voisines :

• L'identité visuelle, ce sont les éléments eux-mêmes : le logo, les couleurs, les typographies. La charte graphique est le document qui explique comment les employer. Pour aller plus loin sur la notion, voir le guide de l'identité de marque.
• Le branding est le travail de fond sur la marque entière — positionnement, promesse, nom, ton. L'identité visuelle en est la partie visible, la charte en est le règlement.

Ce que contient une charte graphique

1. La présentation de la marque

Une page, pas plus : ce que fait la marque, pour qui, et trois mots qui décrivent sa personnalité. Elle sert de boussole quand une règle ne couvre pas un cas précis.

2. Le logo et ses variantes

C'est la section la plus consultée, et souvent la moins complète. Elle doit couvrir :

• Les versions : principale, horizontale, symbole seul, monochrome, négatif. Le choix du type de logo détermine les déclinaisons nécessaires.
• La zone de protection : l'espace libre minimum autour du logo, exprimé en fonction d'un élément du logo lui-même (souvent la hauteur d'une lettre) pour rester valable à toutes les échelles.
• Les tailles minimales, séparément pour l'écran (en pixels) et pour l'impression (en millimètres).
• Les usages interdits, avec des exemples visuels : logo étiré, recoloré, posé sur un fond trop peu contrasté, entouré d'effets.

Pour la livraison des fichiers, le guide des formats de logo détaille quel format utiliser où.

3. La palette de couleurs

Chaque couleur est donnée dans tous ses systèmes : hex pour le web, RVB pour l'écran, CMJN pour l'impression et Pantone si la marque imprime en tons directs. Deux précisions font la différence :

• La hiérarchie : quelles couleurs sont primaires, lesquelles sont secondaires, et dans quelle proportion.
• Les combinaisons autorisées : quelles associations texte/fond restent lisibles.

4. Les typographies

La police des titres, la police du texte, les graisses autorisées, et une police de substitution pour les contextes où la principale manque — e-mail, document bureautique, poste d'un client. Ajoutez l'échelle de tailles (titre, intertitre, texte courant) : c'est elle qui assure la cohérence de mise en page.

5. Le style des images

La rubrique la plus négligée, et celle qui pèse le plus sur la cohérence perçue : quel type de lumière, quel traitement colorimétrique, quel cadrage, quelle présence humaine. Six images de référence valent mieux que deux pages de description.

6. Les règles de mise en page

Grille, marges, alignements, place du logo sur chaque support. Trois ou quatre règles suffisent si elles sont réellement appliquées.

7. Le ton éditorial

Vouvoiement ou tutoiement, longueur des phrases, vocabulaire à privilégier et à proscrire. Une identité visuelle soignée servie par un ton incohérent produit la même impression de flottement qu'une identité désordonnée.

8. Les exemples corrects et incorrects

C'est la page qui fait la différence entre une charte consultée et une charte rangée. Personne ne lit une charte de bout en bout : on l'ouvre avec une question précise, et une page d'exemples y répond plus vite que quinze pages de principes.

Exemples de chartes graphiques publiques

La meilleure façon d'apprendre est de lire des chartes réelles. Ce qu'il faut y regarder n'est pas l'esthétique mais la façon dont les règles sont formulées : chiffrées, vérifiables, illustrées.

Spotify : des règles mesurables

Les consignes de design de Spotify, destinées aux développeurs qui intègrent la marque, sont un modèle de précision. Le logo complet ne descend jamais sous 70 px à l'écran ni sous 20 mm à l'impression ; l'icône seule, sous 21 px ou 6 mm. La zone de protection est égale à la moitié de la hauteur de l'icône. Le logo vert ne s'utilise que sur fond noir ou blanc ; sur tout autre fond, il passe en monochrome. Chaque règle peut être vérifiée en quelques secondes.

Mailchimp : le nom et les couleurs ont des règles

La page des ressources de marque de Mailchimp commence par le nom avant le logo : « Mailchimp » s'écrit en un mot, avec un M majuscule et un c minuscule. Les couleurs portent des noms — Cavendish Yellow comme couleur principale, Peppercorn pour les accents — ce qui donne à toute l'équipe un vocabulaire commun. Le nom s'accompagne toujours de l'icône Freddie, et la page liste les usages interdits par des tiers, comme modifier le logo ou le combiner à d'autres visuels.

La marque de l'État : une charte pour des milliers d'utilisateurs

Les services de l'État partagent un système de design commun, maintenu par le Service d'information du Gouvernement. Il s'appuie sur les polices Marianne et Spectral, et son usage est réservé aux sites en .gouv.fr. C'est un cas d'école : une charte écrite pour être appliquée sans interprétation par des équipes aux compétences très inégales. Les déclinaisons publiées par les ministères et préfectures, souvent en PDF, montrent comment une charte mère s'adapte à des sous-marques.

Exemples par type d'entreprise

Une charte graphique n'a pas la même allure selon l'activité. Trois exemples de ce qu'elle met en avant :

Une boulangerie de quartier. Une couleur dominante (un rose poudré, par exemple), un logotype manuscrit, et surtout les règles d'application : boîtes, sacs, ardoise, vitrine. La charte tient en six pages, dont trois de mises en situation.

Un cabinet de conseil. Une palette sobre avec un seul accent, une typographie très lisible, des gabarits de proposition commerciale et de présentation. Ici, la rubrique typographie et les gabarits documents comptent plus que tout le reste — voir comment rédiger une proposition commerciale.

Une boutique en ligne. Le style des photos produit devient central : fond, lumière, cadrage, ombre. La charte précise aussi les formats pour chaque réseau social et la place du logo sur les visuels publicitaires.

Modèle de charte graphique à copier

Pour une petite structure, cette trame suffit. Remplacez chaque ligne par vos valeurs réelles :

CHARTE GRAPHIQUE — [Nom de la marque]
Version [1.0] — [date]

1. LA MARQUE
   Ce que nous faisons : [une phrase]
   Pour qui : [une phrase]
   Personnalité : [trois mots]

2. LOGO
   Versions : principale / horizontale / symbole / monochrome / négatif
   Zone de protection : hauteur de la lettre [X] tout autour
   Taille minimale : [__] px à l'écran, [__] mm à l'impression
   Interdits : étirer, recolorer, ajouter une ombre, poser sur fond chargé

3. COULEURS
   Principale : [nom] — HEX # / RVB / CMJN
   Secondaire : [nom] — HEX # / RVB / CMJN
   Accent (10 % max) : [nom] — HEX # / RVB / CMJN
   Neutre : [nom] — HEX # / RVB / CMJN

4. TYPOGRAPHIES
   Titres : [police], [graisse]
   Texte : [police], [graisse], [taille] / interligne [__]
   Substitution : [police système]

5. IMAGES
   Lumière : [naturelle / studio]  Traitement : [chaud / froid]
   Cadrage : [serré / large]  Présence humaine : [oui / non]
   Références : [6 images]

6. MISE EN PAGE
   Marges : [__]  Grille : [__ colonnes]  Logo : [position]

7. TON
   [vous / tu]  — mots à privilégier : [...]  — à éviter : [...]

8. EXEMPLES
   3 supports corrects, 3 incorrects, avec la raison

Exportez-la en PDF et joignez le dossier des fichiers sources : logos en SVG et en PNG transparent, polices, gabarits.

Créer sa charte graphique en 5 étapes

1. Rassemblez l'existant. Logo, couleurs déjà utilisées, dix supports récents. Une charte décrit d'abord ce qui fonctionne déjà.
2. Fixez les valeurs exactes. Relevez les codes de couleur, nommez les polices, mesurez la zone de protection. Pour gagner du temps, un générateur de kit de marque lit l'adresse de votre site et en extrait le logo, les couleurs, les polices de titres et de texte, puis rédige des consignes sur la personnalité, le ton, l'usage des couleurs, la typographie et l'imagerie. Relisez ce premier jet, corrigez-le, puis reportez les valeurs dans le modèle ci-dessus.
3. Préparez les fichiers. Le logo en PNG transparent est indispensable pour le poser sur n'importe quel fond : l'outil de détourage l'obtient à partir d'une version sur fond blanc, et la conversion en PNG préserve la transparence à l'export.
4. Ajoutez deux gabarits. Une publication pour les réseaux sociaux et un document. Un gabarit applique la règle sans qu'on ait besoin de la connaître.
5. Testez la charte sur un nouveau support. Confiez la production d'un visuel à quelqu'un qui ne connaît pas la marque. Chaque question posée révèle une rubrique à compléter.

Faire vivre la charte au quotidien

Une charte se perd toujours au même endroit : entre le document et les visuels produits chaque semaine. C'est le style des images qui dérive le plus vite. En important quelques visuels de référence, le générateur d'image applique la même direction artistique à toute une série ; et pour rattraper des visuels existants qui s'écartent de la palette, le changement de couleur ramène une teinte dans la charte.

Une charte graphique utile est courte, chiffrée, illustrée et accompagnée de ses fichiers. Partez du modèle, appuyez-vous sur les exemples publics pour formuler vos règles, et mettez-la à jour à chaque nouveau support qui pose une question.