# Variações de logo: principal, empilhado, ícone e monocromático

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

Um logo só não cabe num banner largo, num círculo minúsculo e num carimbo. Uma pequena família de variações de logo cabe. Este é o conjunto de que a maioria das marcas precisa, e as regras que fazem tudo parecer um logo só.

## The short version

- Variações de logo são arranjos e colorações diferentes do mesmo logo, feitos para que ele caiba em todos os espaços onde aparece.
- Um conjunto típico inclui o logo principal, uma versão horizontal, uma versão empilhada, um ícone ou submarca e versões de uma cor em preto e branco.
- Todas as variações devem compartilhar as mesmas letras, o mesmo símbolo e as mesmas cores, para que sejam lidas como um logo só e não como vários.
- O ícone ou submarca é a versão usada em fotos de perfil, favicons e outros espaços quadrados pequenos.
- Registre qual variação vai em cada lugar, para que ninguém precise adivinhar ou esticar o logo principal para caber.

**Variações de logo** são as diferentes versões de um mesmo logo, organizadas e coloridas para servir a espaços diferentes. A maioria das marcas precisa de cinco: um logo principal, uma assinatura horizontal para espaços largos, uma versão empilhada para espaços quadrados, um ícone ou submarca para espaços minúsculos e versões de uma cor em preto e branco. Feitas com as mesmas peças, elas deixam o logo certo num banner, numa foto de perfil e num carimbo de uma tinta, sem nunca esticar ou achatar.

## Por que um logo só não basta

Um logo criado para a fachada de uma loja costuma ser largo demais para uma foto de perfil e detalhado demais para um favicon. Quando existe um único arquivo, as pessoas improvisam: encolhem até ficar ilegível, achatam para caber ou colocam sobre um fundo onde ele some. As variações resolvem isso de antemão. Você decide uma vez como o logo se adapta, e todo mundo segue a mesma resposta.

## As cinco variações de logo de que a maioria das marcas precisa

| Variação | O que é | Use para |
| --- | --- | --- |
| Principal | O logo completo como foi criado, geralmente símbolo mais nome | Cabeçalho do site, sinalização, primeira página de documentos |
| Horizontal | Símbolo à esquerda do nome, numa linha só | Banners, cabeçalhos de e-mail, barras de navegação estreitas |
| Empilhada | Símbolo acima do nome, centralizado | Posts quadrados, rótulos de embalagem, produtos promocionais |
| Ícone ou submarca | O símbolo ou as iniciais sozinhos | Fotos de perfil, favicons, ícones de app, marcas d’água, adesivos |
| Uma cor | Qualquer uma das anteriores em preto ou branco sólido | Impressão em uma tinta, fotos, relevo, carimbos, fundos escuros ou carregados |

Seu logo principal talvez já seja horizontal ou empilhado. Nesse caso, você precisa do outro arranjo, além do ícone e das versões de uma cor.

Algumas marcas acrescentam uma versão **só com o logotipo**, o nome sem o símbolo, para lugares onde o símbolo ficaria pequeno demais para ler. E uma versão em **selo** ou emblema pode ser útil para adesivos e lacres de embalagem. Nenhuma delas é essencial no primeiro dia.

## Cada variação no espaço certo

O formato do espaço decide a variação. Espaços largos pedem a assinatura horizontal, espaços quadrados pedem a versão empilhada ou o ícone, e tudo que for menor que uma miniatura recebe só o ícone.

- Cabeçalho de e-mail 1200×600: horizontal: 1200 × 600
- Instagram quadrado 1080×1080: empilhada: 1080 × 1080
- Story 1080×1920: empilhada ou ícone: 1080 × 1920
- Banner do LinkedIn 1584×396: horizontal: 1584 × 396

O formato da tela diz qual versão usar. Um logo empilhado num banner fino desperdiça quase todo o espaço; um horizontal num quadrado fica minúsculo.

Um cabeçalho de e-mail largo com o nome Fern Studio numa linha e uma frase curta sobre novidades, sobre um gradiente verde

Num cabeçalho de e-mail largo, o nome corre numa linha só e o espaço se lê com naturalidade.

Um post quadrado do Instagram com a palavra Studio acima de um Fern grande, empilhados e centralizados sobre o mesmo gradiente verde

Num quadrado, o arranjo empilhado preenche o quadro e continua grande o bastante para ler.

## Variações de cor: colorida, invertida e monocromática

