A versão curta
- Um kit de marca é o conjunto de ficheiros prontos a usar que permite a qualquer pessoa trabalhar fiel à marca: logótipos, códigos de cor, tipos de letra, fundos, modelos, imagens aprovadas e o guia de estilo.
- Os logótipos devem estar no kit em SVG para ecrãs, em PNG transparente para as ferramentas do dia a dia e em versões a uma cor, a preto e a branco.
- Os códigos de cor devem aparecer em todas as notações de que as pessoas vão precisar, normalmente hexadecimal e RGB para ecrãs e CMYK para impressão.
- Os fundos e os modelos são as partes mais usadas de um kit de marca e as mais esquecidas.
- Um kit de marca mantém-se arrumado quando tem uma só casa, um só responsável, nomes de ficheiro claros e uma pasta de arquivo para tudo o que foi retirado.
Nesta página
Um kit de marca é o conjunto de ficheiros prontos a usar de que qualquer pessoa precisa para fazer algo fiel à marca: ficheiros de logótipo, códigos de cor, tipos de letra, fundos, modelos, 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 comecem a trabalhar em minutos sem te enviarem uma única pergunta.
A lista de verificação do kit de marca
| Item | O que incluir | Porque importa |
|---|---|---|
| Logótipo | SVG, PNG transparente, versões a uma cor a preto e a branco, versão quadrada para avatar | Cada ferramenta e cada fundo pede um ficheiro diferente |
| Cores | Nomes, códigos hexadecimais, RGB e CMYK, com a função de cada cor | Evita que as pessoas colham cores a partir de capturas de ecrã |
| Tipos de letra | Nomes dos tipos de letra com ligações de descarga ou ficheiros, mais notas de licença | Evita substitutos que mudam todo o ambiente |
| Fundos | Fundo de assinatura nos tamanhos habituais, código CSS, cor lisa de reserva | Preenche a maior área da maioria dos designs |
| Modelos | As tuas publicações, stories, diapositivos e cabeçalho de email mais comuns | A forma mais rápida de manter o trabalho coerente |
| Imagens | Fotografias aprovadas, ilustração ou conjuntos de ícones | Impede que imagens de banco de imagens se infiltrem |
| Guia de estilo | As regras numa página, em PDF ou como ligação | Explica quando usar cada ficheiro |
Ajuda pensar em quem abre o kit e no que cada pessoa procura primeiro:
- Quem gere as redes sociais quer modelos e fundos nos tamanhos certos
- Quem desenvolve o site quer o logótipo em SVG, os códigos de cor em CSS e a origem dos tipos de letra
- A gráfica quer o logótipo para impressão, os valores CMYK e as eventuais cores diretas
- 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 como códigos
Ficheiros de logótipo: que formatos são precisos
Um logótipo, vários ficheiros. Cada formato resolve um problema diferente, e o formato errado é a causa habitual de logótipos desfocados, dentro de uma caixa ou com cores erradas.
| Formato | Usa-o para | Atenção a |
|---|---|---|
| SVG | Sites, aplicações e tudo o que muda de escala | Algumas ferramentas de escritório e de redes sociais não o aceitam |
| PNG, transparente | Diapositivos, documentos, ferramentas de redes sociais, email | Exporta em grande, por exemplo com 2000 px de largura, para se manter nítido |
| PDF ou EPS | Impressão, sinalética e merchandising | Envia às gráficas, não às redes sociais |
| JPEG | Quase nunca para logótipos | Não tem transparência, por isso chega dentro de uma caixa branca |
Inclui também uma versão que funcione sobre o teu fundo de assinatura. Um logótipo que desaparece no teu próprio gradiente é um problema comum e evitável; pôr um logótipo sobre um gradiente explica as soluções.
Cores, tipos de letra e o resto do essencial
: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%);
}Quanto aos tipos de letra, anota de onde vem cada um e o que a licença permite. Muitos bons tipos de letra são gratuitos no Google Fonts; os tipos de letra comerciais exigem muitas vezes uma licença por pessoa ou por site, por isso escreve-o. O guia sobre como escolher os tipos de letra da marca ajuda na escolha em si.
Fundos e modelos: os ficheiros mais usados
Os logótipos ficam com a atenção, mas os fundos e os modelos ficam com o uso. Prepara o teu fundo de assinatura nos tamanhos que mais publicas, para que ninguém estique uma imagem quadrada até um banner. Depois constrói os modelos por cima.
Publicação 4:5
1080 × 1350
Story 9:16
1080 × 1920
Diapositivo 16:9
1920 × 1080
Pré-visualização
1200 × 630
Cabeçalho de email
1200 × 600
Banner do LinkedIn
1584 × 396
Uma estrutura de pastas do kit de marca que se mantém arrumada
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 desarrumado
- logo-final-v3-NEW-use-this.png
- Cinco cópias do kit em discos diferentes
- Cores antigas e novas lado a lado
- Tipos de letra com nome mas sem ligação
Kit arrumado
- brand-logo-white.png, com o nome do que é
- Uma só casa, com ligação a partir de todo o lado
- Ficheiros retirados movidos para _archive
- Cada tipo de letra com a origem e a licença
Como manter um kit de marca atualizado
- 1
Uma casa, um responsável
Mantém uma única cópia principal e indica uma pessoa que a pode alterar. Todos os outros ligam-se a ela em vez de descarregarem cópias.
- 2
Dá aos ficheiros o nome do que são
Marca, item, variante, formato. Nunca “final” nem “novo”: deixam de ser verdade na semana seguinte.
- 3
Arquiva, não apagues
Quando algo é retirado, move-o para uma pasta de arquivo. Ficheiros antigos ao lado dos novos são o modo como as cores antigas voltam.
- 4
Revê após cada alteração
Modelo novo, cor nova, novo conjunto de logótipo: atualiza o kit no mesmo dia e depois o guia de estilo. Vê a coerência da marca para perceber porque é que o desvio começa aqui.
A Gradiently tem um kit de marca dentro do Studio, com os teus logótipos, cores e tipos de letra a um clique de cada design, e o Designer aplica-o quando cria ou edita trabalho. Se geres mais do que uma marca, cada uma tem o seu kit e os seus Marks. O guia sobre configurar o kit de marca na Gradiently percorre o processo.
Perguntas frequentes
O que é um kit de marca?
Um kit de marca é uma coleção de ficheiros de marca prontos a usar: logótipos, códigos de cor, tipos de letra, fundos, modelos, imagens aprovadas e um guia de estilo curto.
Que ficheiros de logótipo devem estar num kit de marca?
Um SVG e um PNG transparente do logótipo principal, versões a uma cor a branco e a preto, uma versão quadrada para avatar e um PDF ou EPS para impressão.
Qual é a diferença entre um kit de marca e um guia de estilo?
O guia de estilo são as regras; o kit de marca são os ficheiros. O kit deve incluir o guia, e o guia deve dizer onde está o kit.
Como partilho um kit de marca com um freelancer?
Partilha uma ligação para a pasta principal, com o guia de estilo no topo. Evita enviar cópias, que ficam desatualizadas.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
