brand-guidelines.md : Le seul fichier dont chaque outil IA a besoin pour connaître votre marque

Vous avez payé cher pour des directives de marque. Elles dorment dans un PDF de 47 pages quelque part dans Google Drive — celui que votre agence de design a livré il y a 18 mois. Vos développeurs ne l'ont jamais ouvert. Vos outils IA ne peuvent pas l'ouvrir. Et chaque fois que quelqu'un crée une landing page dans Cursor, rédige un e-mail marketing avec Claude ou structure un composant dans v0, il repart de zéro : « C'est quoi notre couleur principale déjà ? C'est Inter ou Plus Jakarta Sans ? On utilise des coins arrondis ou nets ? »

Cette boucle — expliquer la marque, espérer que ça reste, corriger ce qui ne va pas — coûte des heures chaque semaine. À l'échelle d'une équipe, rien qu'en retravail, cela représente des milliers par mois.

Le format Stitch design-md de Google élimine cette boucle. Et Branding5 génère votre brand-guidelines.md complète automatiquement — téléchargez-la en un clic, déposez-la dans votre dépôt, et chaque outil IA que votre équipe utilise connaît instantanément votre marque.

Qu'est-ce que le design-md ? (Et pourquoi l'appelle-t-on DESIGN.md ?)

Le design-md est une spécification au format Markdown, en texte brut, pour les directives de marque et de design. Au lieu d'un PDF que seuls les humains peuvent (théoriquement) lire, c'est un fichier .md structuré que les personnes et les systèmes IA peuvent analyser, comprendre et utiliser comme base.

Google a créé le format dans le cadre de Stitch — sa plateforme de génération d'UI propulsée par l'IA — avec une prémisse simple : si vous donnez à une IA une description bien structurée de votre système de marque, elle peut générer des UI, rédiger des textes et prendre des décisions de design déjà en accord avec votre marque. Plus besoin de se répéter à chaque session.

Deux noms, une idée

Les fichiers écrits dans ce format portent deux noms :

• DESIGN.md — le raccourci dans les communautés de développeurs. Il se place aux côtés de README.md et CONTRIBUTING.md à la racine du projet, et Cursor, Windsurf et autres outils de codage IA le recherchent automatiquement.
• brand-guidelines.md — le nom utilisé par Branding5, car le fichier contient bien plus que des spécifications visuelles. Il capture votre positionnement, vos archétypes, vos ICPs, votre voix et votre stratégie — le système de marque complet, pas seulement les couleurs et les polices.

Les deux noms fonctionnent. Le format et la puissance sont identiques.

Qu'est-ce qu'on met dans un brand-guidelines.md ?

Un fichier complet couvre chaque couche de votre marque, de la stratégie jusqu'aux spécifications au pixel près. Voici à quoi ressemble un brand-guidelines.md généré par Branding5 en pratique :

# Acme Analytics

## Fondation de marque

- **Positionnement :** La seule plateforme d'analytics conçue pour les équipes
  marketing non techniques qui ont besoin d'insights enterprise sans courbe
  d'apprentissage.
- **Archétype :** Le Sage — sage, fiable, orienté données
- **Mission :** Rendre la culture des données accessible à chaque marketeur.
- **Valeurs :** Clarté avant complexité. Précision avant vitesse.
  Autonomisation avant dépendance.

## Profils clients idéaux

### ICP 1 : Growth Marketing Manager

- 28–38 ans, SaaS mid-market (50–500 employés)
- Frustré par les outils BI complexes ; besoin de dashboards qu'il peut
  construire seul
- Expressions clés : « actionable insights », « self-serve », « time-to-value »
- Objection principale : « Est-ce que ça va remplacer notre stack BI actuel ? »

### ICP 2 : VP Marketing

- 35–50 ans, reporte au CMO ou CEO
- Intéressé par l'attribution cross-canal et les rapports pour le board
- Achète sur preuve de ROI et étendue des intégrations

## Identité visuelle

### Couleurs

| Rôle          | Hex       | Utilisation                              |
| ------------- | --------- | ---------------------------------------- |
| Primaire      | `#2563eb` | CTAs, états actifs, éléments UI clés     |
| Secondaire    | `#f8fafc` | Arrière-plans, cards, conteneurs         |
| Accent        | `#16a34a` | États de succès, métriques positives     |
| Neutre 900    | `#0f172a` | Corps de texte, titres                   |
| Neutre 400    | `#94a3b8` | Texte placeholder, états désactivés      |
| Erreur        | `#dc2626` | États d'erreur, actions destructives     |
| Avertissement | `#f59e0b` | États d'avertissement, alertes attention |

