brand-guidelines.md: Het Enige Bestand Dat Elke AI-tool Nodig Heeft om Je Merk te Kennen

Je hebt veel geld betaald voor merkrichtlijnen. Ze liggen ergens in een 47 pagina's tellende PDF in Google Drive – degene die je ontwerpbureau 18 maanden geleden heeft opgeleverd. Je ontwikkelaars hebben het nooit geopend. Je AI-tools kunnen het niet openen. En elke keer dat iemand een landingspagina opzet in Cursor, een marketing-e-mail opstelt met Claude, of een component scaffoldt in v0, beginnen ze van nul: "Wat is onze primaire kleur ook alweer? Is het Inter of Plus Jakarta Sans? Gebruiken we afgeronde of scherpe hoeken?"

Die cyclus – leg het merk uit, hoop dat het blijft hangen, repareer wat niet werkt – kost elke week uren. Voor een team kost het duizenden per maand, alleen al aan herstelwerk.

Google's Stitch design-md-formaat elimineert die cyclus. En Branding5 genereert automatisch je complete brand-guidelines.md – download het met één klik, plaats het in je repo, en elke AI-tool die je team aanraakt, kent direct je merk.

Wat is design-md? (En waarom noemen mensen het DESIGN.md?)

Design-md is een platte-tekst, Markdown-gebaseerde specificatie voor merk- en ontwerprichtlijnen. In plaats van een PDF die alleen mensen (theoretisch) kunnen lezen, is het een gestructureerd .md-bestand dat zowel mensen als AI-systemen kunnen parsen, begrijpen en waarop ze kunnen voortbouwen.

Google heeft het formaat gecreëerd als onderdeel van Stitch — hun AI-aangedreven UI-generatieplatform — met een simpele premisse: als je een AI een goed gestructureerde beschrijving van je merksysteem geeft, kan het UI genereren, teksten schrijven en ontwerpbeslissingen nemen die al merkconform zijn. Nooit meer jezelf herhalen tijdens elke sessie.

Twee namen, één idee

Bestanden die in dit formaat zijn geschreven, gaan onder twee namen:

• DESIGN.md — de afkorting in ontwikkelaarsgemeenschappen. Het staat naast README.md en CONTRIBUTING.md in de projectroot, en Cursor, Windsurf en andere AI-coderingstools zoeken er automatisch naar.
• brand-guidelines.md — de naam die Branding5 gebruikt, omdat het bestand veel meer bevat dan alleen visuele specificaties. Het omvat je positionering, archetypes, ICP's, tone of voice en strategie — het volledige merksysteem, niet alleen kleuren en lettertypen.

Beide namen werken. Het formaat en de kracht zijn hetzelfde.

Wat er in een brand-guidelines.md gaat

Een compleet bestand omvat elke laag van je merk, van strategie tot specificaties op pixelniveau. Zo ziet een door Branding5 gegenereerd brand-guidelines.md er in de praktijk uit:

# Acme Analytics

## Brand Foundation

- **Positioning:** The only analytics platform built for non-technical marketing teams
  who need enterprise-grade insights without the learning curve.
- **Archetype:** The Sage — wise, trustworthy, data-driven
- **Mission:** Make data literacy accessible to every marketer.
- **Values:** Clarity over complexity. Accuracy over speed. Empowerment over dependency.

## Ideal Customer Profiles

### ICP 1: Growth Marketing Manager

- 28–38, mid-market SaaS (50–500 employees)
- Frustrated by complex BI tools; needs dashboards they can build alone
- Language patterns: "actionable insights", "self-serve", "time-to-value"
- Key objection: "Will this replace our existing BI stack?"

### ICP 2: VP of Marketing

- 35–50, reports to CMO or CEO
- Cares about cross-channel attribution and board-ready reporting
- Buys on ROI proof and integration breadth

## Visual Identity

### Colors

| Role        | Hex       | Usage                                |
| ----------- | --------- | ------------------------------------ |
| Primary     | `#2563eb` | CTAs, active states, key UI elements |
| Secondary   | `#f8fafc` | Backgrounds, cards, containers       |
| Accent      | `#16a34a` | Success states, positive metrics     |
| Neutral 900 | `#0f172a` | Body text, headings                  |
| Neutral 400 | `#94a3b8` | Placeholder text, disabled states    |
| Error       | `#dc2626` | Error states, destructive actions    |
| Warning     | `#f59e0b` | Warning states, attention alerts     |

