# Modèle de charte graphique : que mettre dans chaque section [Canonical HTML page](https://gradiently.design/fr/guide/brand-guidelines-template) Une page blanche est la façon la plus difficile de commencer une charte graphique. Voici un modèle à copier : dix sections dans l’ordre, avec ce que chacune doit contenir et la longueur qu’il lui faut. ## The short version - Un modèle de charte graphique vous donne les sections à remplir, pour que vous écriviez des règles au lieu de partir d’une page blanche. - La plupart des chartes graphiques ont besoin de dix sections : introduction, logo, couleurs, typographie, fonds et images, mise en page, voix, applications, modèles et contacts. - Chaque règle d’une charte graphique fonctionne mieux avec un exemple visible de ce qu’il faut faire et de ce qu’il ne faut pas faire. - Une petite entreprise peut faire tenir une charte graphique utile en huit à douze pages ; la longueur compte moins que la clarté. - Une charte graphique ne fonctionne que si les logos, couleurs, polices et modèles qu’elle décrit sont faciles à trouver et à utiliser. Un bon **modèle de charte graphique** compte dix sections dans cet ordre : introduction, logo, couleurs, typographie, fonds et images, mise en page, voix, applications, modèles, puis fichiers et contacts. Remplissez chacune de règles courtes accompagnées d’un exemple visuel, et gardez l’ensemble à une longueur que les gens ouvriront vraiment. Voici le modèle à copier, puis ce qui va dans chaque section. Si vous voulez la réflexion derrière une charte, ce qu’il faut laisser de côté et comment la faire vivre, lisez d’abord [comment créer une charte graphique](https://gradiently.design/fr/guide/brand-style-guide). Cette page en est le squelette pratique. ## Le modèle de charte graphique ```text CHARTE DE MARQUE : [Nom de la marque] Version [1.0], [Mois Année] 1. Introduction Qui nous sommes (une phrase) À qui nous nous adressons (une phrase) Ce que nous voulons faire ressentir (trois mots) 2. Logo Logo principal, horizontal, empilé, icône, monochrome Zone de protection et taille minimale Exemples à suivre et à éviter (au moins quatre) 3. Couleur Couleurs principales, secondaires et d’accent HEX, RVB, CMJN et Pantone pour chacune Proportions (par exemple 60 / 30 / 10) Associations de texte et de fond validées 4. Typographie Police de titre, police de corps, graisses Échelle typographique avec tailles Où télécharger les polices 5. Arrière-plans et images Nos arrière-plans et quand utiliser chacun Style photographique, avec exemples Icônes et illustrations 6. Mise en page Marges, grille, position du logo Où placer le texte dans un design 7. Ton Personnalité en trois mots Nous disons / nous ne disons pas Exemples de titres et de légendes 8. Applications Publication, story, e-mail, diapositive, carte de visite 9. Modèles Liens vers chaque modèle, par format 10. Fichiers et contacts Où se trouvent les fichiers de logo et de police Qui valide les nouvelles créations ``` Copiez cette trame dans un document et remplissez-la section par section, en traduisant les intitulés si besoin. Supprimez toute section qui ne vous concerne vraiment pas. ## Que mettre dans chaque section | Section | Doit contenir | Pages | | --- | --- | --- | | 1. Introduction | Qui vous êtes, qui vous servez, trois mots de ressenti | 1 | | 2. Logo | Chaque déclinaison, zone de protection, taille minimale, exemples de mauvais usage | 1 à 2 | | 3. Couleurs | Nuances nommées avec leurs codes, proportions, associations validées | 1 | | 4. Typographie | Polices, graisses, une échelle typographique, liens de téléchargement | 1 | | 5. Fonds et images | Fonds validés, style photo, icônes | 1 à 2 | | 6. Mise en page | Marges, position du logo, place du texte | 1 | | 7. Voix | Traits, ce qu’on dit et ce qu’on ne dit pas, phrases types | 1 | | 8. Applications | Exemples finis dans de vrais formats | 1 à 2 | | 9. Modèles | Liens vers les fichiers prêts | Une partie de page | | 10. Fichiers et contacts | Où sont les fichiers, à qui s’adresser | Une partie de page | Environ huit à douze pages pour une petite entreprise. Les grandes organisations ajoutent des sections, mais en ont rarement besoin de plus longues. ### 1. Introduction Tenez-vous à une page. Une phrase sur ce que vous faites, une sur votre public, et trois mots pour le ressenti que la marque doit donner. Ces trois mots servent de test à chaque décision qui suit, alors choisissez-les avec soin. Votre [archétype de marque](https://gradiently.design/fr/guide/brand-archetypes) peut aider. ### 2. Logo Montrez chaque [déclinaison de logo](https://gradiently.design/fr/guide/logo-variations) seule, puis sur fond clair et sur fond sombre. Exprimez la zone de protection en une mesure prise sur le logo lui-même, comme la hauteur d’une capitale, et donnez une taille minimale pour l’écran et l’impression. Terminez par des exemples de mauvais usage : étiré, recoloré, détouré d’un contour, posé sur une photo chargée. ### 3. Couleurs Nommez chaque couleur, donnez ses codes et indiquez la part de chacune. Les proportions comptent plus qu’on ne le croit : une marque surtout crème avec un peu de vert forêt n’a rien à voir avec une marque surtout verte. - Forêt (principale): #1f3d2b - Crème (fond): #f4efe6 - Laiton (accent): #c9a96e - Sauge (secondaire): #6b7c6e - Encre (texte): #1a1a1a Une page couleurs en miniature. Dans la charte, chaque nuance indique aussi le RVB, le CMJN et le Pantone le plus proche, avec une note comme « Laiton : accents uniquement, jamais pour le texte courant ». Ajoutez une courte liste d’associations validées, comme l’encre sur crème et le crème sur forêt, et vérifiez que chacune respecte les recommandations de [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) pour le texte. ### 4. Typographie Nommez les polices de titre et de texte, les graisses utilisées et une échelle simple : titre, sous-titre, texte, légende, avec leurs tailles. Indiquez où télécharger les polices ou acheter leur licence. Un [système typographique](https://gradiently.design/fr/guide/brand-typography-system) va plus loin si vous en avez besoin. ### 5. Fonds et images C’est la section que la plupart des modèles oublient, et elle couvre l’essentiel de ce que les gens voient. Montrez les fonds que vous utilisez, quand chacun convient et où les mots peuvent s’y placer. Puis montrez trois ou quatre photos qui incarnent votre style et trois qui ne le font pas. ### 6 à 10. Mise en page, voix, applications, modèles, contacts La mise en page, ce sont les marges, la position du logo et la place du texte. La voix, ce sont trois traits et un tableau des formules que vous employez et évitez ; [la voix de marque](https://gradiently.design/fr/guide/brand-voice-and-visuals) donne des exemples. Les applications sont des créations finies dans de vrais formats. Les modèles sont des liens. Les contacts, c’est un nom et une adresse e-mail. Une publication Instagram portrait indiquant Menu d’automne, dès vendredi, utilisée comme page d’exemple dans une charte graphique Une page d’applications montre les règles qui fonctionnent ensemble dans un vrai format. Une story Instagram verticale indiquant Menu d’automne, dès vendredi, avec les mêmes règles de marque dans un format plus haut Le même message en story, pour montrer comment la mise en page s’adapte à un cadre plus haut. ## Comment écrire des règles que l’on suit ### Vague - « Notre logo doit toujours être bien visible » - « Utiliser les couleurs de marque à bon escient » - « Notre ton est amical et professionnel » - « Utiliser des images de qualité » ### Utilisable - « Laisser autour du logo une zone de protection égale à la hauteur du F » - « Le crème sert de fond sur la plupart des créations ; le laiton n’apparaît que sur un élément au plus » - « Nous écrivons des phrases courtes et n’utilisons jamais de point d’exclamation » - « Lumière naturelle, vrais clients, pas de photos de banque d’images avec poignées de main » Un test utile : une nouvelle personne pourrait-elle suivre la règle sans vous poser de question ? Sinon, ajoutez une mesure, un exemple ou les deux. ## Transformer le modèle en kit opérationnel Une charte décrit la marque ; un kit est ce avec quoi l’on crée. Dans Gradiently, le kit de marque reprend les mêmes sections essentielles, nom et description, logos, palettes de couleurs, polices de titre et de texte, voix, public et activité de la marque, et il peut lire votre site web pour remplir les bases. Le Designer écrit dans la voix du kit et l’applique quand il met en page une création, si bien que la charte est suivie par défaut plutôt que de mémoire. [Configurer son kit de marque](https://gradiently.design/fr/guide/brand-kit-setup) montre comment le remplir, et [une charte graphique pour l’IA](https://gradiently.design/fr/guide/brand-guidelines-for-ai) explique comment écrire des règles qu’un assistant peut suivre. ## FAQ ### Que doit contenir une charte graphique ? Une introduction, les règles du logo, les couleurs, la typographie, les fonds et images, la mise en page, la voix, les applications, les modèles, ainsi que l’emplacement des fichiers et les personnes à contacter. ### Quelle longueur pour une charte graphique ? Pour une petite entreprise, huit à douze pages suffisent généralement. Des règles claires avec des exemples comptent bien plus que la longueur. ### Quelle est la différence entre charte graphique et guide de style ? Les termes sont le plus souvent interchangeables. Certaines équipes appellent charte graphique le document complet et guide de style les règles visuelles et rédactionnelles qu’il contient. ### Puis-je créer une charte graphique sans designer ? Oui. Utilisez un modèle, remplissez chaque section de règles courtes et d’exemples réels, et gardez les fichiers de logo, de couleurs et de polices dans un endroit accessible à tous. ### Sous quel format présenter une charte graphique ? Un PDF se partage facilement, mais un document vivant ou une page web se met plus facilement à jour. Quel que soit votre choix, indiquez un numéro de version et une date.