# Textura de marca: a qualidade material que torna um visual só seu

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

Cor e tipografia são fáceis de copiar. A textura, ou seja, a granulação, o brilho e a luz de uma superfície, é muito mais difícil de imitar e comunica muito mais do que parece.

## The short version

- Textura de marca é a qualidade material das superfícies de uma marca, como granulação, textura de papel, brilho vítreo ou luz suave.
- A textura muda a sensação de uma cor: o mesmo violeta parece filme sobre granulação, tecnologia sobre vidro e luxo sobre seda.
- Uma textura é mais difícil de copiar do que um código hex, porque é uma combinação de material, luz e escala, e não um único valor.
- Uma boa textura de marca é discreta o bastante para ficar atrás das palavras e consistente o bastante para ser reconhecida em todos os formatos.
- A granulação também esconde o banding de cores, então melhora a qualidade além de dar personalidade.

**Textura de marca** é a qualidade material de tudo o que uma marca coloca numa superfície: a granulação de um fundo, a textura de um papel, o brilho do vidro, a direção e a suavidade da luz. É a diferença entre uma cor numa tela e uma cor sobre alguma coisa. Duas marcas podem ter a mesma paleta e a mesma fonte, mas se uma estiver sobre granulação fina de filme e a outra sobre vidro limpo, ninguém vai confundi-las.

