brand-guidelines.md: O Único Arquivo que Toda Ferramenta de IA Precisa para Conhecer Sua Marca

Você pagou bem caro pelas diretrizes de marca. Elas estão em um PDF de 47 páginas em algum lugar no Google Drive — aquele que sua agência de design entregou há 18 meses. Seus desenvolvedores nunca o abriram. Suas ferramentas de IA não conseguem abri-lo. E toda vez que alguém cria uma landing page no Cursor, rascunha um e-mail de marketing com o Claude ou estrutura um componente no v0, eles começam do zero: "Qual é a nossa cor principal mesmo? É Inter ou Plus Jakarta Sans? Usamos cantos arredondados ou afiados?"

Esse ciclo — explicar a marca, esperar que funcione, corrigir o que não funciona — custa horas toda semana. Em uma equipe, custa milhares por mês apenas em retrabalho.

O formato design-md do Stitch do Google elimina esse ciclo. E o Branding5 gera seu brand-guidelines.md completo automaticamente — baixe-o com um clique, coloque-o em seu repositório, e toda ferramenta de IA que sua equipe usa instantaneamente conhecerá sua marca.

O que é design-md? (E por que as pessoas o chamam de DESIGN.md?)

Design-md é uma especificação baseada em texto simples, em Markdown, para diretrizes de marca e design. Em vez de um PDF que apenas humanos podem (teoricamente) ler, é um arquivo .md estruturado que tanto pessoas quanto sistemas de IA podem analisar, entender e usar para construir.

O Google criou o formato como parte do Stich — sua plataforma de geração de UI alimentada por IA — com uma premissa simples: se você fornecer a uma IA uma descrição bem estruturada do seu sistema de marca, ela pode gerar UI, escrever copy e tomar decisões de design que já estão alinhadas com a marca. Chega de se repetir a cada sessão.

Dois nomes, uma ideia

Os arquivos escritos neste formato são conhecidos por dois nomes:

• DESIGN.md — o atalho nas comunidades de desenvolvedores. Ele fica ao lado de README.md e CONTRIBUTING.md na raiz do projeto, e Cursor, Windsurf e outras ferramentas de codificação de IA o procuram automaticamente.
• brand-guidelines.md — o nome que o Branding5 usa, porque o arquivo contém muito mais do que especificações visuais. Ele captura seu posicionamento, arquétipos, ICPs, voz e estratégia — o sistema de marca completo, não apenas cores e fontes.

Qualquer nome funciona. O formato e o poder são os mesmos.

O que vai dentro de um brand-guidelines.md

Um arquivo completo abrange todas as camadas da sua marca, desde a estratégia até as especificações em nível de pixel. Veja como um brand-guidelines.md gerado pelo Branding5 se parece na prática:

# 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

Essa é a anatomia. Agora, veja como um resultado real se parece — gerado pelo Branding5 para Oscar Stories, uma plataforma de histórias de ninar infantis alimentada por IA com um arquétipo de Bobo da Corte.

YAML front matter — a camada legível por máquina

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

O que o resto do arquivo contém

Abaixo do YAML front matter, o arquivo completo — com mais de 14.000 palavras — continua com tudo o que uma IA precisa para tomar decisões alinhadas com a marca:

• Narrativa da Marca: declaração de posicionamento, missão, visão, USP e a história do "por que fazemos isso"
• Análise Profunda do Arquétipo: as principais características do Bobo da Corte, estratégias centrais, armadilhas potenciais e exemplos de marcas (Ben & Jerry's, M&M's, Old Spice)
• Identidade Visual: sistema de cores completo com hex, CMYK, HSL e estados de hover; hierarquia de tipografia com pesos e regras de uso
• Perfil de Cliente Ideal (ICP): persona completa — "O Pai Moderno Consciente" — com dados demográficos, psicográficos, pontos de dor, objetivos e canais preferidos
• Análise SWOT: forças, fraquezas, oportunidades, ameaças e uma avaliação estratégica geral
• Copy de Marketing: 8 títulos escritos na voz do Bobo da Corte, 5 CTAs com táticas de urgência e copy completa de landing page PAS
• Estratégia de Conteúdo: plano de conteúdo Hero/Hub/Hygiene com títulos específicos, canais e objetivos
• Campanhas de Marketing: campanhas de reconhecimento, interesse e desejo mapeadas para a estrutura AIDA

