# Gradiente de marca: faz dele a tua assinatura

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

Há marcas que se reconhecem por um canto de cor antes de se ver o logótipo. Nunca é acaso. Eis como construir um gradiente de marca que funcione como assinatura e não como decoração.

## The short version

- Um gradiente de marca só funciona como assinatura quando é distintivo, especificado com rigor e usado da mesma maneira em todos os pontos de contacto.
- Uma especificação completa de gradiente de marca cobre a cor de fundo, a família de cores, a origem da luz, a textura da superfície, o grão e qualquer movimento.
- Todo o gradiente de marca precisa de uma alternativa em cor lisa para tamanhos pequenos, impressão a uma cor e bordado.
- O reconhecimento nasce da repetição, por isso um gradiente assinatura deve aparecer no mesmo papel e em quantidade semelhante em publicações, apresentações e embalagens.
- Os gradientes são difíceis de proteger legalmente, e é por isso que a distinção e o uso consistente contam mais do que qualquer escolha de cor.

Um **gradiente de marca** torna-se assinatura quando se cumprem três condições: não se parece com o de mais ninguém, está especificado com rigor suficiente para que todos os designers o reproduzam da mesma forma e aparece sempre no mesmo papel. A maioria dos gradientes de marca falha o primeiro teste porque parte de uma predefinição popular, e os restantes falham o segundo porque vivem como uma imagem exportada em vez de uma receita. Constrói o ativo com intenção e ele pode fazer o trabalho de um logótipo à distância de uma sala.

## O que separa uma assinatura de um gradiente bonito

### Decoração

- Do violeta ao rosa, porque ficava bem
- Refeito a olho em cada design
- O ângulo e as cores variam consoante o designer
- Usado em todo o lado, por isso não significa nada
- Parte-se no tamanho de favicon e na impressão a uma cor

### Assinatura

- Um território de cor que os concorrentes não usam
- Uma receita escrita, guardada como tokens
- A luz vem sempre do mesmo sítio
- Reservado para momentos definidos, para ser notado
- Tem uma alternativa lisa planeada

