brand-guidelines.md: Den enda filen varje AI-verktyg behöver för att känna till ditt varumärke

Du har betalat bra pengar för varumärkesriktlinjer. De ligger i en 47-sidig PDF någonstans i Google Drive – den som din designbyrå levererade för 18 månader sedan. Dina utvecklare har aldrig öppnat den. Dina AI-verktyg kan inte öppna den. Och varje gång någon sätter ihop en landningssida i Cursor, utformar ett marknadsföringsmejl med Claude, eller ställningsbygger en komponent i v0, börjar de från noll: "Vad är vår primärfärg igen? Är det Inter eller Plus Jakarta Sans? Använder vi rundade eller skarpa hörn?"

Den loopen – förklara varumärket, hoppas det fastnar, fixa det som inte gör det – kostar timmar varje vecka. I ett team kostar det tusentals per månad enbart i omarbetning.

Googles Stitch design-md-format eliminerar den loopen. Och Branding5 genererar din kompletta brand-guidelines.md automatiskt – ladda ner den med ett klick, släpp den i din repo, och varje AI-verktyg ditt team använder känner omedelbart till ditt varumärke.

Vad är design-md? (Och varför kallar folk det DESIGN.md?)

Design-md är en vanlig textbaserad, Markdown-baserad specifikation för varumärkes- och designriktlinjer. Istället för en PDF som bara människor (teoretiskt) kan läsa, är det en strukturerad .md-fil som både människor och AI-system kan tolka, förstå och bygga ifrån.

Google skapade formatet som en del av Stitch – deras AI-drivna UI-genereringsplattform – med en enkel premiss: om du ger en AI en välstrukturerad beskrivning av ditt varumärkessystem kan den generera UI, skriva text och fatta designbeslut som redan är varumärkesanpassade. Inget mer upprepande varje session.

Två namn, en idé

Filer skrivna i detta format går under två namn:

• DESIGN.md — förkortningen i utvecklargemenskaperna. Den ligger bredvid README.md och CONTRIBUTING.md i projektets rot, och Cursor, Windsurf och andra AI-kodningsverktyg letar automatiskt efter den.
• brand-guidelines.md — namnet Branding5 använder, eftersom filen innehåller mycket mer än visuella specifikationer. Den fångar din positionering, arketyper, ICPs, röst och strategi – hela varumärkessystemet, inte bara färger och typsnitt.

Båda namnen fungerar. Formatet och kraften är desamma.

Vad som finns i en brand-guidelines.md

En komplett fil täcker varje lager av ditt varumärke, från strategi ner till pixelnivåspecifikationer. Så här ser en Branding5-genererad brand-guidelines.md ut i praktiken:

# 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

Det är anatomin. Nu är det dags för hur en verklig utdata ser ut – genererad av Branding5 för Oscar Stories, en AI-driven plattform för barnens godnattsagor med en Jester-arketyp.

YAML front matter — det maskinläsbara lagret

---
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'
---

Vad resten av filen innehåller

Under YAML-frontmatten fortsätter den fullständiga filen – över 14 000 ord – med allt en AI behöver för att fatta varumärkesanpassade beslut:

• Varumärkesberättelse: positioneringsuttalande, mission, vision, USP och berättelsen "varför vi gör det"
• Arketypsdjupdykning: Jesters nyckelegenskaper, kärnstrategier, potentiella fallgropar och exempelvarumärken (Ben & Jerry's, M&M's, Old Spice)
• Visuell identitet: komplett färgsystem med hex, CMYK, HSL och hover-tillstånd; typografihierarki med vikter och användningsregler
• Ideal kundprofil (ICP): komplett persona – "Den Medvetna Moderna Föräldern" – med demografi, psykografi, smärtpunkter, mål och föredragna kanaler
• SWOT-analys: styrkor, svagheter, möjligheter, hot och en övergripande strategisk bedömning
• Marknadsföringstext: 8 rubriker skrivna i Jester-rösten, 5 CTAs med brådska-taktik och komplett PAS-text för landningssidor
• Innehållsstrategi: Hero/Hub/Hygiene-innehållsplan med specifika titlar, kanaler och mål
• Marknadsföringskampanjer: kampanjer för medvetenhet, intresse och önskan mappade till AIDA-ramverket

