# O que leva um kit de marca e como o manter arrumado

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

O guia de estilo diz o que fazer. O kit de marca é aquilo a que as pessoas recorrem mesmo. Acerta nos ficheiros, nos formatos e nas pastas e todos trabalham fiel à marca sem pedir ajuda.

## The short version

- 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.

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](https://gradiently.design/pt-pt/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 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 |

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

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 |

No mínimo: SVG e PNG transparente do logótipo principal, mais versões a uma cor, branca e preta, para fotografias e gradientes.

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](https://gradiently.design/pt-pt/guide/logo-on-gradient-background) explica as soluções.

## Cores, tipos de letra e o resto do essencial

- Azul-noite: #0e1424
- Farinha: #f3e6d0
- Brilho do forno: #e0823d
- Côdea: #6b4a2f

As cores de um kit precisam de nomes e de códigos. As pessoas lembram-se de “brilho do forno”; ninguém se 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%);
}
```

Põe um ficheiro de cores no kit para quem constrói o teu site. Poupa uma ronda de adivinhação a partir de capturas de ecrã.

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](https://fonts.google.com); 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](https://gradiently.design/pt-pt/guide/brand-fonts) 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

Seis tamanhos que cobrem a maioria das marcas pequenas. Cria o fundo para cada formato em vez de recortar uma só imagem.

## Uma estrutura de pastas do kit de marca que se mantém arrumada

```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)
```

As pastas numeradas mantêm a ordem, um único ficheiro de leitura fica no topo e os ficheiros antigos vão para um arquivo em vez de ficarem ao lado dos novos.

### 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](https://gradiently.design/pt-pt/guide/brand-consistency) 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](https://gradiently.design/pt-pt/guide/brand-kit-setup) percorre o processo.

## FAQ

### 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.