Cada arranjo também precisa de versões de cor. Você não precisa de todas as combinações, mas precisa destas quatro, para que o logo tenha uma resposta para fundos claros, fundos escuros e impressão em uma tinta.

- Colorida sobre claro: #14532d
- Invertida sobre escuro: #f7f3ea
- Mono preto: #111111
- Mono branco: #ffffff

Verde Fern para o dia a dia, uma versão cor de papel quente para fundos escuros, e preto e branco puros para carimbos, fotos e trabalhos em uma tinta.

Sobre gradientes e fotos, a versão de uma cor em branco ou preto costuma ser a escolha certa, porque um logo de duas cores pode brigar com o que está atrás. [Logo sobre fundo em gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background) mostra como escolher entre elas, e [ideias de fundo para logo](https://gradiently.design/pt-br/guide/logo-background-ideas) traz fundos que combinam com um logo simples.

## Como montar um conjunto de variações de logo

1. **Comece pelo logo principal em vetor** Toda variação é rearranjada a partir das mesmas peças mestras. Nunca redesenhe o símbolo nem recomponha o nome com outro peso.
2. **Crie as assinaturas horizontal e empilhada** Mova o símbolo para o lado ou para cima do nome. Fixe o espaço entre eles como uma medida, por exemplo a altura das maiúsculas do nome.
3. **Simplifique o ícone** Pegue o símbolo ou as iniciais sozinhos, tire os detalhes finos e engrosse as linhas finas. Ele precisa ser legível em tamanhos muito pequenos, então teste como [favicon](https://gradiently.design/pt-br/guide/favicon-design).
4. **Crie as versões de cor** Colorida, invertida, preta e branca para cada arranjo. Confira a versão invertida sobre a cor mais escura da sua marca.
5. **Defina área de respiro e tamanhos mínimos** Defina a margem vazia em volta de cada versão e o menor tamanho em que ela pode ser usada, em pixels para telas e milímetros para impressão.
6. **Exporte e nomeie os arquivos com clareza** SVG, PDF e PNG transparente para cada um, com nomes como `fern-stacked-reversed.svg`, para que as pessoas escolham o certo sem abrir.

## Regras para que as variações pareçam um logo só

### Evite

- Esticar ou achatar uma versão para caber num espaço
- Redesenhar o ícone de um jeito diferente para cada plataforma
- Cores novas que só aparecem numa variação
- Colocar slogan em algumas versões e em outras não, ao acaso
- Usar o logo principal onde o ícone é que deveria estar

### Faça

- Escolha a variação cujo formato combina com o espaço
- Um ícone só, usado em todo lugar que pede um quadrado pequeno
- A mesma paleta em todo o conjunto
- Trate uma assinatura com slogan como uma variação própria e documentada
- Respeite a área de respiro e os tamanhos mínimos

Documente o conjunto numa única página do seu [guia de estilo da marca](https://gradiently.design/pt-br/guide/brand-style-guide): cada variação, suas versões de cor, área de respiro, tamanho mínimo e onde é usada. Depois coloque os arquivos onde as pessoas realmente criam. No Gradiently, o kit de marca guarda vários logos lado a lado, então a versão empilhada, o ícone e o arquivo invertido ficam a um clique no Studio, e o Designer pode aplicar o kit ao montar um design. [Kit de marca](https://gradiently.design/pt-br/guide/brand-kit) cobre o resto do que deve ficar junto deles.

## FAQ

### O que são variações de logo?

São versões alternativas de um mesmo logo, como horizontal, empilhada, ícone e de uma cor, feitas para que o logo caiba em qualquer espaço sem distorcer.

### Quantas variações de logo eu preciso?

A maioria das marcas precisa de umas cinco: principal, horizontal, empilhada, um ícone ou submarca, e versões em preto e branco. Acrescente outras só quando um uso real pedir.

### O que é uma submarca de logo?

Uma submarca é uma versão simplificada e geralmente compacta do logo, muitas vezes as iniciais ou o símbolo sozinho, usada em espaços pequenos como fotos de perfil, favicons e adesivos.

### O que é um logo responsivo?

Um logo responsivo é um conjunto de variações que se simplificam conforme o espaço diminui, da assinatura completa em telas grandes até só o ícone nos menores tamanhos.

### Qual variação de logo devo usar na foto de perfil?

Use o ícone ou a submarca, ou a versão empilhada se for curta, sobre um fundo quadrado. Logos horizontais largos ficam ilegíveis num círculo pequeno.