En utvecklare som aldrig har träffat Oscar Stories-teamet kan lägga in den här filen i Cursor, be om en landningssida och få text som låter som varumärket – lekfull, fantasifull, aldrig predikande – med rätt lila palett och Nunito Sans-rubriker. Ingen brief. Inget fram och tillbaka.

Det är vad maskinläsbara varumärkesriktlinjer innebär i praktiken. Inte en PDF. En enda fil som varje AI-verktyg ditt team använder kan läsa, förstå och bygga ifrån.

Varför detta är viktigt just nu

Tre krafter har konvergerat för att göra maskinläsbara varumärkesriktlinjer brådskande, inte valfria:

1. AI-verktyg skriver nu det mesta av koden och texten

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable – utvecklare och marknadsförare levererar snabbare än någonsin med AI-assistans. Men dessa verktyg har ingen kunskap om ditt varumärke om du inte berättar för dem. Varje session, varje prompt, förklarar du om din färgpalett. Det är ingen arbetsflöde – det är en skatt på snabbhet.

En enda brand-guidelines.md i din repo eliminerar den skatten permanent.

2. Google driver design-md som en standard

När Google lanserar en formatspecifikation via en produkt som Stitch, uppmärksammar ekosystemet det. Figma-plugins, VS Code-tillägg och AI-komponentgeneratorer börjar redan leta efter en DESIGN.md i projektets rot. Att få din fil rätt idag innebär att morgondagens verktyg bara kommer att fungera – utan migrering, utan omarbetning.

3. Varumärkeskonsistens i AI-hastighet kräver maskinläsbara regler

Om ditt team genererar 50 blogginlägg per månad, 20 annonsvariationer per vecka och en ny landningssida varje sprint, är en PDF i Google Drive värdelös. Varumärkesreglerna måste leva där genereringen sker – i repot, i promptkontexten, i verktygets minne.

PDF vs. brand-guidelines.md: en jämförelse sida vid sida

PDF:en är inte död för presentationer till intressenter. Men för daglig exekvering – där AI-verktyg utför genereringen – vinner vanlig text överlägset.

Hur man använder brand-guidelines.md med Google Stitch

Google Stitch läser din brand-guidelines.md och använder den för att begränsa sin UI-generering. Istället för att producera generiska Material-komponenter, producerar den UI som matchar ditt färgsystem, typografi, avstånd och komponentkonventioner.

Arbetsflödet är tre steg:

1. Ladda upp eller placera filen. Släpp brand-guidelines.md i projektets rot, eller ladda upp den direkt i Stitch-gränssnittet.
2. Prompta naturligt. Fråga efter vad du behöver: "Generera en prissektion med tre nivåer och en markerad populär plan."
3. Få varumärkesanpassad utdata. Stitch tillämpar dina färger, typhierarki, knappstilar och avstånd automatiskt. Ingen designgranskning behövs för grunderna.

Resultatet är inte bara närmare ditt varumärke – det är snabbare att lansera eftersom du hoppar över korrigeringsrundan som normalt tar en hel eftermiddag.

Använder den med Cursor, Copilot och AI-kodningsverktyg

Släpp DESIGN.md (eller brand-guidelines.md) i din repo-rot och referera till den i dina 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 (arbetsytaläge):

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

Claude / ChatGPT (klistra in eller bifoga filen):

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: Ladda upp brand-guidelines.md som en projektfil, eller klistra in relevanta avsnitt i din prompt. Dessa verktyg kommer att tillämpa dina färger, typsnitt och komponentspecifikationer vid varje generering.