### Typographie

| Rôle    | Famille           | Graisse | Taille | Interligne | Espacement |
| ------- | ----------------- | ------- | ------ | ---------- | ---------- |
| H1      | Plus Jakarta Sans | 800     | 48px   | 1.1        | -0.02em    |
| H2      | Plus Jakarta Sans | 700     | 36px   | 1.2        | -0.01em    |
| H3      | Plus Jakarta Sans | 700     | 24px   | 1.3        | 0          |
| Corps   | Inter             | 400     | 16px   | 1.6        | 0          |
| Légende | Inter             | 500     | 13px   | 1.4        | 0.01em     |
| Code    | JetBrains Mono    | 400     | 14px   | 1.5        | 0          |

### Espacement & mise en page

- Unité de base : 8px
- Padding composant : 16px (compact), 24px (défaut), 32px (spacieux)
- Espacement section : 64px (desktop), 48px (mobile)
- Largeur max du contenu : 1200px
- Border radius : 8px (cards), 12px (modals), 9999px (pills/boutons)

## Voix & ton de marque

- **Voix :** Directe, confiante, sans jargon. On explique, on ne fait pas la leçon.
- **Variations de ton :** Plus chaleureux à l'onboarding, plus assertif
  dans la copy de vente, précis et neutre dans la documentation.
- **Style de phrases :** Phrases courtes. Voix active. Commencer par le bénéfice.
- **À éviter :** Constructions passives, « leverager », « synergie »,
  phrases de remplissage, points d'exclamation dans l'UI produit.

### Exemples

- ✅ « Voyez quelles campagnes génèrent du chiffre — en un clic. »
- ❌ « Notre plateforme innovante s'appuie sur une technologie de pointe
  pour donner les moyens à votre équipe marketing de bénéficier de solutions
  d'analytics best-in-class. »

## Directives de composants

### Boutons

- Primaire : rempli, `#2563eb`, texte blanc, rounded-full, hauteur min 44px
- Secondaire : outlined, bordure 1px `#2563eb`, fond transparent
- Ghost : sans bordure, texte uniquement, utilisé dans la nav et actions tertiaires
- Tous les boutons : 16px padding horizontal, font-weight 600, pas de majuscules

### Cards

- Fond : blanc, border-radius 8px, ombre subtile
- Padding : 24px
- En-tête : poids H3, margin-bottom 8px
- Toujours inclure un CTA clair ou une prochaine action

### Formulaires

- Label au-dessus de l'input, font-weight 500
- Hauteur input : 44px, border-radius 8px, bordure 1px neutral-300
- Message d'erreur sous l'input en rouge, 13px
- Champs obligatoires marqués avec \* (pas uniquement par la couleur)

## À faire et à éviter

- ✅ Toujours inclure un CTA unique et clair par section
- ✅ Utiliser de vraies données dans les exemples et captures d'écran, jamais « Lorem ipsum »
- ✅ Tester les ratios de contraste — minimum WCAG AA (4.5:1 pour le texte)
- ❌ Ne jamais utiliser plus de 3 couleurs dans un seul composant
- ❌ Pas de photos stock de personnes pointant des écrans
- ❌ Éviter le centrage du corps de texte sur plus de 2 lignes

Voilà l'anatomie. Voici maintenant à quoi ressemble une vraie sortie — générée par Branding5 pour Oscar Stories, une plateforme d'histoires pour enfants alimentée par l'IA avec un archétype Jester (Le Bouffon).

Front matter YAML — la couche lisible par machine

---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
  Pour les parents qui veulent transformer l'heure du coucher en une
  joyeuse aventure, Oscar Stories utilise une IA intelligente pour créer
  des histoires personnalisées où votre enfant est la star.
usp: >
  Crée instantanément des histoires uniques et alimentées par l'IA où
  votre enfant est le héros espiègle, rendant l'heure du coucher magique,
  plus facile pour les parents et inspirant chaque nuit l'imagination
  et les valeurs.
voice:
  tone: 'Amical, imaginatif et encourageant...'
  personality: 'Joueur, imaginatif, bienveillant, innovant et digne de confiance.'
  promise: "Transformer l'heure du coucher en un moment magique et de lien..."
values:
  - 'Joyful Connection'
  - 'Trustworthy Innovation'
  - 'Nurturing Education'
typography:
  primary_font: 'Nunito Sans'
  secondary_font: 'Lora'
