# Textura de marca: a qualidade material que faz um visual ser teu

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

A cor e o tipo de letra copiam-se com facilidade. A textura, o grão, o brilho e a luz de uma superfície, é bem mais difícil de copiar e fala muito mais pela marca do que parece.

## The short version

- A textura de marca é a qualidade material das superfícies de uma marca, como o grão, a textura de papel, o brilho vítreo ou a luz suave.
- A textura muda a sensação de uma cor: o mesmo violeta lê-se como película sobre grão, como tecnologia sobre vidro e como 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 suficiente para ficar por trás das palavras e consistente o suficiente para ser reconhecida em todos os formatos.
- O grão também esconde as faixas de cor, por isso melhora a qualidade além do carácter.

A **textura de marca** é a qualidade material de tudo o que uma marca põe numa superfície: o grão num fundo, a textura de um papel, o brilho do vidro, a direção e a suavidade da luz. É a diferença entre uma cor num ecrã e uma cor em alguma coisa. Duas marcas podem partilhar uma paleta e um tipo de letra, mas se uma assenta num fino grão de película e a outra num vidro limpo, ninguém as confundirá.

A textura é também uma das poucas partes de um visual que resiste à cópia. Qualquer pessoa lê os teus códigos hex numa captura de ecrã. Reproduzir o teu grão exato, o tamanho, a densidade, a forma como a luz cai sobre ele, é muito mais difícil, o que a torna uma forte candidata à assinatura da tua [identidade visual](https://gradiently.design/pt-pt/guide/visual-identity).

## O que a textura faz a uma marca

A textura transmite associações que as pessoas apanham de imediato, muito antes de lerem uma palavra. Responde a perguntas como: isto é feito à mão ou projetado, quente ou frio, de todos os dias ou especial?

| Família de textura | Lê-se como | Serve |
| --- | --- | --- |
| Grão fino de película | Analógico, editorial, ponderado | Estúdios, editoras, fotógrafos, música |
| Textura de papel | Artesanal, impresso, calmo | Artesãos, padarias, papelaria, bem-estar |
| Brilho vítreo | Preciso, digital, moderno | Software, fintech, lançamentos de produto |
| Luz de seda ou cetim | Suave, caro, sensual | Beleza, joalharia, moda, hotéis |
| Cor lisa limpa | Direto, gráfico, ousado | Campanhas, desporto, marcas jovens |

Cinco famílias de textura comuns e a sensação que cada uma traz. A cor lisa também é uma escolha de textura: a ausência de material diz alguma coisa.

Nenhuma destas é melhor do que outra. O que importa é que a textura condiga com o que dizes de ti. Uma marca que fala de ofício lento e publica em vidro brilhante envia uma mensagem contraditória. A [personalidade de marca](https://gradiently.design/pt-pt/guide/brand-personality) é um bom ponto de partida se não tens a certeza do que a tua deve dizer.

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

A maioria das texturas que parecem ricas é construída com três camadas. Pensar nelas em separado faz da textura algo que podes desenhar de propósito, em vez de um filtro aplicado no fim.

1. **Material** O comportamento de base da superfície: como a cor flui sobre ela. Misturas suaves, dobras macias, formas líquidas ou facetas nítidas.
2. **Luz** De onde vem e com que força. Uma luz suave vinda de um canto dá profundidade; a iluminação uniforme parece plana e digital.
3. **Grão** O ruído fino por cima. Um pouco faz a superfície parecer real e esconde as faixas; demasiado parece sujo e luta com as palavras.

- Uniforme, sem fonte de luz: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Luz suave, em cima à direita: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Luz quente, em baixo à 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 muda o ambiente antes de se acrescentar qualquer grão.

Para a camada de grão na web, basta um pequeno ruído SVG por cima do fundo. Mantém a opacidade baixa; queres senti-lo mais do que vê-lo.

```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 gradiente iluminado com uma camada de ruído fino por cima. Aumenta `baseFrequency` para um grão mais fino, baixa `opacity` para um mais discreto.

[Gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) tem mais receitas de grão, e [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica porque é que o ruído é também a solução habitual para listas visíveis em misturas suaves.

## Como escolher a tua textura de marca

- **Parte de uma palavra.** Escreve a única sensação que queres que as pessoas tenham, como “artesanal” ou “preciso”, e escolhe a família que lhe corresponde.
- **Testa-a por trás de palavras.** A textura vive sob títulos, preços e datas. Se os torna mais difíceis de ler no tamanho de um telemóvel, é demasiado forte.
- **Verifica nos dois extremos.** Vê-a num story de 1080×1920 e num cartão de visita de 1050×600. Um grão que fica bem em grande pode virar papa em pequeno.
- **Verifica em impressão.** Um grão que canta num ecrã pode parecer uma falha de impressão em papel. Imprime um folheto A5 antes de te comprometeres.

Uma publicação vertical de padaria com o texto Pão de massa-mãe todas as manhãs, sobre um fundo de textura suave

Uma superfície mais suave para uma padaria: o material pode dizer feito à mão antes das palavras.

Uma publicação vertical de fintech com o texto Pagamentos liquidados em segundos, sobre outro fundo texturado

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

## Erros que fazem a textura parecer barata

### Evita

- Uma fotografia de papel de banco de imagens colada por baixo de tudo
- Grão pesado que faz as letras ficarem desfocadas
- Uma textura diferente em cada plataforma
- Textura por trás das palavras, lisa em todo o lado
- Ampliar uma imagem texturada para todos os tamanhos

### Faz

- Uma textura construída com material, luz e grão
- Grão fino o suficiente para se sentir, não para se notar
- Uma superfície em feed, site e impressão
- A mesma superfície em cada quadro
- Desenha a textura de novo a cada tamanho

O último ponto apanha muitas marcas de surpresa. Quando uma imagem texturada é esticada de uma publicação quadrada para um banner largo, o grão estica também e a luz cai em sítios estranhos. Uma textura deve ser desenhada ao tamanho em que é usada, o que também se aborda em [textura de fundo](https://gradiently.design/pt-pt/guide/background-texture).

## Fazer de uma textura a tua

Uma sobreposição de ruído gratuita está disponível para todos, e esse é exatamente o problema: quanto mais popular uma textura se torna, menos diz sobre ti. Para uma textura poder ser tua, tem de ser uma combinação específica que mais ninguém use.

É para isso que um Mark da Gradiently foi construído. Cada Mark é uma receita de cores, até três materiais sobrepostos, luz, grão e movimento, e cada um é verificado contra todos os outros para que não haja dois iguais. Desenha-se em direto a cada tamanho em que crias, por isso o grão e a luz assentam sempre bem, e suaviza o detalhe por trás das tuas palavras para os títulos continuarem legíveis. Quando reservas um Mark, só tu podes exportar com ele. [Materiais de gradiente](https://gradiently.design/pt-pt/guide/mark-materials-explained) explica as camadas de material com mais pormenor.

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

## FAQ

### O que é a textura em branding?

É a qualidade material das superfícies visuais de uma marca, como o grão, o papel, o brilho ou a luz, que molda a forma como cores e palavras são sentidas.

### O grão ajuda ou prejudica a legibilidade?

Um grão fino e de baixa opacidade normalmente não prejudica e muitas vezes ajuda, ao esconder as faixas. Um grão pesado por trás de letra pequena deixa as letras desfocadas, por isso mantém-no subtil onde estão as palavras.

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

Sim. Uma textura consistente usada em todas as superfícies torna-se reconhecível por si só, tal como uma cor ou um tipo de letra.

### Como acrescento grão a um gradiente em CSS?

Sobrepõe uma pequena imagem de ruído SVG ao gradiente com um pseudoelemento, com cerca de 10 a 15 por cento de opacidade e uma mistura em overlay.