Une charte graphique en 2 heures, c'est faisable. Pas une charte de studio à 15 000 euros avec 80 pages de déclinaisons, mais une V1 exploitable : palette, typos, logo, règles d'usage. De quoi lancer un site, publier sur LinkedIn et envoyer un PDF commercial sans que chaque support ressemble à un accident.
La méthode qui suit part d'un principe simple : Claude ne dessine pas, mais il structure. Il traduit une intention floue en spécifications précises (codes HEX, couples de polices, prompts pour générateur d'images), et il compile le tout dans un document que tu réutilises ensuite comme contexte permanent. Si tu débutes avec l'outil, commence par le guide complet pour apprendre Claude, ça évite de perdre 30 minutes à comprendre l'interface avant de commencer.
L'exercice suppose que tu as déjà une idée de ton positionnement. Si ce n'est pas le cas, fais-le d'abord, une charte ne remplace pas un travail de marque.
Ce qu'une charte graphique doit contenir (et ce qu'on peut zapper au démarrage)
Une V1 tient en cinq blocs. Le reste attendra que tu aies validé le premier client, le premier site, la première campagne.
| Bloc | V1 (aujourd'hui) | V2 (plus tard) |
|---|---|---|
| Logo | Wordmark ou pictogramme simple, 2 versions (couleur + monochrome) | Animations, déclinaisons packaging, favicon custom |
| Couleurs | 6 HEX max : 2 primaires, 2 secondaires, 2 neutres | Palettes saisonnières, dégradés, modes daltoniens détaillés |
| Typographie | 1 police titre + 1 police corps, hiérarchie H1 à caption | Police custom, licences étendues, variable fonts |
| Iconographie | Style à décrire (traits, remplissage, angle), 1 banque de référence | Set d'icônes maison dessinées |
| Règles d'usage | Zone de protection logo, contrastes minimaux, do/don't | Motion, illustration, sonore, tone of voice complet |
Cinq blocs, deux heures. Chaque bloc dure 15 à 25 minutes avec Claude, le reste part dans la compilation et les vérifs.
Bloc 1 : brief de marque en 15 minutes avec Claude
Sans brief clair, Claude te sortira une charte générique de startup 2019. Il faut lui donner du matériau. Voici le prompt que j'utilise en démarrage :
Tu es directeur artistique.
Ma marque :
- Nom : [nom]
- Positionnement en une phrase : [phrase]
- Cible : [personne + contexte + douleur]
- 3 adjectifs de personnalité : [ex : calme, précis, chaleureux]
- 3 marques de référence dont j'aime l'identité visuelle : [ex : Aesop, Linear, Notion]
- 2 marques dont je NE veux PAS ressembler à l'univers : [ex : Wix, Fiverr]
Sors-moi un moodboard textuel structuré :
1. Ambiance couleur (registre chaud/froid, saturation, contraste)
2. Registre typographique (serif/sans, humaniste/géométrique, poids)
3. Univers visuel (photo, illustration, minimalisme, texture)
4. Ce qu'il faut éviter absolument
Sois concret. Cite des références visibles.Exemple de sortie sur un cas fictif (coach en nutrition, cible 35-50 ans femmes actives, adjectifs : rigoureux, apaisant, végétal, refs : Aesop et Loom) : Claude propose une palette verts profonds et beiges, sans-serif humaniste type Söhne ou Inter, photo lumière naturelle avec grain léger, à éviter les émojis vifs et les typos condensées agressives.
Ce moodboard textuel devient la spec de tous les blocs suivants. Garde-le ouvert.
Bloc 2 : palette de couleurs générée et validée
Une palette qui ne passe pas WCAG AA est inutilisable en web (contraste texte/fond insuffisant, illisible pour une partie des visiteurs, pénalisé par Lighthouse). Il faut le préciser dans le prompt :
À partir du moodboard ci-dessus, propose-moi 3 palettes complètes.
Contraintes par palette :
- 2 couleurs primaires (identité forte)
- 2 secondaires (support, illustrations, états)
- 2 neutres (fond, texte)
- 1 couleur d'accent unique (CTA, alertes)
- Codes HEX + nom descriptif pour chacune
- Vérifie que le texte principal sur fond principal passe WCAG AA (ratio 4.5:1)
- Précise pour chaque couleur son usage typique et ce qu'il faut éviter
- Mode clair ET mode sombre pour les fonds/textes
Justifie chaque palette en 2 lignes par rapport aux adjectifs du brief.Claude te sort trois options avec les HEX. Tu prends celle qui te parle, et tu vas vérifier les couples problématiques sur webaim.org/contrast-checker (l'outil de référence, gratuit). Si un couple échoue, tu redemandes à Claude d'ajuster la luminosité en gardant la teinte. Cinq minutes de ping-pong et la palette tient.
Sur l'exemple coach nutrition, sortie type : primaire #2D4A3E (vert forêt), secondaire #C9B896 (sable), neutre fond #FAF7F2, neutre texte #1A1A1A, accent #D97757 (terracotta). Ratio texte/fond : 15.2:1, AAA validé.
Bloc 3 : système typographique cohérent
Google Fonts couvre 95 % des besoins d'une V1. Pas de licence, chargement rapide, intégration Figma et Notion native. Le prompt :
Propose-moi 3 couples de polices Google Fonts pour la marque décrite.
Pour chaque couple :
- 1 police titre + 1 police corps
- Nom exact tel qu'il apparaît sur fonts.google.com
- Poids disponibles à charger (ex : 400, 500, 700)
- Justification en 2 lignes : pourquoi ce couple colle aux adjectifs
- Un exemple de rendu texte (une phrase de démo)
Puis pour le couple que tu recommandes, donne-moi la hiérarchie complète :
- H1, H2, H3, corps, caption
- Taille en rem
- Line-height
- Letter-spacing
- Poids (weight)
Format exploitable directement en CSS.Sortie type sur l'exemple : couple Fraunces (titre, serif contemporain avec caractère) + Inter (corps, sans-serif lisible). H1 à 3rem / line-height 1.1 / weight 600, corps à 1rem / line-height 1.6 / weight 400. Tu copies-colles dans ton CSS ou dans les styles de texte Figma, tu as ta hiérarchie.
Un conseil : ne charge que les poids que tu utilises réellement. Chaque poids ajouté ralentit le premier rendu de ta page. Pour appliquer la charte à un site web construit avec Claude, ça compte dans le score de performance.
Bloc 4 : logo et éléments visuels avec Claude + un générateur d'images
Claude ne génère pas d'images. Il rédige des prompts précis pour Midjourney, Ideogram ou un autre outil de génération, ou il te construit un logo typographique pur (wordmark) à partir de la police déjà choisie. Deux voies, à choisir selon ton besoin.
Voie 1 : wordmark pur. Tu prends ta police titre (Fraunces dans l'exemple), tu écris le nom de ta marque dans Figma en 72pt, tu ajustes le letter-spacing (souvent -2 à -4 pour resserrer), tu testes deux ou trois poids. En 20 minutes tu as un wordmark propre, gratuit, cohérent avec le reste. C'est ce que font Stripe, Vercel, Substack.
Voie 2 : pictogramme génératif. Demande à Claude un prompt pour ton générateur :
Rédige-moi un prompt Midjourney pour un pictogramme de logo.
Contraintes :
- Marque : [nom + secteur]
- Style : minimaliste, monochrome, adaptable en favicon 32x32
- Forme : géométrique simple (cercle, carré, ligne) qui évoque [concept]
- Palette : uniquement noir sur fond blanc pour le premier jet
- Éviter : gradient, réalisme, texte, ombre portée, effet 3D
- Format : carré, vector-friendly, style flat icon
Donne-moi 3 variantes de prompt avec des directions visuelles différentes.Tu génères, tu itères, tu retiens la version qui fonctionne. Compte 30 minutes pour cette étape si tu es à l'aise avec un générateur, plus si c'est ta première fois. Pour la production visuelle plus large, il existe des méthodes détaillées pour générer des images depuis un workflow Claude sans passer par DALL-E.
Bloc 5 : document de charte livrable
Tout ce qu'on a produit dort dans un fil de conversation. Il faut le compiler dans un document unique, réutilisable, versionné.
Compile toute notre conversation en un seul document markdown structuré.
Structure attendue :
# Charte graphique [Nom marque] v1
## 1. Marque
- Positionnement
- Personnalité (3 adjectifs)
- Cible
## 2. Palette
- Chaque couleur : nom, HEX, RGB, usage, exemples
- Combinaisons validées WCAG AA
## 3. Typographie
- Police titre + lien Google Fonts + poids
- Police corps + lien + poids
- Hiérarchie complète (H1 à caption) en CSS
## 4. Logo
- Version principale, version monochrome
- Zone de protection minimale
- Tailles minimales d'usage (web, print)
## 5. Règles d'usage
- 5 do
- 5 don't
- Exemples concrets (bannière LinkedIn, header site, signature email)
Sois exhaustif, ce document doit être auto-suffisant.Tu copies dans Notion, tu exportes en PDF, tu partages avec ton graphiste ou ton dev quand tu en as un. Le document existe, il est daté, il peut évoluer.
Utiliser la charte comme contexte permanent dans Claude
C'est ici que la méthode devient réellement rentable. Un Project Claude te permet de coller la charte dans les instructions personnalisées une seule fois. Ensuite, chaque prompt de design (bannière LinkedIn, mockup landing, template email, visuel Instagram) démarre avec la charte en contexte. Tu n'as plus à réexpliquer que ton vert primaire est #2D4A3E et que ta typo titre est Fraunces.
Concrètement : tu crées un Project intitulé "Design [Nom marque]", tu colles le markdown de la charte dans les custom instructions, tu ajoutes une ligne "Respecte scrupuleusement cette charte dans toute proposition visuelle". Tu peux aller plus loin en apprenant à configurer un Project Claude pour garder le contexte proprement.
Résultat : cohérence automatique. La bannière LinkedIn générée en janvier utilisera les mêmes HEX que le template email de mars. C'est cette cohérence répétée qui fait qu'une marque devient reconnaissable, pas la sophistication d'un logo isolé.
Passer à la pratique
La méthode tient en deux heures parce que Claude fait le travail de structuration. Reste ta part : décider du positionnement en amont, trancher entre les propositions, vérifier les contrastes, itérer. Si tu veux voir comment cette logique s'étend à d'autres surfaces (site, blog, campagnes email, automatisations), le pilier Claude pour le design regroupe les méthodes par cas d'usage.
Pour aller plus loin et construire un système de production complet autour de Claude (charte, site, contenu, automatisations, marketing) sur cinq semaines avec un livrable concret par module, jette un œil à Maîtriser Claude au quotidien. La charte que tu viens de produire y devient la brique de départ de tout le reste.