colors:
  primary: '#5e219c' # Midnight Plum
  darker: '#332145'
---

Ce que contient le reste du fichier

Sous le front matter YAML, le fichier complet — plus de 14 000 mots — continue avec tout ce dont une IA a besoin pour prendre des décisions conformes à la marque :

• Narration de marque : déclaration de positionnement, mission, vision, USP et l'histoire du « pourquoi »
• Plongée dans l'archétype : les traits clés du Bouffon, stratégies fondamentales, écueils potentiels et marques de référence (Ben & Jerry's, M&M's, Old Spice)
• Identité visuelle : système de couleurs complet avec hex, CMYK, HSL et états hover ; hiérarchie typographique avec graisses et règles d'utilisation
• Profil client idéal : persona complet — « Le Parent Moderne et Conscient » — avec démographie, psychographie, points de douleur, objectifs et canaux préférés
• Analyse SWOT : forces, faiblesses, opportunités, menaces et évaluation stratégique globale
• Copy marketing : 8 titres rédigés dans la voix du Bouffon, 5 CTAs avec tactiques d'urgence et copy landing page complète en PAS
• Stratégie de contenu : plan de contenu Hero/Hub/Hygiène avec titres, canaux et objectifs spécifiques
• Campagnes marketing : campagnes de sensibilisation, d'intérêt et de désir mappées sur le framework AIDA

Un développeur qui n'a jamais rencontré l'équipe Oscar Stories peut déposer ce fichier dans Cursor, demander une landing page et obtenir une copy qui sonne comme la marque — joueur, imaginatif, jamais moralisateur — avec la bonne palette violette et les titres en Nunito Sans. Pas de brief. Pas d'allers-retours.

C'est à quoi ressemblent les directives de marque lisibles par machine en pratique. Pas un PDF. Un seul fichier que chaque outil IA de votre équipe peut lire, comprendre et utiliser comme base.

Pourquoi c'est important maintenant

Trois forces ont convergé pour rendre les directives de marque lisibles par machine urgentes, et non optionnelles :

1. Les outils IA rédigent désormais la plupart du code et de la copy

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — développeurs et marketeurs livrent plus vite que jamais avec l'assistance IA. Mais ces outils n'ont aucune connaissance de votre marque à moins que vous ne la leur communiquiez. À chaque session, à chaque prompt, vous réexpliquez votre palette de couleurs. Ce n'est pas un workflow — c'est une taxe sur la vitesse.

Un seul brand-guidelines.md dans votre dépôt élimine cette taxe définitivement.

2. Google pousse le design-md comme standard

Quand Google livre une spécification de format via un produit comme Stitch, l'écosystème fait attention. Les plugins Figma, extensions VS Code et générateurs de composants IA commencent déjà à rechercher un DESIGN.md à la racine du projet. Bien paramétrer votre fichier aujourd'hui signifie que les outils de demain fonctionneront sans migration ni retravail.

3. La cohérence de marque à la vitesse de l'IA exige des règles lisibles par machine

Si votre équipe génère 50 articles de blog par mois, 20 variations de publicités par semaine et une nouvelle landing page chaque sprint, un PDF dans Google Drive est inutile. Les règles de marque doivent vivre là où la génération se produit — dans le dépôt, dans le contexte du prompt, dans la mémoire de l'outil.

PDF vs. brand-guidelines.md : comparaison directe

Le PDF n'est pas mort pour les présentations aux parties prenantes. Mais pour l'exécution quotidienne — où les outils IA font la génération — le texte brut gagne sans appel.

Comment utiliser brand-guidelines.md avec Google Stitch

Google Stitch lit votre brand-guidelines.md et l'utilise pour contraindre sa génération d'UI. Au lieu de produire des composants Material génériques, il génère une UI correspondant à votre système de couleurs, votre typographie, votre espacement et vos conventions de composants.

Le workflow en trois étapes :

1. Téléverser ou placer le fichier. Déposez brand-guidelines.md à la racine de votre projet, ou téléversez-le directement dans l'interface Stitch.
2. Prompter naturellement. Demandez ce dont vous avez besoin : « Génère une section de tarification avec trois niveaux et un plan populaire mis en avant. »
3. Obtenir un output conforme à la marque. Stitch applique vos couleurs, hiérarchie typographique, styles de boutons et espacement automatiquement. Pas besoin de révision design pour les bases.

Le résultat est non seulement plus proche de votre marque — il est plus rapide à livrer parce que vous sautez la correction qui mange normalement tout un après-midi.

