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 som 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 skapar en landningssida i Cursor, utformar ett marknadsföringsmejl med Claude, eller ställningsbygger en komponent i v0, börjar de från noll: "Vilken är vår primära färg igen? Är det Inter eller Plus Jakarta Sans? Använder vi rundade eller skarpa hörn?"

Den loopen – att förklara varumärket, hoppas att det fastnar, fixa det som inte gör det – kostar timmar varje vecka. I ett team kostar det tusentals per månad bara 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, lägg den i din repo, så känner alla AI-verktyg ditt team använder omedelbart till ditt varumärke.

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

Design-md är en klartextbaserad, 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 vidare på.

Google skapade formatet som en del av Stich – deras AI-drivna plattform för UI-generering – 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. Aldrig mer att upprepa dig själv varje session.

Två namn, en idé

Filer skrivna i detta format kallas vid två namn:

• DESIGN.md — förkortningen i utvecklargemenskapen. Den ligger bredvid README.md och CONTRIBUTING.md i projektets rot, och Cursor, Windsurf och andra AI-kodningsverktyg söker efter den automatiskt.
• brand-guidelines.md — namnet som Branding5 använder, eftersom filen innehåller långt mer än bara visuella specifikationer. Den fångar din positionering, arketyper, ICP:er, 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 inuti en brand-guidelines.md

En komplett fil täcker varje lager av ditt varumärke, från strategi ner till pixel-nivå 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 ren text. Inget proprietärt format. Inga specialverktyg. Ge det till vilket AI-verktyg som helst – Cursor, Claude, Stitch, v0, Bolt, Copilot – och ditt varumärke blir ett begränsningslager som automatiskt formar varje utdata.

Varför detta är viktigt just nu

Tre krafter har konvergerat för att göra maskinläsbara varumärkesriktlinjer angelägna, 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 inte ett arbetsflöde – det är en kostnad för hastigheten.

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

2. Google driver på design-md som en standard

När Google släpper en formatspecifikation genom en produkt som Stitch, uppmärksammar ekosystemet. 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 i veckan och en ny landningssida varje sprint, är en PDF i Google Drive värdelös. Varumärkesreglerna måste finnas där genereringen sker – i repot, i prompt-kontexten, i verktygets minne.

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

PDF:en är inte död för intressentpresentationer. Men för den dagliga exekveringen – där AI-verktygen sköter genereringen – vinner klartexten avgörande.

Så här använder du 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, genererar den UI som matchar ditt färgsystem, typografi, avstånd och komponentkonventioner.

Arbetsflödet består av tre steg:

1. Ladda upp eller placera filen. Lägg 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 prisavdelning 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 upp en hel eftermiddag.

Använda det med Cursor, Copilot och AI-kodningsverktyg

Lägg 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 (workspace mode):

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

Claude / ChatGPT (paste or attach the file):

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 de relevanta sektionerna 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:n varför varumärket gör de val det gör. När en AI vet att du är en Vis arketyp 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 andlös.

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

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

Vad man ska göra och inte göra 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, ICP:er, 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ämtas från en generisk mall.
3. Utdata följer design-md-specifikationen. Stitch och kompatibla verktyg tolkar den nativt. Ingen konvertering, ingen omformatering.
4. Den är redo att användas omedelbart. Lägg den i din repo, bifoga den till ditt AI-verktyg eller dela den med ditt team. En fil, varje verktyg, från första dagen.

De 30 minuter du lägger i Branding5 producerar:

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

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

Komma igång: en fem-minuters checklista

Har du redan en varumärkesstrategi? Så här går du från noll till ett AI-redo 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. Lägg 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 det direkt.

Det var allt. Inget introduktionsmaterial. Ingen flaskhals för designgranskning. Aldrig 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 hittar på allt eftersom.

En brand-guidelines.md besvarar den frågan en gång för alla. Sedan besvarar den den igen, automatiskt, vid varje generering, över 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 anammar det nu kommer att lansera snabbare, vara mer konsekventa och slösa mindre tid på att korrigera AI-genererad 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 utvecklarkretsar – den speglar README.md-namngivningskonventionerna. brand-guidelines.md är mer beskrivande och signalerar att filen innehåller varumärkesstrategi (positionering, röst, ICP:er), 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 ren 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 ren Markdown kan alla LLM-drivna verktyg tolka och följa den – ingen plugin eller integration krävs.

Hur detaljerad ska min brand-guidelines.md vara?

Tillräckligt detaljerad för att ta bort tvetydighet. Inkludera åtminstone din färgpalett med användningsregler, typografiska specifikationer, konventioner för knappar/kort/formulär och röstriktlinjer med exempel. Ju mer specifika dina 'gör' och 'gör inte' är, desto mer konsekvent blir AI-utdata. Branding5 genererar en omfattande fil som standard – du kan alltid trimma sektioner 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 lever i Git ser ditt team exakt vad som ändrades och när. Om du kör din varumärkesanalys igen 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 annonstexter?

Absolut. Bifoga filen (eller klistra in avsnitten om Varumärkesröst och ICP) när du promptar Claude, ChatGPT eller någon annan skrivassistent. Röstriktlinjerna, tone-exemplen 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-verktygspalett.

Generera din brand-guidelines.md →