### Typography

| Role    | Family            | Weight | Size | Line Height | Tracking |
| ------- | ----------------- | ------ | ---- | ----------- | -------- |
| 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        |
| Body    | Inter             | 400    | 16px | 1.6         | 0        |
| Caption | Inter             | 500    | 13px | 1.4         | 0.01em   |
| Code    | JetBrains Mono    | 400    | 14px | 1.5         | 0        |

### Spacing & Layout

- Base unit: 8px
- Component padding: 16px (compact), 24px (default), 32px (spacious)
- Section spacing: 64px (desktop), 48px (mobile)
- Max content width: 1200px
- Border radius: 8px (cards), 12px (modals), 9999px (pills/buttons)

### Shadows & Elevation

- Card: `0 1px 3px rgba(0,0,0,0.08)`
- Dropdown: `0 4px 12px rgba(0,0,0,0.12)`
- Modal: `0 8px 32px rgba(0,0,0,0.16)`

## Brand Voice & Tone

- **Voice:** Direct, confident, jargon-free. We explain, we don't lecture.
- **Tone shifts:** Warmer in onboarding, more assertive in sales copy,
  precise and neutral in documentation.
- **Sentence style:** Short sentences. Active voice. Lead with the benefit.
- **Avoid:** Passive constructions, "leverage", "synergy", filler phrases,
  exclamation marks in product UI.

### Examples

- ✅ "See which campaigns drive revenue — in one click."
- ❌ "Our innovative platform leverages cutting-edge technology to empower
  your marketing team with best-in-class analytics solutions."

## Component Guidelines

### Buttons

- Primary: filled, `#2563eb`, white text, rounded-full, min-height 44px
- Secondary: outlined, 1px border `#2563eb`, transparent background
- Ghost: no border, text-only, used in nav and tertiary actions
- All buttons: 16px horizontal padding, font-weight 600, no uppercase

### Cards

- Background: white, border-radius 8px, subtle shadow
- Padding: 24px
- Header: H3 weight, 8px margin-bottom
- Always include a clear CTA or next action

### Forms

- Label above input, font-weight 500
- Input height: 44px, border-radius 8px, 1px border neutral-300
- Error message below input in red, 13px
- Required fields marked with \* (not colour alone)

## Do's and Don'ts

- ✅ Always include a single, clear CTA per section
- ✅ Use real data in examples and screenshots, never "Lorem ipsum"
- ✅ Test contrast ratios — minimum WCAG AA (4.5:1 for text)
- ❌ Never use more than 3 colours in a single component
- ❌ Don't use stock photos of people pointing at screens
- ❌ Avoid centre-aligning body text longer than 2 lines

Dat is de anatomie. Hier is nu hoe een echte output eruitziet — gegenereerd door Branding5 voor Oscar Stories, een AI-aangedreven platform voor kinderverhaaltjes voor het slapengaan met een Nar-archetype.

YAML front matter — de machinaal leesbare laag

---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
  For parents who want to transform bedtime into a joyful adventure,
  Oscar Stories uses smart AI to craft personalized tales where your
  child is the star.
usp: >
  Instantly crafts unique, AI-powered tales where your child is the
  playful hero, making bedtime magical, easier for parents, and
  inspiring imagination and values every night.
voice:
  tone: 'Friendly, imaginative, and encouraging...'
  personality: 'Playful, imaginative, nurturing, innovative, and trustworthy.'
  promise: 'Make bedtime a magical, bonding time...'
values:
  - 'Joyful Connection'
  - 'Trustworthy Innovation'
  - 'Nurturing Education'
typography:
  primary_font: 'Nunito Sans'
  secondary_font: 'Lora'
colors:
  primary: '#5e219c' # Midnight Plum
  darker: '#332145'
---

Wat de rest van het bestand bevat

Onder de YAML front matter gaat het volledige bestand — meer dan 14.000 woorden — verder met alles wat een AI nodig heeft om merkconforme beslissingen te nemen:

