🗂️ Pasta de marca: o agente para de perguntar "qual é a cor mesmo?"

Novo aqui? Uma pasta de marca (em inglês, brand_assets — "ativos de marca") é só um diretório (uma pasta, dentro do projeto no seu computador) onde ficam guardados, num só lugar, os arquivos que definem a identidade visual: o logo em suas variações, as cores oficiais, as fontes escolhidas, e às vezes até exemplos de como a marca "fala". Pense numa gráfica antiga: toda empresa séria tinha um manual de identidade visual, um caderno grosso com o logo em vetor, a paleta com os códigos exatos de tinta, e regras de uso — pra ninguém inventar um verde diferente num panfleto. A pasta de marca é esse mesmo caderno, só que em arquivos, e sempre à mão do seu agente.

A diferença que importa aqui: o manual físico ficava numa gaveta, e alguém precisava ir buscar, folhear e copiar à mão. A pasta de marca fica dentro do projeto — o mesmo lugar onde o Claude Code já está trabalhando. Quando você pede "cria uma página de contato nova", o agente pode simplesmente abrir essa pasta e ler, sem você precisar reexplicar "usa o azul #0d9488, a fonte é Inter, o logo tá em tal lugar" pela enésima vez.

Novo aqui? Front-end é a parte de um site ou app que aparece na tela — o que o visitante vê e clica. Se você constrói várias páginas ao longo do tempo (uma landing, um dashboard interno, um cardápio digital), cada uma é um front-end diferente, mas todas deveriam parecer da mesma marca. Sem uma fonte única, cada front-end acaba puxando a cor de um jeito, o logo de outro, e o resultado é uma "família" que não se parece nada entre si.

A pasta de marca resolve isso virando a única fonte de verdade: toda vez que um agente vai construir um front-end novo, ele consulta essa mesma pasta antes de escrever qualquer CSS. O diagrama abaixo mostra essa relação — uma pasta central, vários projetos puxando dela.

Legenda: a pasta fica no centro, permanente. Cada front-end novo puxa dela em vez de reinventar a identidade — o resultado visual fica consistente entre projetos diferentes, não só dentro de um só.

Não existe uma regra única e obrigatória de nomes de pasta — o que importa é a organização, não o nome exato. Mas uma estrutura simples e testada, que funciona bem pro agente entender de cara, é essa árvore de pastas. Cada subpasta cuida de UM tipo de ativo, e um arquivo de texto (Markdown ou JSON) documenta as decisões que não dá pra "ver" só olhando o arquivo — como o código hex exato de cada cor.

meu-projeto/
├── brand_assets/
│   ├── logo/
│   │   ├── logo-cor.svg          # versão colorida, uso padrão
│   │   ├── logo-branco.svg       # pra fundos escuros/fotos
│   │   ├── logo-preto.svg        # pra fundos muito claros
│   │   └── icone.svg             # só o símbolo, sem o nome
│   ├── fontes/
│   │   ├── Inter-Regular.woff2
│   │   └── Inter-Bold.woff2
│   ├── cores.md                  # paleta com códigos hex + quando usar cada uma
│   ├── tipografia.md             # qual fonte, quais tamanhos, quais pesos
│   └── tom-de-voz.md             # exemplos de frases "no estilo da marca"
└── index.html, src/, etc. (o resto do projeto)

Novo aqui? Hex é o código de seis caracteres que representa uma cor exata (tipo #0d9488) — sem ele, "azul-esverdeado" pode virar cinco tons diferentes dependendo de quem olha. O arquivo cores.md existe exatamente pra fixar esse número, uma vez, pra sempre. O mesmo vale pra tipografia — o conjunto de decisões sobre qual fonte usar, em que tamanho e peso (fino, normal, negrito) em cada situação.

Você não precisa montar essa estrutura na mão. Dá pra pedir pro próprio agente criar a pasta e já documentar as decisões, a partir de um logo que você já tem (ou de uma referência visual, como no módulo 5.5). O objetivo aqui: sair desse tópico com uma brand_assets/ de verdade no seu projeto, não só a teoria.

Cria uma pasta brand_assets/ na raiz deste projeto pra guardar nossa identidade
visual. Meu logo original está em <caminho/do/logo-original.png>.

Faça o seguinte:
1. Crie brand_assets/logo/ e salve dentro: uma versão colorida (logo-cor),
   uma em branco pra fundo escuro (logo-branco) e o ícone isolado (icone).
2. Extraia as 2-3 cores principais do logo, documente em brand_assets/cores.md
   com nome + código hex + para que serve cada uma (ex.: "cor de destaque:
   botões e links").
3. Em brand_assets/tipografia.md, registre a fonte <nome da fonte que
   você usa> com os tamanhos padrão de título e texto.
4. Não invente nada que não vier do logo/referência — se faltar informação,
   me pergunte em vez de chutar.

Vale conectar isso ao que você já viu na trilha. No módulo 5.2 você criou uma skill de design global — um conjunto de instruções fixas que ensina o agente como construir uma interface (o processo: quais componentes usar, como estruturar o CSS). No 5.5, você deu uma referência visual pontual pra um rebranding específico. A pasta de marca é diferente das duas: ela é o material bruto e permanente — o "o quê", não o "como".

Juntas, as três coisas se completam: a skill sabe o processo, a pasta de marca guarda os dados fixos da identidade, e uma referência pontual (5.5) resolve um caso específico quando necessário. Quando você pede "constrói uma página nova seguindo nossa skill de design", o ideal é que essa skill já saiba olhar pra brand_assets/ antes de decidir cores e fontes — em vez de reinventar em cada chamada.

Uma pasta de marca só vale o que ela tem de atual. O erro mais frequente não é criar errado — é criar uma vez, esquecer, e deixar a marca real evoluir sem atualizar os arquivos. Seis meses depois, você trocou a cor principal num site novo mas cores.md ainda tem a cor antiga, e o próximo projeto sai com a cor errada — porque o agente confiou no arquivo, não em você lembrar de avisar.

Checklist antes de considerar sua pasta de marca pronta: