Exemples de charte graphique : ce qu'on y met vraiment, section par section

Un bon exemple de charte graphique n'est pas un joli PDF : c'est un document de travail qui permet à un imprimeur, à un développeur web, à un community manager et à un studio 3D de produire la même marque sans vous rappeler. Il fixe le logo et ses interdits, les couleurs dans chaque espace colorimétrique, les typographies et leurs licences, l'image, la mise en page, le ton, puis les déclinaisons par support et la règle de validation.

La plupart des exemples que l'on trouve en ligne montrent des pages soignées et s'arrêtent là. Nous avons pris le parti inverse : parcourir le document section par section, en disant à chaque fois ce qu'elle doit contenir pour être utilisable par les quatre métiers qui vont s'en servir. Dans notre studio, nous recevons des chartes chaque semaine avec un brief de rendu produit, et la différence entre une charte « belle » et une charte « exploitable » se mesure en jours d'allers-retours.

Charte graphique, identité visuelle, brand book, design system : quatre documents, quatre usages

Ces quatre termes désignent des objets différents, et les confondre produit des documents qui ne servent à personne. L'identité visuelle est le système lui-même : le logo, la palette, les typographies, le langage graphique. La charte graphique est le document qui décrit ce système et ses règles d'application. Le brand book élargit le propos à la plateforme de marque : mission, positionnement, valeurs, ton, avant d'arriver au visuel. Le design system, enfin, est un outil de production numérique : composants d'interface, tokens de couleur et d'espacement, code, versionné comme un logiciel.

En pratique, une PME ou une start-up a besoin d'une charte graphique d'une vingtaine à une quarantaine de pages, et d'un design system seulement lorsqu'elle possède un produit numérique avec plusieurs développeurs. Un brand book se justifie quand plusieurs équipes ou agences écrivent au nom de la marque. Notre équipe d'identité visuelle le livre avec le système lui-même, parce qu'un logo sans règles d'application se dégrade dès la première déclinaison faite par quelqu'un d'autre.

Le logo : versions, zone de protection, taille minimale et interdits

La section logo doit livrer des fichiers et des règles, pas seulement une image. Un exemple de charte graphique complet contient au minimum :

• Les versions : logo principal, version horizontale ou empilée, monogramme ou symbole seul, version monochrome positive et négative. Chacune avec le cas d'usage qui la déclenche (« le symbole seul uniquement sous 24 px ou sur les avatars »).
• La zone de protection : une marge autour du logo exprimée en unité relative (la hauteur d'une lettre du logotype, par exemple), pas en millimètres, pour rester valable à toutes les échelles.
• La taille minimale : en millimètres pour le print, en pixels pour l'écran. Deux valeurs, pas une, parce qu'un logo de 12 mm sur une carte de visite et un logo de 120 px sur un site ne posent pas les mêmes problèmes de lisibilité.
• Les interdits : déformation, rotation, changement de couleur, ombre portée, contour, placement sur un fond trop chargé. Montrez-les barrés, avec l'exemple fautif à côté du correct : c'est la page la plus consultée de tout le document.
• Les formats livrés : SVG et PDF vectoriel pour tout ce qui s'imprime ou se met à l'échelle, PNG sur fond transparent pour les usages bureautiques, et une nomenclature de fichiers lisible (« marque_logo_horizontal_noir.svg »).

Le cas que l'on oublie presque toujours : le logo en volume. Une enseigne, un totem de salon, une plaque de réception ou un marquage sur un produit sont des objets, avec une épaisseur, une matière et un éclairage. Si la charte ne dit rien sur la profondeur d'extrusion, la finition (mat, brossé, laqué, rétroéclairé) et le comportement du symbole vu de biais, chaque fabricant et chaque studio 3D tranchera seul.

Les couleurs : Pantone, CMJN, RVB, HEX, ratios d'usage et contraste

Chaque couleur de la palette doit être donnée dans les références et espaces adaptés aux supports : Pantone pour l'impression en ton direct et les objets, CMJN pour l'impression en quadrichromie, RVB et HEX pour l'écran. Une charte qui ne donne que le HEX oblige l'imprimeur à convertir lui-même, et deux imprimeurs ne convertiront pas de la même façon. À l'inverse, une charte qui ne donne que le Pantone laisse le développeur deviner la valeur à l'écran.

Au-delà des valeurs, trois informations rendent la section réellement utilisable :

• La hiérarchie et les ratios d'usage : quelle couleur domine, laquelle accentue, lesquelles restent en fond. Un schéma de proportions (« 60 % de fond, 30 % de couleur principale, 10 % d'accent ») est plus efficace qu'une liste de nuanciers.
• Les paires autorisées : texte sombre sur fond clair, texte clair sur la couleur principale, mais pas la couleur d'accent sur la couleur secondaire. Pour le web, les paires texte/fond doivent atteindre le ratio de contraste WCAG AA, soit 4,5:1 pour le texte courant et 3:1 pour le texte de grande taille, titres compris. Indiquez le ratio de chaque paire dans la charte : le développeur n'aura pas à le recalculer.
• Les teintes d'usage : états de survol, désactivé, erreur, succès. Ce sont des couleurs de la marque au même titre que la principale, et si la charte ne les donne pas, chaque interface les inventera.

