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

Je hebt veel geld betaald voor merkrichtlijnen. Ze staan 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 — het merk uitleggen, hopen dat het blijft hangen, repareren wat niet werkt — kost wekelijks uren. Binnen een team kost het duizenden per maand, alleen al aan herbewerking.

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

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

Design-md is een platte tekst, op 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 vanuit kunnen bouwen.

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

Twee namen, één idee

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

• DESIGN.md — de afkorting in ontwikkelaarsgemeenschappen. Het staat naast README.md en CONTRIBUTING.md in de root van het project, 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 visuele specificaties. Het omvat je positionering, archetypen, ICP's, tone of voice en strategie — het complete merksysteem, niet alleen kleuren en lettertypen.

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

Wat zit er in een brand-guidelines.md

Een compleet bestand dekt elke laag van je merk, van strategie tot specificaties op pixelniveau. Dit is hoe een door Branding5 gegenereerd brand-guidelines.md er in de praktijk uitziet:

# 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 platte tekst. Geen eigen formaat. Geen speciale tools. Geef het aan elke AI-tool — Cursor, Claude, Stitch, v0, Bolt, Copilot — en je merk wordt een beperkende laag die elke output automatisch vormgeeft.

Waarom dit nu van belang is

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

1. AI-tools schrijven nu de meeste code en tekst

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

Een enkel brand-guidelines.md in je repo elimineert die belasting permanent.

2. Google pusht design-md als standaard

Wanneer Google een formaatspecificatie levert via een product als Stitch, let het ecosysteem op. Figma-plugins, VS Code-extensies en AI-componentgeneratoren beginnen al te zoeken naar een DESIGN.md in de root van het project. Door je bestand vandaag goed te maken, zullen de tools van morgen gewoon werken — zonder migratie, zonder herbewerking.

3. Merkconsistentie op AI-snelheid vereist machinaal leesbare regels

Als je team 50 blogposts per maand, 20 advertentievariaties per week en elke sprint een nieuwe landingspagina genereert, 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 stakeholderpresentaties. 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 dit 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 de root van je project, 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. Krijg on-brand output. Stitch past automatisch je kleuren, typehiërarchie, knopstijlen en spatiëring toe. Geen ontwerpbeoordeling nodig voor de basis.

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

Gebruik het met Cursor, Copilot en AI-coderingstools

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

Cursor:

@DESIGN.md Genereer een hero-sectie voor de homepage.
Gebruik de primaire CTA-stijl, koptypografie en het kleurensysteem uit het bestand.

GitHub Copilot (werkruimtemodus):

#file:DESIGN.md Bouw een testimonal-kaartrastercomponent
met behulp van de kaartrichtlijnen en het spatiëringssysteem dat hier is gedefinieerd.

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

Hier zijn mijn merkrichtlijnen [bijgevoegd: brand-guidelines.md].
Schrijf drie homepage-kopopties die overeenkomen met de merkstem
en spreek ICP 1 (Growth Marketing Manager) aan.

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

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

Voorbij visuals: waarom strategie in het bestand alles verandert

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

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 helder en zelfverzekerd is in plaats van gehypet en ademloos.

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

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

Do's en don'ts fungeren als harde 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, elke keer kan volgen. Geen dubbelzinnigheid, geen afwijking.

Hoe Branding5 die van jou genereert

Na het voltooien van je merkanalyse in Branding5, is je brand-guidelines.md klaar om te downloaden vanuit 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, vloeit direct naar de gestructureerde Markdown-output.
2. Visuele specificaties zijn afgeleid van je positionering. Kleuren, typografie en componentconventies worden gegenereerd om te passen bij je merkpersoonlijkheid — niet overgenomen van een generieke template.
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, voeg het toe 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 besteedt, levert op:

• Een strategie-PDF voor je stakeholders 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 vanuit je dashboard.
2. Plaats het in de root van je repo. Noem het DESIGN.md als je team de voorkeur geeft aan de ontwikkelaarsconventie, of behoud brand-guidelines.md voor de duidelijkheid.
3. Informeer je team. Deel een eenregelige boodschap: "Onze merkrichtlijnen staan nu in DESIGN.md in de root van het project. Verwijs ernaar in elke AI-prompt."
4. Verwijs 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 je het bestand en commit je het. Git volgt de wijziging. Elke tool pikt het direct op.

Dat is alles. Geen onboardingdeck. Geen knelpunt in de ontwerpbeoordeling. Geen "wat is onze merknaam?" meer in Slack.

De kern

AI-tools schrijven je code, genereren je teksten en structureren je componenten. De enige vraag is of ze dit on-brand doen — of 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 root van het project. De merken die het nu omarmen, 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?

Het is hetzelfde formaat. DESIGN.md is de populaire afkorting in ontwikkelaarsgemeenschappen — het weerspiegelt README.md-naamgevingsconventies. brand-guidelines.md is descriptiever en geeft aan dat het bestand merkstrategie (positionering, stem, 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 handmatige bewerkingen wilt doen, 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 het bestand verwijst of bijvoegt. Omdat het platte Markdown is, kan elke LLM-aangedreven tool het parsen en volgen — geen plug-in of integratie vereist.

Hoe gedetailleerd moet mijn brand-guidelines.md zijn?

Gedetailleerd genoeg om dubbelzinnigheid te verwijderen. Neem minimaal je kleurenpalet met gebruiksregels, typografische specificaties, knop-/kaart-/formulierconventies en stemrichtlijnen met voorbeelden op. Hoe specifieker je do's en don'ts, hoe consistenter de AI-output. Branding5 genereert standaard een uitgebreid bestand — je kunt secties die je niet nodig hebt altijd inkorten.

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 is veranderd en wanneer. Als je je merkanalyse in Branding5 opnieuw uitvoert, 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's) wanneer je Claude, ChatGPT of een andere schrijfassistent prompt. De stemrichtlijnen, toonvoorbeelden en publieksdetails zijn specifiek ontworpen om AI-gegenereerde teksten te verbeteren — niet alleen code.

Download je brand-guidelines.md

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

Genereer je brand-guidelines.md →