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

Você pagou bem pelas diretrizes da sua 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 primária mesmo? É Inter ou Plus Jakarta Sans? Usamos cantos arredondados ou afiados?"

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

O formato design-md do Google Stitch 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 chamam de DESIGN.md?)

Design-md é uma especificação baseada em Markdown, em texto simples, 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 construir a partir dele.

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

Dois nomes, uma ideia

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 o 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 completo da marca, não apenas cores e fontes.

Ambos os nomes funcionam. O formato e o poder são os mesmos.

O que vai dentro de um brand-guidelines.md

Um arquivo completo cobre 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

- **Posicionamento:** A única plataforma de análise construída para equipes de marketing não-técnicas
  que precisam de insights de nível empresarial sem a curva de aprendizado.
- **Arquétipo:** O Sábio — sábio, confiável, orientado a dados
- **Missão:** Tornar a alfabetização de dados acessível a todo profissional de marketing.
- **Valores:** Clareza sobre complexidade. Precisão sobre velocidade. Empoderamento sobre dependência.

## Ideal Customer Profiles

### ICP 1: Gerente de Marketing de Crescimento

- 28–38, SaaS de médio porte (50–500 funcionários)
- Frustrado por ferramentas de BI complexas; precisa de painéis que possa construir sozinho
- Padrões de linguagem: "insights acionáveis", "autoatendimento", "tempo de valor"
- Objeção chave: "Isso substituirá nosso stack de BI existente?"

### ICP 2: VP de Marketing

- 35–50, se reporta ao CMO ou CEO
- Se preocupa com atribuição cross-channel e relatórios prontos para o conselho
- Compra com base em prova de ROI e amplitude de integração

## Visual Identity

### Colors

| Função     | Hex       | Uso                                              |
| ---------- | --------- | ------------------------------------------------ |
| Primária   | `#2563eb` | CTAs, estados ativos, elementos chave da UI      |
| Secundária | `#f8fafc` | Fundos, cartões, contêineres                     |
| Destaque   | `#16a34a` | Estados de sucesso, métricas positivas           |
| Neutra 900 | `#0f172a` | Texto do corpo, títulos                          |
| Neutra 400 | `#94a3b8` | Texto de espaço reservado, estados desabilitados |
| Erro       | `#dc2626` | Estados de erro, ações destrutivas               |
| Alerta     | `#f59e0b` | Estados de alerta, avisos de atenção             |

### Typography

| Função  | Família           | Peso | Tamanho | Altura da Linha | 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        |
| Corpo   | Inter             | 400  | 16px    | 1.6             | 0        |
| Legenda | Inter             | 500  | 13px    | 1.4             | 0.01em   |
| Código  | JetBrains Mono    | 400  | 14px    | 1.5             | 0        |

### Spacing & Layout

- Unidade base: 8px
- Preenchimento de componente: 16px (compacto), 24px (padrão), 32px (espaçoso)
- Espaçamento de seção: 64px (desktop), 48px (mobile)
- Largura máxima do conteúdo: 1200px
- Raio da borda: 8px (cartões), 12px (modais), 9999px (pills/botões)

### Shadows & Elevation

- Cartão: `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

- **Voz:** Direta, confiante, sem jargões. Explicamos, não damos palestras.
- **Mudanças de tom:** Mais acolhedor no onboarding, mais assertivo em copy de vendas,
  preciso e neutro na documentação.
- **Estilo de frase:** Frases curtas. Voz ativa. Comece com o benefício.
- **Evitar:** Construções passivas, "aproveitar", "sinergia", frases de preenchimento,
  pontos de exclamação na UI do produto.

### Examples

- ✅ "Veja quais campanhas geram receita — em um clique."
- ❌ "Nossa plataforma inovadora alavanca tecnologia de ponta para empoderar
  sua equipe de marketing com soluções de análise de ponta."

## Component Guidelines

### Buttons

- Primário: preenchido, `#2563eb`, texto branco, rounded-full, min-height 44px
- Secundário: contornado, borda de 1px `#2563eb`, fundo transparente
- Fantasma: sem borda, apenas texto, usado em navegação e ações terciárias
- Todos os botões: preenchimento horizontal de 16px, font-weight 600, sem maiúsculas

### Cards

- Fundo: branco, border-radius 8px, sombra sutil
- Preenchimento: 24px
- Cabeçalho: peso H3, margin-bottom de 8px
- Sempre inclua um CTA claro ou próxima ação

### Forms

- Rótulo acima do input, font-weight 500
- Altura do input: 44px, border-radius 8px, borda de 1px neutra-300
- Mensagem de erro abaixo do input em vermelho, 13px
- Campos obrigatórios marcados com \* (não apenas cor)

## Do's and Don'ts

- ✅ Sempre inclua um CTA único e claro por seção
- ✅ Use dados reais em exemplos e capturas de tela, nunca "Lorem ipsum"
- ✅ Teste as proporções de contraste — mínimo WCAG AA (4.5:1 para texto)
- ❌ Nunca use mais de 3 cores em um único componente
- ❌ Não use fotos de banco de imagens de pessoas apontando para telas
- ❌ Evite alinhar texto do corpo ao centro se tiver mais de 2 linhas