Utilisation avec Cursor, Copilot et les outils de codage IA

Déposez DESIGN.md (ou brand-guidelines.md) à la racine de votre dépôt et référencez-le dans vos prompts :

Cursor :

@DESIGN.md Génère une section hero pour la page d'accueil.
Utilise le style CTA primaire, la typographie des titres et le système
de couleurs définis dans le fichier.

GitHub Copilot (mode workspace) :

#file:DESIGN.md Construis un composant de grille de cards témoignages
en utilisant les directives de cards et le système d'espacement définis ici.

Claude / ChatGPT (coller ou joindre le fichier) :

Voici mes directives de marque [joint : brand-guidelines.md].
Rédige trois options de titres de page d'accueil correspondant
à la voix de la marque et s'adressant à l'ICP 1 (Growth Marketing Manager).

v0 / Bolt / Lovable : Téléversez brand-guidelines.md comme fichier de projet, ou collez les sections pertinentes dans votre prompt. Ces outils appliqueront vos couleurs, typographie et spécifications de composants à chaque génération.

Le bénéfice : les développeurs qui n'ont jamais lu les directives de marque produisent du code conforme à la marque dès le premier prompt. La contrainte est intégrée au workflow — pas imposée par des cycles de révision et des messages Slack.

Au-delà du visuel : pourquoi la stratégie dans le fichier change tout

La plupart des fichiers de design system s'arrêtent aux couleurs et aux polices. Un brand-guidelines.md de Branding5 va plus loin — et cette profondeur est ce qui transforme l'output IA de « ça semble juste » à « ça sonne juste ».

La fondation de marque dit à l'IA pourquoi la marque fait les choix qu'elle fait. Quand une IA sait que vous êtes un archétype Sage ciblant des marketeurs non techniques, elle ne choisit pas seulement la bonne couleur de bouton — elle rédige une copy qui est claire et confiante plutôt que portée par le buzz.

Les profils clients idéaux donnent à l'IA le contexte audience pour générer des messages pertinents. Un titre pour un VP Marketing se lit très différemment de celui pour un Growth Marketing Manager. Sans ICPs dans le fichier, l'IA devine. Avec eux, elle cible.

Les directives de voix et de ton avec des exemples concrets (bons et mauvais) sont la section au levier le plus élevé pour la qualité de la copy. Un exemple « à faire / à éviter » bien rédigé enseigne plus à une IA que cent mots de description abstraite de voix.

Les à faire et à éviter agissent comme des contraintes fermes. « Ne jamais utiliser plus de 3 couleurs dans un composant » et « toujours inclure un CTA dans chaque section » sont des règles que l'IA peut suivre littéralement, à chaque fois. Pas d'ambiguïté, pas de dérive.

Comment Branding5 génère le vôtre

Après avoir complété votre analyse de marque dans Branding5, votre brand-guidelines.md est prête au téléchargement depuis le tableau de bord. Voici ce qui se passe en coulisses :

1. Votre stratégie de marque alimente le fichier. Positionnement, archétype, ICPs, analyse concurrentielle, voix — tout ce que vous avez construit dans Branding5 s'écoule directement dans la sortie Markdown structurée.
2. Les spécifications visuelles sont dérivées de votre positionnement. Couleurs, typographie et conventions de composants sont générées pour correspondre à votre personnalité de marque — pas tirées d'un template générique.
3. La sortie suit la spécification design-md. Stitch et les outils compatibles l'analysent nativement. Pas de conversion, pas de reformatage.
4. Elle est prête à utiliser immédiatement. Déposez-la dans votre dépôt, attachez-la à votre outil IA, ou partagez-la avec votre équipe. Un fichier, chaque outil, dès le premier jour.

Les 30 minutes passées dans Branding5 produisent :

• Un PDF de stratégie pour vos parties prenantes et investisseurs
• Des frameworks de messaging pour votre équipe marketing
• Un brand-guidelines.md pour chaque outil IA que votre équipe d'ingénierie et de design utilisera jamais

Pas de copywriting. Pas de formatage manuel. Pas d'expertise Markdown nécessaire.

Démarrer : une checklist de cinq minutes

Vous avez déjà une stratégie de marque ? Voici comment passer de zéro à un système de marque prêt pour l'IA en cinq minutes :