• Merkverhaal: positioneringsverklaring, missie, visie, USP, en het "waarom we het doen"-verhaal
• Archetype Diepgaande Analyse: De belangrijkste eigenschappen van de Nar, kernstrategieën, potentiële valkuilen en voorbeeldmerken (Ben & Jerry's, M&M's, Old Spice)
• Visuele Identiteit: volledig kleurensysteem met hex, CMYK, HSL en hover-statussen; typografiehiërarchie met lettergewichten en gebruiksregels
• Ideaal Klantprofiel: complete persona — "De Bewuste Moderne Ouder" — met demografie, psychografie, pijnpunten, doelen en voorkeurskanalen
• SWOT-analyse: sterke punten, zwakke punten, kansen, bedreigingen en een algehele strategische beoordeling
• Marketingteksten: 8 koppen geschreven in de Nar-stem, 5 CTA's met urgentietactieken, en volledige PAS landingspagina-tekst
• Contentstrategie: Hero/Hub/Hygiene contentplan met specifieke titels, kanalen en doelstellingen
• Marketingcampagnes: bewustzijns-, interesse- en verlangen-campagnes, toegewezen aan het AIDA-framework

Een ontwikkelaar die het Oscar Stories-team nog nooit heeft ontmoet, kan dit bestand in Cursor plaatsen, vragen om een landingspagina en tekst krijgen die klinkt als het merk – speels, fantasierijk, nooit belerend – met het juiste paarse palet en Nunito Sans-koppen. Geen briefing. Geen heen-en-weer.

Dat is hoe machinaal leesbare merkrichtlijnen er in de praktijk uitzien. Geen PDF. Eén enkel bestand dat elke AI-tool die je team gebruikt kan lezen, begrijpen en waarop het kan voortbouwen.

Waarom dit nu belangrijk is

Drie krachten zijn samengekomen om machinaal leesbare merkrichtlijnen urgent te maken, niet optioneel:

1. AI-tools schrijven nu het meeste van de code en teksten

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — ontwikkelaars en marketeers leveren sneller dan ooit met AI-ondersteuning. Maar deze tools hebben geen kennis van je merk, tenzij je het ze vertelt. Elke sessie, elke prompt, leg je je kleurenpalet opnieuw uit. Dat is geen workflow – het is een belasting op snelheid.

Eén enkel brand-guidelines.md in je repo elimineert die belasting permanent.

2. Google promoot design-md als standaard

Wanneer Google een formaatspecificatie lanceert via een product zoals Stitch, let het ecosysteem op. Figma-plugins, VS Code-extensies en AI-componentgeneratoren beginnen al te zoeken naar een DESIGN.md in de projectroot. Je bestand vandaag in orde maken betekent dat de tools van morgen gewoon werken — zonder migratie, zonder herstelwerk.

3. Merkconsistentie op AI-snelheid vereist machinaal leesbare regels

Als je team 50 blogposts per maand genereert, 20 advertentievarianten per week en elke sprint een nieuwe landingspagina, dan is een PDF in Google Drive nutteloos. De merkregels moeten leven waar de generatie plaatsvindt — in de repo, in de promptcontext, in het geheugen van de tool.

PDF vs. brand-guidelines.md: een vergelijking naast elkaar

De PDF is niet dood voor presentaties aan belanghebbenden. Maar voor de dagelijkse uitvoering — waar AI-tools de generatie doen — wint platte tekst beslissend.

Hoe brand-guidelines.md te gebruiken met Google Stitch

Google Stitch leest je brand-guidelines.md en gebruikt het om de UI-generatie te beperken. In plaats van generieke Material-componenten te produceren, genereert het UI die overeenkomt met je kleurensysteem, typografie, spatiëring en componentconventies.

De workflow bestaat uit drie stappen:

1. Upload of plaats het bestand. Plaats brand-guidelines.md in je projectroot, of upload het direct in de Stitch-interface.
2. Prompt natuurlijk. Vraag wat je nodig hebt: "Genereer een prijzensectie met drie lagen en een gemarkeerd populair plan."
3. Ontvang merkconforme output. Stitch past je kleuren, typehiërarchie, knopstijlen en spatiëring automatisch toe. Geen ontwerpbeoordeling nodig voor de basis.

Het resultaat is niet alleen dichter bij je merk — het is sneller te implementeren omdat je de correctieronde overslaat die normaal gesproken een hele middag in beslag neemt.

Gebruik het met Cursor, Copilot en AI-coderingstools

Plaats DESIGN.md (of brand-guidelines.md) in je repo root en refereer ernaar in je prompts:

Cursor:

