Créer une charte graphique

Une charte graphique est le document qui fixe les règles d'utilisation de votre identité visuelle : logo et ses déclinaisons, couleurs avec leurs codes, typographies, style des images, exemples d'application. Elle évite que chaque support (site Web, réseaux sociaux, documents imprimés) réinvente la marque. Cette page détaille son contenu, montre des exemples publics et propose une méthode pour créer la vôtre, même pour une petite structure.

Sans règles écrites, une identité visuelle se dégrade vite : le logo est étiré sur une plaquette, le bleu change d'une présentation à l'autre, chaque prestataire choisit ses propres polices. La charte graphique sert de référence commune à toutes les personnes qui produisent des supports pour la marque : vous, vos collaborateurs, un graphiste, un développeur Web, un imprimeur.

Les grandes marques parlent de brand guidelines et y ajoutent souvent le ton de la communication, les valeurs ou l'usage de la marque par des partenaires (voir par exemple cette définition des brand guidelines par Bynder, en anglais). Pour une petite entreprise ou un indépendant, deux à quatre pages bien faites suffisent.

1. Le logo : version principale et déclinaisons (couleur, noir, blanc, version horizontale ou verticale, icône seule).

2. Les règles d'utilisation du logo : zone de protection (espace vide minimal autour), taille minimale, fonds autorisés, et exemples de ce qu'il ne faut pas faire (déformer, recolorer, ajouter une ombre).

3. Les couleurs : chaque couleur avec son rôle et ses codes, hexadécimal et RVB pour l'écran, CMJN ou Pantone pour l'impression. Voir comment choisir les couleurs de votre marque.

4. Les typographies : une police pour les titres, une pour le texte (une seule peut suffire), avec les graisses et les tailles utilisées. Voir la page typographie.

5. L'iconographie : style des icônes (trait ou plein, épaisseur, angles arrondis ou non).

6. Les images : type de photos ou d'illustrations à utiliser, cadrages, traitements à éviter.

7. Les éléments graphiques : formes, motifs, arrondis des boutons et des encadrés, ombres.

8. Des exemples d'application : carte de visite, page de site, publication pour les réseaux sociaux, signature d'email, en-tête de document.

Beaucoup d'organisations publient leur charte en ligne. Les étudier est le moyen le plus rapide de comprendre ce qu'on y met et comment on le présente :

• Slack : le dossier de presse de Slack réunit les fichiers du logo et des captures d'écran de l'interface (ordinateur, mobile et tablette, en anglais, français, allemand et japonais), avec les règles d'utilisation de la marque. Le centre de marque en ligne de Slack, qui détaillait les couleurs et la typographie, n'est plus accessible (octobre 2026).

• L'État français : le Système de Design de l'État (DSFR) est obligatoire pour les sites des services de l'État. Il fixe les couleurs, la police Marianne et plus de 50 composants d'interface, et fournit des fichiers pour Figma et Sketch ainsi que le code HTML et CSS. C'est un bon exemple de charte prolongée jusqu'au site Web.

Vous remarquerez que ces chartes se consultent comme des sites, page par page, et non comme un long PDF. Pour une petite structure, un document court suffit, mais le principe est le même : une règle, un exemple.

Logo en fichier vectoriel (SVG, AI ou PDF), codes des couleurs, noms des polices, supports déjà produits. Si vous n'avez pas de fichier vectoriel du logo, demandez-le à la personne qui l'a créé : c'est la base de tout le reste. Si le logo n'existe pas encore, commencez par lui : voir comment créer un logo.

Pour chaque élément de la liste ci-dessus, prenez une décision et notez-la. Restez simple : trois couleurs de marque plus les neutres, une ou deux polices, un style d'icônes. Chaque règle supplémentaire est une règle de plus à faire respecter.

Un outil de design comme Figma (gratuit pour un usage personnel) ou Canva suffit pour mettre en page la charte. Une structure simple :

• page 1 : le logo, ses déclinaisons et ses règles d'utilisation ;

• page 2 : les couleurs et les typographies ;

• page 3 : images, icônes et éléments graphiques ;

• page 4 : exemples d'application.

Exportez le document en PDF pour le transmettre, et gardez le fichier source pour le mettre à jour.

Envoyez la charte avec les fichiers du logo à chaque nouveau prestataire. Quand une règle change (nouvelle couleur, nouvelle police), mettez à jour la charte avant les supports, et datez chaque version.

Le site est souvent le premier support où la charte est appliquée, et celui où elle se dégrade le plus vite, parce qu'on y ajoute des pages au fil du temps. Pour l'éviter :

• déclarez les couleurs et les polices dans les réglages globaux du thème (styles globaux d'un thème de blocs WordPress, options du thème Divi), et non bloc par bloc : un changement se répercute alors sur tout le site ;

• définissez des composants réutilisables (boutons, encadrés, cartes) aux couleurs et aux arrondis de la charte ;

• vérifiez le contraste de chaque couple texte / fond de la charte avant de l'utiliser à l'écran : une couleur parfaite sur papier peut être illisible sur un site ;

• pensez au mobile : le logo doit avoir une version qui reste lisible dans un en-tête de quelques dizaines de pixels de haut.

Le guide de l'interface utilisateur (UI design) approfondit la cohérence visuelle des écrans, et le tutoriel les couleurs dans Divi montre comment déclarer une palette globale.

Dans la formation WordPress, le module 11, consacré à l'introduction au design Web, contient une leçon « Charte graphique, identité visuelle, branding » (réservée aux membres) : voir la leçon.

Si vous préférez déléguer, faites réaliser la charte par le designer qui crée votre logo, et demandez explicitement les fichiers sources et vectoriels, pas seulement un PDF.