Um desenvolvedor que nunca conheceu a equipe Oscar Stories pode colocar este arquivo no Cursor, pedir uma landing page e obter um copy que soa como a marca — lúdico, imaginativo, nunca pedante — com a paleta roxa certa e títulos em Nunito Sans. Sem briefing. Sem troca de mensagens.

É assim que as diretrizes de marca legíveis por máquina se parecem na prática. Não um PDF. Um único arquivo que toda ferramenta de IA que sua equipe usa pode ler, entender e usar para construir.

Por que isso importa agora

Três forças convergiram para tornar as diretrizes de marca legíveis por máquina urgentes, não opcionais:

1. As ferramentas de IA agora escrevem a maior parte do código e do copy

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — desenvolvedores e profissionais de marketing estão entregando mais rapidamente do que nunca com a assistência de IA. Mas essas ferramentas não têm conhecimento da sua marca, a menos que você as informe. A cada sessão, a cada prompt, você está reexplicando sua paleta de cores. Isso não é um fluxo de trabalho — é um imposto sobre a velocidade.

Um único brand-guidelines.md em seu repositório elimina esse imposto permanentemente.

2. O Google está promovendo o design-md como um padrão

Quando o Google lança uma especificação de formato por meio de um produto como o Stitch, o ecossistema presta atenção. Plug-ins do Figma, extensões do VS Code e geradores de componentes de IA já estão começando a procurar um DESIGN.md na raiz do projeto. Fazer seu arquivo corretamente hoje significa que as ferramentas de amanhã simplesmente funcionarão — sem migração, sem retrabalho.

3. A consistência da marca na velocidade da IA requer regras legíveis por máquina

Se sua equipe gera 50 posts de blog por mês, 20 variações de anúncios por semana e uma nova landing page a cada sprint, um PDF no Google Drive é inútil. As regras da marca precisam viver onde a geração acontece — no repositório, no contexto do prompt, na memória da ferramenta.

PDF vs. brand-guidelines.md: uma comparação lado a lado

O PDF não está morto para apresentações a stakeholders. Mas para a execução diária — onde as ferramentas de IA estão fazendo a geração — o texto simples vence decisivamente.

Como usar brand-guidelines.md com o Google Stitch

O Google Stitch lê seu brand-guidelines.md e o usa para restringir sua geração de UI. Em vez de produzir componentes Material genéricos, ele gera UI que corresponde ao seu sistema de cores, tipografia, espaçamento e convenções de componentes.

O fluxo de trabalho tem três etapas:

1. Carregue ou coloque o arquivo. Coloque brand-guidelines.md na raiz do seu projeto ou carregue-o diretamente na interface do Stitch.
2. Solicite naturalmente. Peça o que você precisa: "Gere uma seção de preços com três níveis e um plano popular destacado."
3. Obtenha uma saída alinhada com a marca. O Stitch aplica suas cores, hierarquia de tipos, estilos de botão e espaçamento automaticamente. Nenhuma revisão de design é necessária para o básico.

O resultado não é apenas mais próximo da sua marca — é mais rápido para ser entregue, porque você pula a etapa de correção que normalmente consome uma tarde inteira.

Usando-o com Cursor, Copilot e ferramentas de codificação de IA

Coloque DESIGN.md (ou brand-guidelines.md) na raiz do seu repositório e referencie-o em seus prompts:

Cursor:

@DESIGN.md Gere uma seção de herói para a página inicial.
Use o estilo do CTA principal, a tipografia do cabeçalho e o sistema de cores do arquivo.

GitHub Copilot (modo workspace):

#file:DESIGN.md Crie um componente de grade de cartão de depoimentos
usando as diretrizes de cartão e o sistema de espaçamento definidos aqui.

Claude / ChatGPT (cole ou anexe o arquivo):