O argumento mais amplo para ter ativos visuais próprios está em [ativos de marca distintivos](https://gradiently.design/pt-pt/guide/distinctive-brand-assets). Este artigo trata da construção prática.

## Como criar um gradiente de marca, passo a passo

1. **Mapeia a categoria** Tira capturas de ecrã dos feeds, sites e embalagens de dez concorrentes e põe-nas lado a lado. Anota que tons e misturas aparecem sempre. O teu gradiente deve viver onde essa parede está vazia.
2. **Escolhe um fundo** Decide primeiro entre escuro e claro. Um fundo profundo faz a cor brilhar e parece premium; um branco quente parece impresso e calmo. O fundo carrega mais o ambiente do que o destaque.
3. **Escolhe uma família pequena** Três a cinco cores aparentadas e, no máximo, um destaque. Vizinhas próximas misturam-se bem; opostas ficam cinzentas, como explicam os [gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients).
4. **Decide de onde vem a luz** Um brilho baixo num canto, uma faixa no topo, uma mancha atrás do centro. Fixar a fonte de luz é o que torna o gradiente reconhecível quando é cortado.
5. **Acrescenta uma superfície** Grão, papel, seda ou vidro. Um material separa o teu gradiente de uma predefinição de ecrã. [Textura de gradiente](https://gradiently.design/pt-pt/guide/gradient-texture) compara as opções.
6. **Testa o reconhecimento** Faz cinco designs, tapa os logótipos e mostra-os a alguém que conheça a marca. Se a conseguir nomear só pela cor, está a funcionar.

Luz de cobre sobre verde-azulado profundo: `radial-gradient(circle at 20% 85%, #f59e0b 0%, #b45309 18%, #134e4a 55%, #042f2e 100%)`

Um exemplo de assinatura: um fundo verde-azulado profundo iluminado a cobre a partir do canto inferior esquerdo. O verde-azulado e o cobre têm um calor próximo, o suficiente para se misturarem por castanho e não por cinzento, e a luz do canto é o que as pessoas recordam.

## Escreve a receita, não só as cores

Os códigos hex sozinhos não definem um gradiente. Dois designers com as mesmas quatro cores produzem dois resultados diferentes, porque as posições das paragens, a direção e a textura é que guardam o carácter. Escreve uma especificação que alguém novo consiga seguir sem te perguntar nada.

| Parte | Exemplo de especificação |
| --- | --- |
| Fundo | Verde-azulado profundo `#042f2e`, pelo menos metade da área |
| Família | `#134e4a` verde-azulado, `#b45309` cobre, `#f59e0b` âmbar |
| Luz | Radial, centrada em baixo à esquerda, nunca atrás do título |
| Paragens | 0%, 18%, 55%, 100% |
| Superfície | Grão monocromático fino, apenas visível a tamanho real |
| Movimento | A luz desloca-se devagar ao longo da margem inferior; em loop |
| Alternativa | Verde-azulado profundo liso com o cobre como único destaque |

Uma especificação de gradiente de marca numa página. Põe-na no [guia de estilo da marca](https://gradiently.design/pt-pt/guide/brand-style-guide) e guarda os valores como código.

## Planeia a alternativa lisa

Um gradiente desaparece no tamanho de favicon, na impressão a uma cor, no bordado e em alguns clientes de email. Escolhe agora as versões lisas em vez de deixares cada fornecedor adivinhar. Normalmente é a cor de fundo como cor lisa principal e a cor de luz mais viva como único destaque.

- Fundo, lisa principal: #042f2e
- Luz, lisa de destaque: #f59e0b
- Verde-azulado, secundária: #134e4a
- Papel, para texto: #fdf6ec

A paleta lisa que substitui o gradiente num favicon, num carimbo, num uniforme ou num email só de texto.

## Usa-o no mesmo papel em todo o lado

O reconhecimento constrói-se pela repetição num papel consistente. Decide onde o gradiente de marca aparece: talvez capas, lançamentos e o topo de cada apresentação, com as cores lisas a fazer o trabalho diário. Uma assinatura usada em tudo vira papel de parede. [Consistência de marca](https://gradiently.design/pt-pt/guide/brand-consistency) tem mais sobre regras que as equipas realmente seguem.

- Story 1080×1920: 1080 × 1920
- Publicação 1080×1350: 1080 × 1350
- Banner LinkedIn 1584×396: 1584 × 396
- Diapositivo 1920×1080: 1920 × 1080
- Cartão de visita 1050×600: 1050 × 600

Cinco pontos de contacto com formas muito diferentes. A luz do canto tem de cair no mesmo lugar relativo em cada um, o que significa desenhar o gradiente por formato em vez de cortar uma imagem.

## Proteger um gradiente de marca

As cores e os gradientes são difíceis de proteger por via legal, e os detalhes dependem do país e de um uso longo e comprovado; [podes registar um gradiente com direitos de autor](https://gradiently.design/pt-pt/guide/can-you-copyright-a-gradient) apresenta o panorama geral sem aconselhamento jurídico. Na prática, a proteção que a maioria das marcas tem é distinção mais consistência: um visual tão ligado a ti que copiá-lo só faria as pessoas lembrarem-se de ti.

A Gradiently foi criada para esta lacuna. Um Mark é uma receita acabada de cores, materiais, luz, grão e movimento, verificada contra todos os outros Marks para que nada demasiado próximo seja aceite, e tem exatamente um dono de cada vez. Reservar um coloca o teu nome no seu registo público com um certificado numerado, e só tu podes exportar designs com ele. É um registo, não uma marca registada, mas significa que a tua assinatura não pode aparecer no feed de um concorrente feita com a mesma ferramenta.

Uma publicação vertical com uma única linha curta sobre um fundo de gradiente iluminado e distintivo

Um gradiente de marca a fazer o seu trabalho: a cor e a luz carregam a identidade, por isso as palavras podem ficar curtas.

## FAQ

### O que é um gradiente de marca?

Um gradiente que uma marca usa de forma consistente como parte da identidade, especificado com rigor para poder ser reproduzido da mesma forma em todo o lado.

### Como crio um gradiente assinatura para a minha marca?

Encontra um território de cor que os concorrentes não usem, escolhe um fundo e uma pequena família de cores, fixa de onde vem a luz, acrescenta uma textura de superfície e testa se as pessoas o reconhecem sem o logótipo.

### O que devem incluir as diretrizes de gradiente de marca?

A cor de fundo, a família de cores com códigos hex, as posições das paragens, a direção da luz, a textura, qualquer movimento e uma alternativa em cor lisa.

### Posso registar o meu gradiente de marca como marca comercial?

Proteger cores e gradientes por via legal é difícil e depende do país e do uso comprovado, por isso consulta um advogado de marcas. O uso distintivo e consistente é a proteção em que a maioria das marcas se apoia.

### Um gradiente de marca precisa de uma versão lisa?

Sim. Favicons, impressão a uma cor, bordado e alguns clientes de email não conseguem mostrar um gradiente, por isso planeia cores lisas com antecedência.