@DESIGN.md Generate a hero section for the homepage.
Use the primary CTA style, heading typography, and colour system from the file.

GitHub Copilot (werkruimtemodus):

#file:DESIGN.md Build a testimonial card grid component
using the card guidelines and spacing system defined here.

Claude / ChatGPT (plak of voeg het bestand toe):

Here are my brand guidelines [attached: brand-guidelines.md].
Write three homepage headline options that match the brand voice
and speak to ICP 1 (Growth Marketing Manager).

v0 / Bolt / Lovable: Upload brand-guidelines.md als projectbestand, of plak de relevante secties in je prompt. Deze tools passen je kleuren, type en component specificaties toe op elke generatie.

Het voordeel: ontwikkelaars die de merkrichtlijnen nog nooit hebben gelezen, produceren merkconforme code vanaf hun eerste prompt. De beperking is ingebed in de workflow — niet afgedwongen via reviewcycli en Slack-berichten.

Voorbij visuals: waarom strategie in het bestand alles verandert

De meeste ontwerpsysteem bestanden stoppen bij kleuren en lettertypen. Een brand-guidelines.md van Branding5 gaat dieper — en die diepte is wat de AI-output transformeert van "ziet er goed uit" naar "voelt goed".

Merkfundament vertelt de AI waarom het merk de keuzes maakt die het maakt. Wanneer een AI weet dat je een Wijze-archetype bent dat zich richt op niet-technische marketeers, kiest het niet alleen de juiste knopkleur — het schrijft tekst die duidelijk en zelfverzekerd is in plaats van gehypet en ademloos.

Ideale Klantprofielen geven AI de publiekscontext om relevante berichten te genereren. Een kop voor een VP of Marketing leest heel anders dan een kop gericht op een Growth Marketing Manager. Zonder ICP's in het bestand raadt de AI. Met hen, richt het zich.

Richtlijnen voor stem en toon met concrete voorbeelden (goed en slecht) zijn de sectie met de hoogste hefboomwerking voor de kwaliteit van de tekst. Eén goed geschreven "wel / niet" voorbeeld leert een AI meer dan honderd woorden abstracte stem beschrijving.

Wel en niet doen fungeren als strikte beperkingen. "Gebruik nooit meer dan 3 kleuren in een component" en "neem altijd een CTA op in elke sectie" zijn regels die de AI letterlijk kan volgen, elke keer weer. Geen ambiguïteit, geen afwijking.

Hoe Branding5 die van jou genereert

Nadat je je merkanalyse in Branding5 hebt voltooid, is je brand-guidelines.md klaar om gedownload te worden vanaf het dashboard. Dit is wat er achter de schermen gebeurt:

1. Je merkstrategie voedt het bestand. Positionering, archetype, ICP's, concurrentieanalyse, tone of voice — alles wat je in Branding5 hebt opgebouwd, stroomt direct naar de gestructureerde Markdown-output.
2. Visuele specificaties zijn afgeleid van je positionering. Kleuren, typografie en componentconventies worden gegenereerd om bij je merkpersoonlijkheid te passen — niet gehaald uit een generieke sjabloon.
3. De output volgt de design-md specificatie. Stitch en compatibele tools parsen het native. Geen conversie, geen herformattering.
4. Het is direct klaar voor gebruik. Plaats het in je repo, koppel het aan je AI-tool, of deel het met je team. Eén bestand, elke tool, vanaf dag één.

De 30 minuten die je in Branding5 doorbrengt, produceren:

• Een strategie-PDF voor je belanghebbenden en investeerders
• Berichtenkaders voor je marketingteam
• Een brand-guidelines.md voor elke AI-tool die je engineering- en ontwerpteam ooit zal gebruiken

Geen copywriting. Geen handmatige opmaak. Geen Markdown-expertise nodig.

Aan de slag: een checklist van vijf minuten

Heb je al een merkstrategie? Zo ga je in vijf minuten van nul naar een AI-klaar merksysteem:

1. Genereer je bestand. Voer je merkanalyse uit in Branding5 en download brand-guidelines.md van je dashboard.
2. Plaats het in je repo root. Noem het DESIGN.md als je team de ontwikkelaarsconventie verkiest, of behoud brand-guidelines.md voor duidelijkheid.
3. Informeer je team. Deel een korte boodschap: "Onze merkrichtlijnen staan nu in DESIGN.md in de projectroot. Refereer ernaar in elke AI-prompt."
4. Refereer ernaar in elke AI-sessie. Gebruik @DESIGN.md in Cursor, voeg het toe in Claude of ChatGPT, upload het in v0 of Bolt.
5. Houd het up-to-date. Wanneer je merk evolueert, update het bestand en commit. Git volgt de wijziging. Elke tool pakt het direct op.