Aqui estão minhas diretrizes de marca [anexado: brand-guidelines.md].
Escreva três opções de título para a página inicial que correspondam à voz da marca
e se dirijam ao ICP 1 (Gerente de Marketing de Crescimento).

v0 / Bolt / Lovable: Carregue brand-guidelines.md como um arquivo de projeto ou cole as seções relevantes em seu prompt. Essas ferramentas aplicarão suas cores, tipo e especificações de componente a cada geração.

O benefício: desenvolvedores que nunca leram as diretrizes da marca produzem código alinhado com a marca desde o primeiro prompt. A restrição está incorporada no fluxo de trabalho — não imposta por meio de ciclos de revisão e mensagens do Slack.

Além dos visuais: por que a estratégia no arquivo muda tudo

A maioria dos arquivos de sistema de design param nas cores e fontes. Um brand-guidelines.md do Branding5 vai mais fundo — e essa profundidade é o que transforma a saída da IA de "parece certo" para "parece adequado".

A fundação da marca diz à IA por que a marca faz as escolhas que faz. Quando uma IA sabe que você é um arquétipo do Sábio que visa profissionais de marketing não técnicos, ela não apenas escolhe a cor certa do botão — ela escreve copy que é claro e confiante, em vez de exagerado e ofegante.

Os Perfis de Cliente Ideal fornecem à IA o contexto de público para gerar mensagens relevantes. Um título para um VP de Marketing é lido de forma muito diferente de um direcionado a um Gerente de Marketing de Crescimento. Sem ICPs no arquivo, a IA adivinha. Com eles, ela direciona.

As diretrizes de voz e tom com exemplos concretos (bons e maus) são a seção de maior alavancagem para a qualidade do copy. Um exemplo bem escrito de "o que fazer / o que não fazer" ensina a uma IA mais do que cem palavras de descrição abstrata de voz.

As seções de O que fazer e o que não fazer atuam como restrições rígidas. "Nunca use mais de 3 cores em um componente" e "sempre inclua um CTA em cada seção" são regras que a IA pode seguir literalmente, todas as vezes. Sem ambiguidade, sem desvios.

Como o Branding5 gera o seu

Depois de concluir sua análise de marca no Branding5, seu brand-guidelines.md estará pronto para download no painel. Veja o que acontece nos bastidores:

1. Sua estratégia de marca alimenta o arquivo. Posicionamento, arquétipo, ICPs, análise de concorrentes, tom de voz — tudo o que você construiu no Branding5 flui diretamente para a saída Markdown estruturada.
2. As especificações visuais são derivadas do seu posicionamento. Cores, tipografia e convenções de componentes são geradas para corresponder à sua personalidade de marca — não retiradas de um modelo genérico.
3. A saída segue a especificação design-md. Stitch e ferramentas compatíveis a analisam nativamente. Sem conversão, sem reformatação.
4. Está pronto para uso imediato. Coloque-o em seu repositório, anexe-o à sua ferramenta de IA ou compartilhe-o com sua equipe. Um arquivo, todas as ferramentas, desde o primeiro dia.

Os 30 minutos que você passa no Branding5 produzem:

• Um PDF de estratégia para seus stakeholders e investidores
• Estruturas de mensagens para sua equipe de marketing
• Um brand-guidelines.md para todas as ferramentas de IA que sua equipe de engenharia e design usará

Sem copy. Sem formatação manual. Sem necessidade de conhecimento em Markdown.

Primeiros passos: uma lista de verificação de cinco minutos

Já tem uma estratégia de marca? Veja como ir do zero a um sistema de marca pronto para IA em cinco minutos:

1. Gere seu arquivo. Faça sua análise de marca no Branding5 e baixe o brand-guidelines.md do seu painel.
2. Coloque-o na raiz do seu repositório. Nomeie-o DESIGN.md se sua equipe preferir a convenção do desenvolvedor, ou mantenha brand-guidelines.md para maior clareza.
3. Informe sua equipe. Compartilhe uma mensagem de uma linha: "Nossas diretrizes de marca agora estão em DESIGN.md na raiz do projeto. Referencie-o em cada prompt de IA."
4. Referencie-o em cada sessão de IA. Use @DESIGN.md no Cursor, anexe-o no Claude ou ChatGPT, carregue-o no v0 ou Bolt.
5. Mantenha-o atualizado. Quando sua marca evoluir, atualize o arquivo e faça o commit. O Git rastreia a mudança. Cada ferramenta o capta instantaneamente.