Isso é texto simples. Sem formato proprietário. Sem ferramentas especiais. Entregue-o a qualquer ferramenta de IA — Cursor, Claude, Stitch, v0, Bolt, Copilot — e sua marca se tornará uma camada de restrição que molda cada saída automaticamente.

Por que isso é importante agora

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

1. Ferramentas de IA agora escrevem a maior parte do código e do texto

Cursor, GitHub Copilot, Claude, v0, Bolt, Lovable — desenvolvedores e profissionais de marketing estão lançando produtos mais rápido do que nunca com a assistência da 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á impulsionando 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. Plugins 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. Ter seu arquivo pronto 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 exige 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 de 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 a 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 posicione o arquivo. Coloque brand-guidelines.md na raiz do seu projeto ou faça o upload diretamente na interface do Stitch.
2. Solicite naturalmente. Peça o que você precisa: "Gere uma seção de preços com três camadas e um plano popular destacado."
3. Obtenha saída alinhada à marca. O Stitch aplica suas cores, hierarquia de tipos, estilos de botões 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 de lançar porque você pula a etapa de correção que normalmente consome uma tarde inteira.

Usando 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 Generate a hero section for the homepage.
Use the primary CTA style, heading typography, and colour system from the file.

GitHub Copilot (modo workspace):

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

Claude / ChatGPT (cole ou anexe o arquivo):

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: Faça o upload de 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 componentes a cada geração.

A recompensa: desenvolvedores que nunca leram as diretrizes da marca produzem código alinhado à marca desde o primeiro prompt. A restrição é incorporada ao fluxo de trabalho — não imposta por meio de ciclos de revisão e mensagens no Slack.

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

A maioria dos arquivos de sistema de design param em 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 "soa certo".

A Brand foundation diz à IA por que a marca faz as escolhas que faz. Quando uma IA sabe que você é um arquétipo Sábio visando profissionais de marketing não-técnicos, ela não apenas escolhe a cor certa do botão — ela escreve um texto que é claro e confiante, em vez de cheio de hype e exagerado.

Os Ideal Customer Profiles dão à IA o contexto do público para gerar mensagens relevantes. Um título para um VP de Marketing se lê de forma muito diferente de um direcionado a um Gerente de Marketing de Crescimento. Sem ICPs no arquivo, a IA adivinha. Com eles, ela mira.

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

Os Do's and Don'ts (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 desvio.

Como o Branding5 gera o seu

Após completar 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 estruturada em Markdown.
2. As especificações visuais são derivadas do seu posicionamento. Cores, tipografia e convenções de componentes são geradas para corresponder à personalidade da sua marca — não retiradas de um modelo genérico.
3. A saída segue a especificação design-md. O 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, toda ferramenta, 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 toda ferramenta de IA que sua equipe de engenharia e design usará

Sem copywriting. Sem formatação manual. Sem necessidade de expertise em Markdown.

Primeiros passos: um checklist 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. Execute sua análise de marca no Branding5 e baixe brand-guidelines.md do seu painel.
2. Coloque-o na raiz do seu repositório. Dê o nome de DESIGN.md se sua equipe preferir a convenção de desenvolvedor, ou mantenha brand-guidelines.md para maior clareza.
3. Informe sua equipe. Compartilhe uma mensagem de uma linha: "Nossas diretrizes de marca estão agora em DESIGN.md na raiz do projeto. Referencie-as em todo prompt de IA."
4. Referencie-o em toda sessão de IA. Use @DESIGN.md no Cursor, anexe-o no Claude ou ChatGPT, faça o upload 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. Toda ferramenta o capta instantaneamente.

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

Conclusão

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

Um brand-guidelines.md responde a essa pergunta de uma vez. E então a responde novamente, automaticamente, em cada geração, em cada ferramenta, 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 lançarão mais rápido, manterão maior 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 em comunidades de desenvolvedores — ele espelha as convenções de nomenclatura de README.md. brand-guidelines.md é mais descritivo, sinalizando que o arquivo contém a estratégia da marca (posicionamento, voz, ICPs), não apenas especificações visuais. Use o nome que sua equipe preferir; as ferramentas de IA analisam ambos de forma idêntica.

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 pessoa 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 plugin ou integração.

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

Detalhado o suficiente para remover ambiguidades. 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íficos forem seus "fazer e não fazer", mais consistente será a saída da IA. O Branding5 gera um arquivo abrangente por padrão — você sempre pode remover 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, faça commit, envie. 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 retainer de agência, sem ciclo de revisão de um mês.

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

Absolutamente. Anexe o arquivo (ou cole as seções de Voz da Marca e ICPs) ao solicitar ao 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 texto gerado por IA — não apenas o código.

Obtenha seu brand-guidelines.md

Execute sua análise de marca no Branding5 e baixe um brand-guidelines.md (compatível com design-md) — pronto para o Google Stitch, Cursor, Copilot e todo o seu stack de ferramentas de IA.

Gere seu brand-guidelines.md →