Exemples de chartes graphiques dont on peut s'inspirer (et ce qu'elles oublient toutes)

Un document de charte graphique n'a qu'une seule mission : permettre à quelqu'un qui n'était pas présent lors des discussions de prendre la même décision que l'équipe de marque. Chaque page doit soit servir cet objectif, soit l'illustrer. Le test est concret : confiez le document à un freelance, donnez-lui une tâche que le document ne montre pas littéralement, et regardez si le résultat respecte l'image de marque. Les documents qui réussissent partagent quatre propriétés : des valeurs exactes (hex, pas « notre bleu »), des règles avec des limites (« la zone d'exclusion minimale est égale à la hauteur du logotype »), des décisions sur la hiérarchie (quelle couleur domine, laquelle soutient, quels éléments ne doivent jamais apparaître ensemble) et des contre-exemples visibles, car un « à ne pas faire » communique plus vite qu'un paragraphe de consignes.

• NASA Graphics Standards Manual (1976). Toujours la référence pour la rédaction de règles : chaque règle est mesurable (zone d'exclusion, tailles de reproduction, traitements interdits), c'est pourquoi des prestataires ont pu l'appliquer pendant des décennies sans poser de questions. À copier : des règles formulées de manière à ce que la conformité soit vérifiable.
• Spotify Design Guidelines. Le meilleur exemple de voix : le document a le ton de la marque qu'il régit. À copier : rédigez vos guidelines avec le ton de la marque, car le document lui-même est le premier artefact que les gens copient.
• Uber Brand System. Conçu pour le passage à l'échelle sur des centaines de marchés : un petit ensemble d'éléments centraux (logo, typo, palette disciplinée, motion) avec des zones de flexibilité explicites. À copier : séparer ce qui est fixe de ce qui est local, pour que la croissance ne fragmente pas la marque.
• Atlassian Design System. Le rare document qui fait le pont entre la marque marketing et l'UI produit dans un seul système : les mêmes fondations alimentent les pages de campagne et le logiciel lui-même. À copier : une source unique de vérité pour la marque et le produit, plutôt que deux documents qui divergent avec le temps.
• Slack Media Kit. Court, public et composé principalement d'interdictions : fichiers logo exacts, zone d'exclusion précise, liste de « à ne pas faire ». À copier : pour des publics externes, un petit document applicable vaut mieux qu'un guide complet que personne ne lit.
• Starbucks Creative Expression. Un site public, pas un PDF, organisé par expression (couleur, voix, typographie) avec une flexibilité saisonnière intégrée. À copier : publier les guidelines sous forme de site vivant pour qu'elles puissent évoluer sans avoir à réémettre un document.
• Mailchimp Content Style Guide. L'exemple privilégiant l'écriture : voix, ton selon la situation, choix grammaticaux, le tout public. À copier : la voix mérite des règles aussi concrètes que celles des couleurs ; le « convivial mais pas idiot » devient réel grâce à des exemples avant/après.
• IBM Design Language. Le niveau expert : typographie, couleur, motion, illustration et photographie formant un seul système philosophique. À copier : les sections sur la grille et le motion, les deux domaines que la plupart des guidelines ignorent totalement.

Remarquez que la leçon ne porte jamais sur le style visuel lui-même. Copier la palette d'Uber produit un Uber moins bon, pas une meilleure version de vous-même. Ce qui est transférable, c'est la structure de décision : ce que chaque document a choisi de fixer, ce qu'il a laissé flexible et comment il a rendu les règles vérifiables.

1. Logo : fichiers, zone d'exclusion en unités mesurables, tailles minimales, traitements approuvés et interdits.
2. Couleur : valeurs exactes (hex/RGB/CMYK) avec rôles : laquelle est primaire, lesquelles sont des surfaces, quel texte va sur quelle couleur, et les combinaisons interdites. Prévoyez les modes clair et sombre, sinon le thème sombre sera improvisé.
3. Typographie : familles avec rôles (titres, corps de texte, mono), graisses existantes, échelle et limites de longueur de ligne.
4. Voix : ton selon la situation avec des paires avant/après, et non des adjectifs.
5. Imagerie : aspect de la photographie et de l'illustration, avec de vrais contre-exemples.
6. Paires à faire/à ne pas faire partout : le format le plus rapide à lire de tout le document.

Chaque exemple ci-dessus suppose un lecteur humain doté de goût et de temps. Mais une part croissante de la production touchant à la marque est désormais générée par des outils d'IA : constructeurs de sites, agents de code, générateurs de contenu. Un PDF est invisible pour eux, c'est pourquoi des entreprises avec de superbes guidelines publient encore des pages générées par IA avec le même look générique en dégradé violet que tout le monde. La solution consiste en une seconde projection des mêmes décisions dans un format consommable par les machines : des tokens exacts, le système typographique, l'espacement et les règles à faire/à ne pas faire sous la forme d'un DESIGN.md lu par un agent ou d'un fichier de tokens importé par un outil. Même marque, une seule source de vérité, deux rendus : un pour les humains, un pour les outils qui construisent.

Ce second rendu est précisément ce qu'est un kit Identity Forge. Chaque kit contient le cœur exécutable par machine des guidelines de marque (28 tokens de couleur sémantiques en clair et sombre, un appairage de polices avec rôles, échelle, motifs, à faire et à ne pas faire) exportable en DESIGN.md pour les agents, en prompts prêts à l'emploi pour Lovable, v0 et Bolt, en tokens Tailwind et DTCG, ou en thème shadcn. En partant d'un kit, vous obtenez la moitié technique et vérifiable d'un document de guidelines ; la moitié humaine (règles du logo, voix, imagerie) reste à rédiger par vos soins.