É isso. Sem deck de integração. Sem gargalo de revisão de design. Chega de "qual é a nossa cor da marca?" no Slack.

Conclusão

As ferramentas de IA estão escrevendo seu código, gerando seu copy e estruturando seus componentes. A única questão é se elas estão fazendo isso alinhado com a marca — ou inventando à medida que avançam.

Um brand-guidelines.md responde a essa pergunta uma vez. Em seguida, ele a responde novamente, automaticamente, a cada geração, em todas as ferramentas, para cada pessoa da sua equipe.

O formato Stitch do Google está tornando as diretrizes de marca legíveis por máquina um padrão. DESIGN.md está se tornando o arquivo que os desenvolvedores esperam encontrar na raiz do projeto. As marcas que o adotarem agora entregarão mais rapidamente, manterão mais consistência e perderão menos tempo corrigindo a saída da IA que errou o alvo.

Sua estratégia de marca já está no Branding5. Seu brand-guidelines.md está a um clique de distância.

Perguntas frequentes

Qual é a diferença entre DESIGN.md e brand-guidelines.md?

Eles são o mesmo formato. DESIGN.md é o atalho popular nas comunidades de desenvolvedores — espelha as convenções de nomenclatura de README.md. brand-guidelines.md é mais descritivo, sinalizando que o arquivo contém estratégia de marca (posicionamento, voz, ICPs), não apenas especificações visuais. Use o nome que sua equipe preferir; as ferramentas de IA analisam ambos identicamente.

Preciso saber Markdown para criar ou editar o arquivo?

Não. O Branding5 gera o arquivo automaticamente a partir da sua análise de marca. Se você quiser fazer edições manuais posteriormente, Markdown é apenas texto simples com formatação simples (# para títulos, - para listas, ** para negrito). Qualquer um pode aprender o básico em dois minutos.

Quais ferramentas de IA suportam design-md / DESIGN.md?

O Google Stitch o lê nativamente. Cursor, GitHub Copilot, Windsurf, Claude, ChatGPT, v0, Bolt e Lovable funcionam com ele quando você referencia ou anexa o arquivo. Como é Markdown simples, qualquer ferramenta alimentada por LLM pode analisá-lo e segui-lo — sem a necessidade de plug-in ou integração.

Quão detalhado deve ser meu brand-guidelines.md?

Detalhado o suficiente para remover a ambiguidade. No mínimo, inclua sua paleta de cores com regras de uso, especificações de tipografia, convenções de botões/cartões/formulários e diretrizes de voz com exemplos. Quanto mais específicas suas seções de "o que fazer e o que não fazer", mais consistente será a saída da IA. O Branding5 gera um arquivo abrangente por padrão — você sempre pode cortar as seções de que não precisa.

Como mantenho o arquivo sincronizado à medida que minha marca evolui?

Trate-o como qualquer outro arquivo fonte: edite, commit, push. Como ele vive no Git, sua equipe vê exatamente o que mudou e quando. Se você refizer sua análise de marca no Branding5, poderá baixar uma versão atualizada e substituir o arquivo antigo. Sem contrato de retenção de agência, sem ciclo de revisão de meses.

Posso usar brand-guidelines.md para tarefas não relacionadas a código, como escrever posts de blog ou copy de anúncios?

Com certeza. Anexe o arquivo (ou cole as seções de Voz da Marca e ICP) ao enviar prompts para Claude, ChatGPT ou qualquer assistente de escrita. As diretrizes de voz, exemplos de tom e detalhes do público são especificamente projetados para melhorar o copy gerado por IA — não apenas o código.

Obtenha seu brand-guidelines.md

Faça sua análise de marca no Branding5 e baixe um brand-guidelines.md (DESIGN.md) compatível com design-md — pronto para Google Stitch, Cursor, Copilot e toda a sua pilha de ferramentas de IA.

Gere seu brand-guidelines.md →