1. Générez votre fichier. Lancez votre analyse de marque dans Branding5 et téléchargez brand-guidelines.md depuis votre tableau de bord.
2. Déposez-le à la racine du dépôt. Nommez-le DESIGN.md si votre équipe préfère la convention développeur, ou gardez brand-guidelines.md pour plus de clarté.
3. Informez votre équipe. Partagez un message en une ligne : « Nos directives de marque sont maintenant dans DESIGN.md à la racine du projet. Référencez-le dans chaque prompt IA. »
4. Référencez-le dans chaque session IA. Utilisez @DESIGN.md dans Cursor, joignez-le dans Claude ou ChatGPT, téléversez-le dans v0 ou Bolt.
5. Gardez-le à jour. Quand votre marque évolue, modifiez le fichier et committez. Git trace le changement. Chaque outil le prend en compte instantanément.

C'est tout. Pas de deck d'onboarding. Pas de goulot d'étranglement de révision design. Plus jamais de « c'est quoi notre couleur de marque ? » dans Slack.

Conclusion

Les outils IA rédigent votre code, génèrent votre copy et construisent vos composants. La seule question est de savoir s'ils le font en accord avec votre marque — ou s'ils improvisent.

Un brand-guidelines.md répond à cette question une fois. Puis il y répond automatiquement, à chaque génération, sur chaque outil, pour chaque personne de votre équipe.

Le format Stitch de Google fait des directives de marque lisibles par machine un standard. DESIGN.md devient le fichier que les développeurs s'attendent à trouver à la racine du projet. Les marques qui l'adoptent maintenant livreront plus vite, resteront plus cohérentes et perdront moins de temps à corriger un output IA qui a raté la cible.

Votre stratégie de marque est déjà dans Branding5. Votre brand-guidelines.md est à un clic.

Questions fréquentes

Quelle est la différence entre DESIGN.md et brand-guidelines.md ?

C'est le même format. DESIGN.md est le raccourci populaire dans les communautés de développeurs — il reflète les conventions de nommage README.md. brand-guidelines.md est plus descriptif et signale que le fichier contient la stratégie de marque (positionnement, voix, ICPs), pas seulement des spécifications visuelles. Utilisez le nom que votre équipe préfère ; les outils IA analysent les deux de façon identique.

Dois-je connaître Markdown pour créer ou modifier le fichier ?

Non. Branding5 génère le fichier automatiquement à partir de votre analyse de marque. Si vous souhaitez faire des modifications manuelles par la suite, Markdown n'est que du texte brut avec un formatage simple (# pour les titres, - pour les listes, ** pour le gras). N'importe qui peut apprendre les bases en deux minutes.

Quels outils IA supportent le design-md / DESIGN.md ?

Google Stitch le lit nativement. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt et Lovable fonctionnent tous avec lui quand vous référencez ou joignez le fichier. Comme c'est du Markdown brut, n'importe quel outil alimenté par LLM peut l'analyser et le suivre — pas de plugin ou d'intégration requis.

À quel point mon brand-guidelines.md doit-il être détaillé ?

Assez détaillé pour supprimer l'ambiguïté. Au minimum, incluez votre palette de couleurs avec des règles d'utilisation, vos spécifications typographiques, vos conventions de boutons/cards/formulaires et vos directives de voix avec exemples. Plus vos à faire et à éviter sont spécifiques, plus l'output IA est cohérent. Branding5 génère par défaut un fichier complet — vous pouvez toujours supprimer les sections dont vous n'avez pas besoin.

Comment garder le fichier synchronisé quand ma marque évolue ?

Traitez-le comme n'importe quel autre fichier source : modifiez, committez, poussez. Comme il vit dans Git, votre équipe voit exactement ce qui a changé et quand. Si vous relancez votre analyse de marque dans Branding5, vous pouvez télécharger une version mise à jour et remplacer l'ancien fichier. Pas de retainer d'agence, pas de cycle de révision d'un mois.

Puis-je utiliser brand-guidelines.md pour des tâches non techniques comme écrire des articles de blog ou de la copy publicitaire ?

Absolument. Joignez le fichier (ou collez les sections Brand Voice et ICP) quand vous promptez Claude, ChatGPT ou n'importe quel assistant d'écriture. Les directives de voix, les exemples de ton et les détails d'audience sont spécifiquement conçus pour améliorer la copy générée par IA — pas seulement le code.

Obtenez votre brand-guidelines.md

Lancez votre analyse de marque dans Branding5 et téléchargez un brand-guidelines.md (DESIGN.md) conforme au design-md — prêt pour Google Stitch, Cursor, Copilot et toute votre stack d'outils IA.

Générez votre brand-guidelines.md →