Pour la 3D, la couleur n'est pas une valeur mais une matière. Un vert donné en Pantone décrit une encre sur papier ; sur un flacon en verre dépoli, un couvercle en plastique injecté ou une étiquette vernie, le même vert rendra différemment selon la brillance, la rugosité et la lumière. Une charte qui veut être lue par un studio de rendu ajoute une ligne par couleur : sur quel matériau elle vit, et si elle doit être perçue comme mate ou satinée.

Les typographies : hiérarchie, graisses, licences et polices de repli

La section typographie doit répondre à quatre questions que se pose immédiatement celui qui met la marque en page : quelle police pour les titres, quelle police pour le texte, quelles graisses sont autorisées, et où obtenir les fichiers légalement. Un exemple de charte graphique sérieux montre la hiérarchie complète, du titre de niveau 1 à la légende, avec les tailles relatives, les interlignages et les espacements de lettres, sur une page de démonstration.

Deux points méritent une attention particulière pour éviter des problèmes ultérieurs. Le premier est la licence : une police achetée pour la bureautique n'autorise pas forcément l'usage sur un site web, dans une application ou dans une vidéo diffusée. La charte doit dire qui détient la licence, pour quels usages, et combien de postes ou de domaines elle couvre. Le second est la police de repli : la police système ou la police Google Fonts qui remplace la police de marque quand celle-ci ne peut pas être chargée, dans un e-mail, un document partagé ou une page qui s'affiche avant le chargement des fontes. Sans cette ligne, chaque outil utilise sa police de remplacement par défaut, qui varie selon le logiciel et le système.

Iconographie et photographie : la direction artistique écrite noir sur blanc