Dat is het. Geen onboarding deck. Geen knelpunt in ontwerpbeoordeling. Geen "wat is onze merk kleur?" meer in Slack.

De kern

AI-tools schrijven je code, genereren je teksten en structureren je componenten. De enige vraag is of ze het merkconform doen — of dat ze het ter plekke verzinnen.

Een brand-guidelines.md beantwoordt die vraag één keer. Daarna beantwoordt het die vraag opnieuw, automatisch, bij elke generatie, in elke tool, voor elke persoon in je team.

Google's Stitch-formaat maakt machinaal leesbare merkrichtlijnen tot een standaard. DESIGN.md wordt het bestand dat ontwikkelaars verwachten te vinden in de projectroot. De merken die het nu adopteren, zullen sneller leveren, consistenter blijven en minder tijd verspillen aan het corrigeren van AI-output die de plank missloeg.

Je merkstrategie staat al in Branding5. Je brand-guidelines.md is één klik verwijderd.

Veelgestelde vragen

Wat is het verschil tussen DESIGN.md en brand-guidelines.md?

Ze hebben hetzelfde formaat. DESIGN.md is de afkorting die populair is in ontwikkelaarsgemeenschappen — het weerspiegelt de naamgevingsconventies van README.md. brand-guidelines.md is meer beschrijvend en geeft aan dat het bestand merkstrategie (positionering, tone of voice, ICP's) bevat, niet alleen visuele specificaties. Gebruik de naam die je team verkiest; AI-tools parsen beide identiek.

Moet ik Markdown kennen om het bestand te maken of te bewerken?

Nee. Branding5 genereert het bestand automatisch vanuit je merkanalyse. Als je later handmatig wijzigingen wilt aanbrengen, is Markdown gewoon platte tekst met eenvoudige opmaak (# voor koppen, - voor lijsten, ** voor vetgedrukt). Iedereen kan de basis in twee minuten leren.

Welke AI-tools ondersteunen design-md / DESIGN.md?

Google Stitch leest het native. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt en Lovable werken er allemaal mee wanneer je naar het bestand verwijst of het bijvoegt. Omdat het platte Markdown is, kan elke LLM-aangedreven tool het parsen en volgen — geen plugin of integratie vereist.

Hoe gedetailleerd moet mijn brand-guidelines.md zijn?

Gedetailleerd genoeg om dubbelzinnigheid te verwijderen. Neem minimaal je kleurenoverzicht op met gebruiksregels, typografische specificaties, knop-/kaart-/formulierconventies en richtlijnen voor de tone of voice met voorbeelden. Hoe specifieker je wel en niet doet, hoe consistenter de AI-output. Branding5 genereert standaard een uitgebreid bestand — je kunt altijd secties verwijderen die je niet nodig hebt.

Hoe houd ik het bestand gesynchroniseerd als mijn merk evolueert?

Behandel het als elk ander bronbestand: bewerk, commit, push. Omdat het in Git leeft, ziet je team precies wat er veranderd is en wanneer. Als je je merkanalyse opnieuw uitvoert in Branding5, kun je een bijgewerkte versie downloaden en het oude bestand vervangen. Geen bureau-retainer, geen maandenlange revisiecyclus.

Kan ik brand-guidelines.md gebruiken voor niet-code taken zoals het schrijven van blogposts of advertentieteksten?

Absoluut. Voeg het bestand toe (of plak de secties Merkstem en ICP) wanneer je Claude, ChatGPT of een andere schrijfassistent een prompt geeft. De richtlijnen voor de stem, toonvoorbeelden en publieksdetails zijn specifiek ontworpen om AI-gegenereerde teksten te verbeteren — niet alleen code.

Haal jouw brand-guidelines.md

Voer je merkanalyse uit in Branding5 en download een design-md-compatibel brand-guidelines.md (DESIGN.md) — klaar voor Google Stitch, Cursor, Copilot en je volledige AI-toolstack.

Genereer jouw brand-guidelines.md →