Resumindo
- 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.
Nesta página
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 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 |
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 |
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 explica as soluções.
Cores, fontes e o resto do básico
: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%);
}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; fontes comerciais costumam exigir licença por pessoa ou por site, então registre isso. Como escolher as fontes da marca 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
Uma estrutura de pastas que mantém o kit organizado
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)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 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 mostra o passo a passo.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
