# O que vai em um kit de marca e como mantê-lo organizado

[Canonical HTML page](https://gradiently.design/pt-br/guide/brand-kit)

O guia de estilo diz o que fazer. O kit de marca é o que as pessoas realmente abrem. Acerte arquivos, formatos e pastas e todo mundo cria peças na marca sem precisar perguntar.

## The short version

- Um kit de marca é o conjunto de arquivos prontos para uso que permite a qualquer pessoa criar peças na marca: logos, códigos de cor, fontes, fundos, templates, imagens aprovadas e o guia de estilo.
- Os logos entram no kit como SVG para telas, PNG transparente para as ferramentas do dia a dia e versões de uma cor em preto e branco.
- Os códigos de cor devem aparecer em todas as notações de que alguém vai precisar, em geral hex e RGB para telas e CMYK para impressão.
- Fundos e templates são as partes mais usadas de um kit de marca e as mais esquecidas.
- Um kit de marca fica organizado quando tem um só lugar, um só responsável, nomes de arquivo claros e uma pasta de arquivo morto para o que saiu de uso.

Um **kit de marca** é o conjunto de arquivos prontos para uso de que qualquer pessoa precisa para criar algo na marca: arquivos de logo, códigos de cor, fontes, fundos, templates, imagens aprovadas e um guia de estilo curto. Enquanto o [guia de estilo da marca](https://gradiently.design/pt-br/guide/brand-style-guide) explica as regras, o kit entrega os materiais. Um bom kit permite que um freelancer, um colega novo ou um assistente de IA comece a trabalhar em minutos, sem mandar nenhuma pergunta para você.

## O checklist do kit de marca

| Item | O que incluir | Por que importa |
| --- | --- | --- |
| Logo | SVG, PNG transparente, versões de uma cor em preto e branco, versão quadrada para avatar | Cada ferramenta e cada fundo pede um arquivo diferente |
| Cores | Nomes, códigos hex, RGB e CMYK, com a função de cada cor | Evita que as pessoas capturem cores de prints de tela |
| Fontes | Nomes das fontes com links de download ou arquivos, além de notas de licença | Evita substitutas que mudam todo o clima |
| Fundos | Fundo da marca nos tamanhos comuns, código CSS, cor lisa de reserva | Preenche a maior área da maioria dos designs |
| Templates | Seus posts, stories, slides e cabeçalho de e-mail mais comuns | O jeito mais rápido de manter as peças consistentes |
| Imagens | Fotos aprovadas, ilustrações ou conjuntos de ícones | Impede que imagens de banco entrem de fininho |
| Guia de estilo | As regras de uma página em PDF ou em link | Explica quando usar cada arquivo |

Sete itens. A maioria dos kits tem os três primeiros; os três seguintes são de onde vem a consistência de verdade.

Ajuda pensar em quem abre o kit e no que cada pessoa procura primeiro:

- **Quem cuida das redes sociais** quer templates e fundos nos tamanhos certos
- **Quem desenvolve o site** quer o logo em SVG, os códigos de cor em CSS e as fontes de origem
- **A gráfica** quer o logo para impressão, os valores CMYK e as cores especiais, se houver
- **Um colega novo** quer o guia de uma página e um bom exemplo de cada formato
- **Um assistente de IA** quer as regras em texto simples e as cores em códigos

## Arquivos de logo: quais formatos você precisa

Um logo, vários arquivos. Cada formato resolve um problema diferente, e o formato errado costuma ser a causa de logos borrados, com caixa em volta ou com a cor errada.

| Formato | Use para | Cuidado com |
| --- | --- | --- |
| SVG | Sites, apps e tudo que precisa escalar | Algumas ferramentas de escritório e de redes sociais não aceitam |
| PNG transparente | Slides, documentos, ferramentas de redes sociais, e-mail | Exporte grande, como 2.000 px de largura, para continuar nítido |
| PDF ou EPS | Impressão, sinalização e brindes | Envie para a gráfica, não para as redes sociais |
| JPEG | Quase nunca para logos | Não tem transparência, então chega numa caixa branca |

No mínimo: SVG e PNG transparente do logo principal, mais versões de uma cor em branco e preto para fotos e gradientes.

Inclua também uma versão que funcione no fundo da sua marca. Um logo que some no seu próprio gradiente é um problema comum e evitável; [colocar um logo sobre um gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background) explica as soluções.

## Cores, fontes e o resto do básico

- Azul-noite: #0e1424
- Farinha: #f3e6d0
- Brasa do forno: #e0823d
- Casca: #6b4a2f

Cores em um kit precisam de nomes, além de códigos. As pessoas lembram de “brasa do forno”; ninguém lembra de #e0823d.

```css
:root {
  --night-blue: #0e1424; /* rgb(14 20 36) grounds, 60% */
  --flour: #f3e6d0;      /* rgb(243 230 208) text and panels, 30% */
  --oven-glow: #e0823d;  /* rgb(224 130 61) accents only, 10% */
  --crust: #6b4a2f;      /* rgb(107 74 47) support */

  /* Signature background, with the flat fallback first */
  --ground: #0e1424;
  --ground-gradient: radial-gradient(90% 70% at 50% 110%, #e0823d 0%, #6b4a2f 25%, #1b2238 55%, #0e1424 100%);
}
```

Ponha um arquivo de cores no kit para quem faz o seu site. Isso poupa uma rodada de adivinhação a partir de prints.

Sobre as fontes, anote de onde cada uma vem e o que a licença permite. Muitas boas tipografias são gratuitas no [Google Fonts](https://fonts.google.com); fontes comerciais costumam exigir licença por pessoa ou por site, então registre isso. [Como escolher as fontes da marca](https://gradiently.design/pt-br/guide/brand-fonts) ajuda na escolha em si.

## Fundos e templates: os arquivos mais usados

Os logos ganham a atenção, mas fundos e templates ganham o uso. Prepare o fundo da sua marca nos tamanhos que você mais publica, para ninguém esticar uma imagem quadrada até virar um banner. Depois construa os templates em cima dele.

- Post 4:5: 1080 × 1350
- Story 9:16: 1080 × 1920
- Slide 16:9: 1920 × 1080
- Prévia de link: 1200 × 630
- Cabeçalho de e-mail: 1200 × 600
- Banner do LinkedIn: 1584 × 396

Seis tamanhos que cobrem a maioria das marcas pequenas. Renderize o fundo para cada formato em vez de cortar uma única imagem.

## Uma estrutura de pastas que mantém o kit organizado

```text
brand-kit/
  00-read-me-first.pdf          (the one-page style guide)
  01-logo/
    cornerloaf-logo-primary.svg
    cornerloaf-logo-primary.png
    cornerloaf-logo-white.png
    cornerloaf-logo-black.png
    cornerloaf-avatar-square.png
    print/cornerloaf-logo-primary.pdf
  02-colour/
    colours.css
    colours.pdf                 (hex, RGB, CMYK, names, jobs)
  03-type/
    fonts.txt                   (names, links, licence notes)
  04-backgrounds/
    ground-1080x1350.png
    ground-1080x1920.png
    ground-1920x1080.png
  05-templates/
  06-imagery/
  _archive/                     (retired files, never deleted)
```

Pastas numeradas mantêm a ordem, um arquivo de leitura fica no topo e os arquivos antigos vão para um arquivo morto em vez de ficarem ao lado dos novos.

### Kit bagunçado

- logo-final-v3-NOVO-use-este.png
- Cinco cópias do kit em drives diferentes
- Cores antigas e novas lado a lado
- Fontes citadas, mas sem link

### Kit organizado

- brand-logo-white.png, nomeado pelo que é
- Um só lugar, com link a partir de todos os outros
- Arquivos aposentados movidos para _archive
- Cada fonte com origem e licença

## Como manter um kit de marca atualizado

1. **Um lugar, um responsável** Mantenha uma única cópia mestra e indique uma pessoa que pode alterá-la. Todos os outros usam o link em vez de baixar cópias.
2. **Nomeie os arquivos pelo que são** Marca, item, variante, formato. Nunca “final” ou “novo”: deixam de ser verdade na semana seguinte.
3. **Arquive, não apague** Quando algo sair de uso, mova para uma pasta de arquivo morto. Arquivos antigos ao lado dos novos são o jeito como as cores velhas voltam.
4. **Revise a cada mudança** Template novo, cor nova, novo lockup de logo: atualize o kit no mesmo dia e depois o guia de estilo. Veja [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) para entender por que o desvio começa aqui.

O Gradiently mantém um kit de marca dentro do Studio, com seus logos, cores e fontes a um clique de cada design, e o Designer o aplica quando cria ou edita peças. Se você cuida de mais de uma marca, cada uma tem o próprio kit e os próprios Marks. [Configurar seu kit de marca no Gradiently](https://gradiently.design/pt-br/guide/brand-kit-setup) mostra o passo a passo.

## FAQ

### O que é um kit de marca?

Um kit de marca é uma coleção de arquivos prontos para uso da marca: logos, códigos de cor, fontes, fundos, templates, imagens aprovadas e um guia de estilo curto.

### Quais arquivos de logo devem estar em um kit de marca?

Um SVG e um PNG transparente do logo principal, versões de uma cor em branco e preto, uma versão quadrada para avatar e um PDF ou EPS para impressão.

### Qual é a diferença entre kit de marca e guia de estilo?

O guia de estilo são as regras; o kit de marca são os arquivos. O kit deve incluir o guia, e o guia deve dizer onde o kit está.

### Como compartilho um kit de marca com um freelancer?

Compartilhe o link da pasta mestra única, com o guia de estilo no topo. Evite mandar cópias, que ficam desatualizadas.