Vinsten: utvecklare som aldrig har läst varumärkesriktlinjerna producerar varumärkesanpassad kod från sin första prompt. Begränsningen är inbäddad i arbetsflödet – inte verkställd genom granskningscykler och Slack-meddelanden.

Bortom det visuella: varför strategi i filen förändrar allt

De flesta designsystemfiler stannar vid färger och typsnitt. En brand-guidelines.md från Branding5 går djupare – och det djupet är vad som förvandlar AI-utdata från "ser rätt ut" till "känns rätt".

Varumärkesgrunden berättar för AI varför varumärket gör de val det gör. När en AI vet att du är en Vis arketyptyp som riktar sig till icke-tekniska marknadsförare, väljer den inte bara rätt knappfärg – den skriver text som är tydlig och självsäker istället för hype-driven och andfådd.

Ideala kundprofiler (ICPs) ger AI:n målgruppskontexten för att generera relevant budskap. En rubrik för en VP of Marketing läses väldigt annorlunda än en som riktar sig till en Growth Marketing Manager. Utan ICPs i filen gissar AI:n. Med dem, riktar den in sig.

Röst- och tonriktlinjer med konkreta exempel (bra och dåliga) är det enskilt mest betydelsefulla avsnittet för textkvalitet. Ett välskrivet "gör / gör inte"-exempel lär en AI mer än hundra ord av abstrakt röstbeskrivning.

Gör och Gör inte fungerar som hårda begränsningar. "Använd aldrig mer än 3 färger i en komponent" och "inkludera alltid en CTA i varje sektion" är regler som AI:n kan följa bokstavligen, varje gång. Ingen tvetydighet, ingen avvikelse.

Hur Branding5 genererar din

Efter att ha slutfört din varumärkesanalys i Branding5, är din brand-guidelines.md redo för nedladdning från instrumentpanelen. Så här går det till bakom kulisserna:

1. Din varumärkesstrategi matar filen. Positionering, arketyp, ICPs, konkurrentanalys, tonläge – allt du har byggt i Branding5 flödar direkt in i den strukturerade Markdown-utdata.
2. Visuella specifikationer härleds från din positionering. Färger, typografi och komponentkonventioner genereras för att matcha din varumärkespersonlighet – inte hämtade från en generisk mall.
3. Utdata följer design-md-specifikationen. Stitch och kompatibla verktyg tolkar den naturligt. Ingen konvertering, ingen omformatering.
4. Den är redo att användas omedelbart. Släpp den i din repo, bifoga den till ditt AI-verktyg eller dela den med ditt team. En fil, varje verktyg, från dag ett.

De 30 minuter du spenderar i Branding5 producerar:

• En strategi-PDF för dina intressenter och investerare
• Budskapsramverk för ditt marknadsföringsteam
• En brand-guidelines.md för varje AI-verktyg som ditt ingenjörs- och designteam någonsin kommer att använda

Ingen copywriter. Ingen manuell formatering. Ingen Markdown-expertis behövs.

Kom igång: en fem-minuters checklista

Har du redan en varumärkesstrategi? Så här går du från noll till ett AI-klart varumärkessystem på fem minuter:

1. Generera din fil. Kör din varumärkesanalys i Branding5 och ladda ner brand-guidelines.md från din instrumentpanel.
2. Släpp den i din repo-rot. Ge den namnet DESIGN.md om ditt team föredrar utvecklarkonventionen, eller behåll brand-guidelines.md för tydlighetens skull.
3. Berätta för ditt team. Dela ett meddelande på en rad: "Våra varumärkesriktlinjer finns nu i DESIGN.md i projektets rot. Referera till den i varje AI-prompt."
4. Referera till den i varje AI-session. Använd @DESIGN.md i Cursor, bifoga den i Claude eller ChatGPT, ladda upp den i v0 eller Bolt.
5. Håll den uppdaterad. När ditt varumärke utvecklas, uppdatera filen och committa. Git spårar ändringen. Varje verktyg plockar upp den omedelbart.

Det är allt. Ingen onboarding-deck. Ingen flaskhals i designgranskningen. Inget mer "vilken är vår varumärkesfärg?" i Slack.

Slutsatsen

AI-verktyg skriver din kod, genererar din text och ställningsbygger dina komponenter. Den enda frågan är om de gör det varumärkesanpassat – eller om de hittar på det efter hand.

En brand-guidelines.md besvarar den frågan en gång för alla. Sedan besvarar den den igen, automatiskt, vid varje generering, i varje verktyg, för varje person i ditt team.

Googles Stitch-format gör maskinläsbara varumärkesriktlinjer till en standard. DESIGN.md håller på att bli den fil som utvecklare förväntar sig att hitta i projektets rot. De varumärken som antar det nu kommer att leverera snabbare, vara mer konsekventa och slösa mindre tid på att korrigera AI-utdata som missade målet.

Din varumärkesstrategi finns redan i Branding5. Din brand-guidelines.md är ett klick bort.

Vanliga frågor

Vad är skillnaden mellan DESIGN.md och brand-guidelines.md?

De är samma format. DESIGN.md är förkortningen som är populär i utvecklargemenskaperna – den speglar README.md namngivningskonventioner. brand-guidelines.md är mer beskrivande och signalerar att filen innehåller varumärkesstrategi (positionering, röst, ICPs), inte bara visuella specifikationer. Använd vilket namn ditt team föredrar; AI-verktyg tolkar båda identiskt.

Behöver jag kunna Markdown för att skapa eller redigera filen?

Nej. Branding5 genererar filen automatiskt från din varumärkesanalys. Om du vill göra manuella ändringar senare är Markdown bara vanlig text med enkel formatering (# för rubriker, - för listor, ** för fetstil). Vem som helst kan lära sig grunderna på två minuter.

Vilka AI-verktyg stöder design-md / DESIGN.md?

Google Stitch läser den nativt. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt och Lovable fungerar alla med den när du refererar till eller bifogar filen. Eftersom det är vanlig Markdown kan alla LLM-drivna verktyg tolka och följa den – ingen plugin eller integration krävs.

Hur detaljerad bör min brand-guidelines.md vara?

Tillräckligt detaljerad för att eliminera tvetydighet. Som minimum, inkludera din färgpalett med användningsregler, typografispecifikationer, knapp-/kort-/formulärkonventioner och röstriktlinjer med exempel. Ju mer specifika dina gör- och gör-inte-punkter är, desto mer konsekvent blir AI-utdata. Branding5 genererar en omfattande fil som standard – du kan alltid trimma avsnitt du inte behöver.

Hur håller jag filen synkroniserad när mitt varumärke utvecklas?

Behandla den som vilken annan källfil som helst: redigera, committa, pusha. Eftersom den finns i Git ser ditt team exakt vad som ändrades och när. Om du kör om din varumärkesanalys i Branding5 kan du ladda ner en uppdaterad version och ersätta den gamla filen. Inget byråarvode, ingen månadslång revisionscykel.

Kan jag använda brand-guidelines.md för icke-koduppgifter som att skriva blogginlägg eller annonstext?

Absolut. Bifoga filen (eller klistra in avsnitten för varumärkesröst och ICP) när du promptar Claude, ChatGPT eller någon annan skrivassistent. Röstriktlinjerna, tonexemplen och målgruppsdetaljerna är specifikt utformade för att förbättra AI-genererad text – inte bara kod.

Skaffa din brand-guidelines.md

Kör din varumärkesanalys i Branding5 och ladda ner en design-md-kompatibel brand-guidelines.md (DESIGN.md) – redo för Google Stitch, Cursor, Copilot och hela din AI-verktygsstack.

Generera din brand-guidelines.md →