La section image doit décrire des règles reproductibles, pas une ambiance. « Des images chaleureuses et authentiques » ne permet à personne de produire une photo ou un rendu conforme. Ce qui le permet : la lumière (naturelle ou studio, dure ou diffuse, chaude ou neutre), les cadrages autorisés (plans larges, gros plans matière, vue à hauteur d'œil ou en plongée), la profondeur de champ, le traitement colorimétrique (contraste, saturation, dominante) et la présence ou non de personnes, avec la règle qui s'applique à leur casting et à leur mise en scène.

Pour les icônes et les illustrations, la charte fixe le style de trait (épaisseur, extrémités arrondies ou carrées), la grille de construction, la ou les couleurs autorisées, et la bibliothèque d'origine si elle est achetée. C'est aussi ici que la charte doit dire ce qu'elle attend des visuels produit : fond blanc ou fond de marque, ombre portée ou non, angle standard, et cohérence entre la photo de packshot et le rendu 3D lorsque les deux coexistent sur un même site. Nous avons détaillé ce que ces visuels doivent apporter à une fiche produit e-commerce ; la charte est le document qui rend ces choix stables d'une référence à l'autre.

Mise en page, grille et marges

La grille est la section qui rend la marque reconnaissable même sans logo. Elle définit le nombre de colonnes et les gouttières pour chaque famille de formats (A4, carte de visite, bannière, page web, story), les marges extérieures, la position réservée au logo, et les zones où le texte et l'image peuvent ou non se superposer. Un exemple de charte graphique bien construit livre les gabarits correspondants (fichiers InDesign, Figma ou Canva selon les équipes), parce qu'une grille décrite mais non fournie n'est jamais respectée.

Ton et voix : une section à intégrer à votre charte graphique

Le ton n'est pas une affaire de rédaction seulement : il conditionne la longueur des textes, donc la mise en page, donc l'image. Une charte utile fixe le registre (tutoiement ou vouvoiement, phrases courtes ou longues, humour ou non), le vocabulaire de marque (les mots que l'on emploie et ceux que l'on bannit), la manière d'écrire les chiffres, les prix et les unités, et quelques exemples de titres ou d'accroches conformes.

Déclinaisons : print, web, réseaux sociaux, motion et 3D

Une déclinaison est un jeu de règles spécifiques à un support, qui hérite du système général et le précise. Les chartes les plus utiles consacrent une double page à chacune, avec un exemple conforme, les dimensions, et les écarts autorisés par rapport à la règle générale :

• Print : papiers et grammages recommandés, finitions (vernis sélectif, dorure, gaufrage), profil colorimétrique de sortie, fond perdu, gabarits de papeterie et de brochure.
• Web et interfaces : tokens de couleur et d'espacement, tailles de police en unités relatives, composants de base (boutons, formulaires, cartes), états, règles d'accessibilité. C'est la partie qui peut, plus tard, devenir un design system. Elle est la première chose que nous ouvrons avant une création de site vitrine, parce qu'un site construit sans elle coûte une seconde passe de mise en conformité.
• Réseaux sociaux : gabarits par format (carré, portrait, story, bannière), zones de sécurité pour les interfaces des plateformes, place du logo, style des visuels et des vidéos courtes, règles pour le texte sur image.
• Motion : animation du logo (durée, courbes d'accélération, son éventuel), transitions autorisées, typographie animée, habillage des vidéos.
• 3D et CGI : matériaux de référence, lumière, ambiance colorée, angles standards, comportement du logo en volume, règle de cohérence avec la photographie. Cette déclinaison permet d’encadrer les rendus de produits et de projets immobiliers.

Ce que le studio 3D lit dans votre charte, et ce qui manque presque toujours

Quand une charte arrive avec un brief de rendu produit, nous y cherchons quatre choses : les matériaux, la lumière, l'ambiance colorée et les angles. Les matériaux, parce qu'un rendu n'a pas de couleur, il a des surfaces : la charte doit dire si le plastique de marque est mat ou brillant, si le métal est brossé ou poli, si le verre est clair ou dépoli, avec, idéalement, une référence physique ou une photo de l'objet réel. La lumière, parce que c'est elle qui fait la cohérence d'un catalogue : une lumière de studio dure avec ombre nette ne raconte pas la même marque qu'une lumière de fenêtre diffuse, et une charte qui l'a fixée évite de la renégocier à chaque série d'images. Sur un catalogue de 150 visuels de mobilier, nous avons ainsi tenu la même cohérence d'une référence à l'autre.

L'ambiance colorée est le lien entre la palette et la scène. Elle dit quelles couleurs de la charte peuvent apparaître dans le décor, les fonds et les accessoires, et lesquelles restent réservées au produit et au logo. Enfin, les angles standards (face, trois quarts, détail, vue d'usage) permettent de produire une gamme entière avec le même vocabulaire de vues, ce qui est exactement ce qu'un site e-commerce et une place de marché attendent.

Quand la charte ne le dit pas, voici ce qui se passe réellement : le studio propose une lumière et des matériaux à partir de son interprétation, le client compare avec ses photos existantes, et une, deux ou trois séries de corrections suivent pour retrouver une cohérence qui aurait pu être écrite en une page. Dans notre studio, nous demandons désormais ces quatre éléments avant la première image, et lorsqu'ils n'existent pas, nous les proposons sous forme d'une page d'annexe à la charte, que le client conserve pour les prestataires suivants. Le rendu et la modélisation sont facturés à partir de 39 € de l'heure ; la page d'annexe coûte moins que la seconde série de corrections qu'elle évite.

La même section lue par l'imprimeur, le développeur et le studio CGI

Le tableau ci-dessous résume, section par section, ce dont chacun des trois métiers a besoin pour travailler sans revenir vers vous (le community manager y lit les colonnes du développeur et du studio). Si une case est vide dans votre charte, c'est là que les allers-retours se produiront.

Quatre exemples de structure de charte graphique par type d'entreprise

Le contenu d'une charte dépend de ce que l'entreprise produit réellement. Les quatre structures ci-dessous sont des compositions types, anonymisées, issues de ce que nous voyons passer ; elles ne reproduisent aucune charte existante. Elles indiquent où mettre l'effort, et combien de pages y consacrer.

Start-up SaaS

Une trentaine de pages dont la moitié pour le numérique. Logo (avec une version compacte pour l'icône d'application), palette réduite avec les états d'interface et les ratios de contraste, typographie pensée pour l'écran avec police de repli, section illustration et icônes très développée, ton de voix précis parce que le produit parle beaucoup. Peu de print : une carte de visite et un gabarit de présentation suffisent.

Marque de mobilier

Une quarantaine de pages dont un tiers pour l'image et la 3D. Logo avec sa version gravée ou estampillée sur le produit, palette étendue aux matériaux et finitions (bois, textiles, métaux) avec des références physiques, typographie sobre, direction artistique très détaillée : lumière, angles, mises en situation, cohérence entre photo et rendu, parce que le catalogue et le site montrent souvent des références qui n'ont pas encore été fabriquées. Déclinaison print soignée pour le catalogue et le salon. Pour une collection de tables en pierre céramique, nos rendus ont ainsi ouvert la prévente quatre mois avant la production.

Promoteur immobilier

Une vingtaine de pages pour la marque corporate, plus un cahier par programme. Logo et palette stables, typographie institutionnelle, mais l'essentiel se joue dans la section image : style des perspectives, heure et lumière (fin de journée ou plein jour), présence de personnages, végétation, niveau de détail des intérieurs, indication précisant si la représentation montre l'état actuel ou l'état futur du projet. Déclinaisons : plaquette, panneau de chantier, bureau de vente, site de programme, annonces sur les portails. Pour voir ces déclinaisons réunies sous une seule marque, de la charte graphique au panneau de chantier, consultez notre concept de lancement d’un programme de villas.

Collectivité

Entre trente et cinquante pages, avec un poids inhabituel donné à la cohabitation des marques : logo de la collectivité avec les logos des partenaires et des financeurs, ordre et taille relative, règles de co-branding. Palette et typographie pensées pour l'accessibilité et pour un grand nombre d'utilisateurs internes qui ne sont pas graphistes, d'où des gabarits bureautiques complets. Signalétique et affichage urbain traités en déclinaison propre, avec les tailles de lecture à distance.

Gouvernance : qui valide, comment on versionne, où l'on télécharge

Une charte sans gouvernance meurt en six mois. La dernière section doit nommer un propriétaire (une personne ou une fonction, pas un service), décrire le circuit de validation pour les cas non prévus, et fixer la règle de versionnement : un numéro de version sur la couverture, une date, un journal des modifications en fin de document, et une adresse unique où les prestataires trouvent la version en vigueur et les fichiers.

Pour les agences et les studios qui produisent au nom de plusieurs marques, cette section est la plus précieuse du document : elle dit à qui poser la question quand un cas n'est pas couvert, et elle évite que la réponse soit improvisée par le prestataire. C'est une des raisons pour lesquelles nous demandons la charte complète, et pas un extrait, lorsque nous produisons en sous-traitance pour des agences de marketing : la page de gouvernance nous dit qui a le dernier mot.

Comment juger un exemple de charte graphique en dix minutes

Si vous devez évaluer une charte que l'on vous présente, ou celle que vous vous apprêtez à commander, cinq vérifications suffisent à savoir si elle sera utilisable :

1. Chaque couleur existe-t-elle en Pantone, CMJN, RVB et HEX, avec au moins une paire texte/fond dont le contraste est indiqué ?
2. Le logo a-t-il une taille minimale en millimètres et une autre en pixels, et une page d'interdits illustrés ?
3. La typographie précise-t-elle la licence et la police de repli ?
4. La section image décrit-elle la lumière, les cadrages et le traitement, ou seulement une ambiance ?
5. Y a-t-il un propriétaire nommé, un numéro de version et une adresse unique de téléchargement ?

Une charte qui répond aux cinq est un outil de production ; les autres sont des présentations. Si votre marque en est là, nous pouvons construire ou compléter la charte avec la déclinaison 3D dès le départ, c'est-à-dire avec les matériaux, la lumière et les angles déjà écrits pour les images qui suivront.