A textura também é uma das poucas partes de um visual que resistem à cópia. Qualquer pessoa consegue ler os seus códigos hex num print. Reproduzir a sua granulação exata, o tamanho, a densidade, o jeito como a luz cai sobre ela, é muito mais difícil, o que a torna uma forte candidata a assinatura da sua [identidade visual](https://gradiently.design/pt-br/guide/visual-identity).

## O que a textura faz por uma marca

A textura carrega associações que as pessoas captam na hora, muito antes de lerem uma palavra. Ela responde a perguntas como: isto é artesanal ou industrial, quente ou frio, do dia a dia ou especial?

| Família de textura | Passa a ideia de | Combina com |
| --- | --- | --- |
| Granulação fina de filme | Analógico, editorial, cuidadoso | Estúdios, editoras, fotógrafos, música |
| Textura de papel | Artesanal, impresso, calmo | Artesãos, padarias, papelarias, bem-estar |
| Brilho vítreo | Preciso, digital, moderno | Software, fintechs, lançamentos de produto |
| Luz de seda ou cetim | Suave, caro, sensual | Beleza, joias, moda, hotéis |
| Cor chapada e limpa | Direto, gráfico, ousado | Campanhas, esporte, marcas jovens |

Cinco famílias comuns de textura e a sensação que cada uma traz. Cor chapada também é uma escolha de textura: a ausência de material diz algo.

Nenhuma é melhor que a outra. O que importa é que a textura concorde com o que você diz sobre si. Uma marca que fala de artesanato sem pressa e posta sobre vidro brilhante manda uma mensagem confusa. [Personalidade de marca](https://gradiently.design/pt-br/guide/brand-personality) é um bom ponto de partida se você não tem certeza do que a sua deve dizer.

## Granulação, material e luz: as três camadas

A maioria das texturas que parecem ricas é construída em três camadas. Pensar nelas separadamente transforma a textura em algo que você projeta de propósito, e não num filtro aplicado no final.

1. **Material** O comportamento básico da superfície: como a cor flui por ela. Misturas suaves, dobras macias, formas líquidas ou facetas nítidas.
2. **Luz** De onde ela vem e quão forte é. Uma luz suave vinda de um canto dá profundidade; uma iluminação uniforme parece chapada e digital.
3. **Granulação** O ruído fino por cima. Um pouco faz a superfície parecer real e esconde o banding; demais parece sujo e briga com as palavras.

- Uniforme, sem fonte de luz: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Luz suave, canto superior direito: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Luz quente, embaixo à esquerda: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Uma família de cores sob três tipos de luz. Só a luz já muda o clima antes de qualquer granulação.

Para a camada de granulação na web, um pequeno ruído em SVG sobre o fundo basta. Mantenha a opacidade baixa; a ideia é sentir mais do que ver.

```css
.brand-surface {
  position: relative;
  background: radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%);
}

.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Um degradê iluminado com uma camada fina de ruído por cima. Aumente `baseFrequency` para uma granulação mais fina e reduza `opacity` para uma mais discreta.

[Degradês granulados](https://gradiently.design/pt-br/guide/grainy-gradients) traz mais receitas de granulação, e [banding em degradês](https://gradiently.design/pt-br/guide/gradient-banding) explica por que o ruído também é a solução padrão para faixas visíveis em misturas suaves.

## Como escolher a textura da sua marca

- **Comece por uma palavra.** Escreva a única sensação que você quer que as pessoas tenham, como “artesanal” ou “preciso”, e escolha a família que combina com ela.
- **Teste atrás das palavras.** A textura vive embaixo de títulos, preços e datas. Se ela dificulta a leitura no tamanho de um celular, está forte demais.
- **Confira nos dois extremos.** Veja num story de 1080×1920 e num cartão de visita de 1050×600. Uma granulação que fica certa em tamanho grande pode virar borrão em tamanho pequeno.
- **Confira no impresso.** Uma granulação que brilha na tela pode parecer defeito de impressão no papel. Imprima um flyer A5 antes de se comprometer.

Um post vertical de padaria com a frase Pão de fermentação natural, toda manhã, sobre um fundo de textura suave

Uma superfície mais suave para uma padaria: o material pode dizer artesanal antes das palavras.

Um post vertical de fintech com a frase Pagamentos liquidados em segundos, sobre outro fundo texturizado

Outro Mark para um produto de fintech. Mesmo layout, uma marca completamente diferente.

## Erros que deixam a textura com cara de barata

### Evite

- Uma foto de papel de banco de imagens colada embaixo de tudo
- Granulação pesada que deixa o texto borrado
- Uma textura diferente em cada plataforma
- Textura atrás das palavras e chapado no resto
- Escalar uma imagem texturizada para todos os tamanhos

### Faça

- Uma textura construída com material, luz e granulação
- Granulação fina o bastante para sentir, não para notar
- Uma superfície no feed, no site e no impresso
- A mesma superfície em todos os quadros
- Renderizar a textura do zero em cada tamanho

O último ponto pega muitas marcas de surpresa. Quando uma imagem texturizada é esticada de um post quadrado para um banner largo, a granulação estica junto e a luz cai num lugar estranho. Uma textura deve ser renderizada no tamanho em que é usada, o que também está em [textura de fundo](https://gradiently.design/pt-br/guide/background-texture).

## Tornando uma textura sua

Uma sobreposição de ruído gratuita está disponível para todo mundo, e é justamente esse o problema: quanto mais popular uma textura fica, menos ela diz sobre você. Para que uma textura seja só sua, ela precisa ser uma combinação específica que ninguém mais está usando.

É para isso que existe um Mark do Gradiently. Cada Mark é uma receita de cores, até três materiais sobrepostos, luz, granulação e movimento, e cada um é comparado com todos os outros para que nenhum seja parecido com outro. Ele é renderizado ao vivo em cada tamanho em que você cria, então a granulação e a luz sempre ficam certas, e suaviza os detalhes atrás das suas palavras para que os títulos continuem legíveis. Quando você reserva um Mark, só você pode exportar com ele. [Materiais dos degradês](https://gradiently.design/pt-br/guide/mark-materials-explained) explica as camadas de material em mais detalhes.

Um Mark é textura como ativo de marca: material, luz e granulação numa receita, com um dono por vez.

## FAQ

### O que é textura no branding?

É a qualidade material das superfícies visuais de uma marca, como granulação, papel, brilho ou luz, que molda a sensação das cores e das palavras.

### A textura granulada ajuda ou atrapalha a leitura?

Uma granulação fina e de baixa opacidade normalmente não atrapalha e muitas vezes ajuda, porque esconde o banding. Granulação pesada atrás de texto pequeno deixa as letras borradas, então mantenha discreta onde ficam as palavras.

### A textura pode fazer parte da identidade de marca?

Sim. Uma textura consistente usada em todas as superfícies se torna reconhecível por si só, da mesma forma que uma cor ou uma fonte.

### Como adicionar granulação a um degradê em CSS?

Coloque uma pequena imagem de ruído em SVG sobre o degradê com um pseudoelemento, com cerca de 10 a 15 por cento de opacidade e mesclagem overlay.