# Voz de marca e visuais: faça o seu visual soar como você

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

Uma mensagem calma em um visual barulhento soa falsa, e as pessoas percebem antes de saber explicar por quê. Aqui está um mapa prático de como você soa para como você aparece.

## The short version

- A voz da marca é como ela soa em palavras; seus visuais devem expressar o mesmo caráter em cor, tipografia, textura, movimento e layout.
- Quando voz e visuais discordam, como uma mensagem gentil em um visual de neon berrante, as pessoas sentem o descompasso mesmo sem saber nomeá-lo.
- Cada traço de voz se traduz em escolhas visuais concretas: calma sugere contraste suave e movimento lento, ousadia sugere alto contraste e tipografia pesada.
- Escreva cada traço de voz como “isto, não aquilo”, para que as escolhas visuais tenham um limite além de uma direção.
- O movimento também tem voz: a velocidade e a suavização de uma animação podem soar calmas, ousadas, brincalhonas ou precisas.

A **voz da sua marca** é como ela soa em palavras: calma ou ousada, brincalhona ou precisa, calorosa ou fria. Seus visuais devem dizer exatamente a mesma coisa em cor, tipografia, textura, movimento e layout. O jeito prático de chegar lá é pegar cada traço de voz e relacioná-lo a escolhas visuais específicas, depois conferir cada design com esse mapa. Quando os dois concordam, um post parece sincero antes de alguém ler.

A maioria das marcas define a voz para quem escreve e o visual para quem projeta, separadamente. É assim que você acaba com uma legenda gentil e tranquilizadora sobre um fundo de neon aos gritos. Este guia junta os dois. Se você ainda não definiu o seu caráter, comece pela [personalidade da marca](https://gradiently.design/pt-br/guide/brand-personality).

## Por que a voz da marca e os visuais precisam concordar

As pessoas absorvem o visual de um post antes das palavras. O visual cria uma expectativa, e as palavras a confirmam ou a contradizem. Uma contradição nem sempre é percebida de forma consciente; ela só deixa a marca com uma sensação levemente estranha, como um amigo cujo tom não combina com o que ele está dizendo.

### Voz e visual discordam

- Uma marca discreta e ponderada em neon saturado, com animação saltitante
- Uma marca brincalhona em cinza, tipografia fina e grades rígidas
- Uma marca precisa e técnica com fontes desenhadas à mão e desfoques suaves
- Uma marca calorosa e local em azul frio e fotos corporativas de banco de imagens

### Voz e visual concordam

- A mesma marca discreta em neutros profundos, uma serifa fina e deslocamento lento
- A marca brincalhona em combinações vivas e inesperadas e tipografia arredondada
- A marca técnica em uma sem serifa limpa, contraste nítido e espaçamento exato
- A marca calorosa em tons terrosos, textura de papel e rostos reais

## Um mapa dos traços de voz para as escolhas visuais

Use esta tabela como ponto de partida, não como lei. A maioria das marcas mistura dois ou três traços; escolha o dominante para a cor e deixe os outros moldarem a tipografia e o movimento.

| Traço de voz | Cor | Tipografia | Textura e movimento | Layout |
| --- | --- | --- | --- | --- |
| Calma | Contraste suave, matizes próximos, tons apagados | Pesos leves ou regulares, espaçamento aberto | Grão fino, deslocamento lento | Muito espaço, poucos elementos |
| Ousada | Alto contraste, saturada, poucas cores | Pesos fortes, tamanhos grandes, espaçamento justo | Superfícies nítidas, cortes rápidos | Tipografia grande, de ponta a ponta |
| Brincalhona | Combinações inesperadas, pastéis vivos | Formas arredondadas, tamanhos variados | Materiais macios, suavização saltitante | Solto, um pouco fora da grade |
| Precisa | Contida, um destaque claro | Sem serifa limpa, ritmo regular | Lisa, textura mínima, tempo exato | Grade rígida, bordas alinhadas |
| Calorosa | Tons terrosos e ensolarados | Serifa simpática ou sem serifa humanista | Papel, grão, luz do dia | Margens generosas, fotos de pessoas |

Um traço costuma liderar. Os outros ajustam os detalhes.

## Quatro vozes, quatro visuais

Aqui estão os mesmos tipos de escolha feitos para quatro vozes diferentes. Repare como só a cor já diz muito, antes de qualquer palavra.

- Calma: névoa a azul suave: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Ousada: vermelho-laranja a amarelo: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Brincalhona: rosa, manteiga, menta: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Precisa: tinta a azul-marinho profundo: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

A cor define a voz primeiro. Para saber mais sobre o que as cores sugerem, veja [psicologia das cores](https://gradiently.design/pt-br/guide/color-psychology).

Um post vertical com as palavras Sem pressa pequenas e leves sobre um fundo tranquilo com muito espaço

Calma: uma linha curta, peso leve, a maior parte do quadro vazia.

Um post vertical com a palavra Agora em tamanho muito grande sobre um fundo vívido

Ousada: uma palavra enorme, nada mais competindo com ela.

Um post quadrado perguntando O que você criaria? em um layout simpático sobre um fundo vivo

Brincalhona: uma pergunta, um convite, um toque mais leve.

Um post quadrado com o título Três mudanças nesta semana e uma lista organizada e alinhada sobre um fundo contido

Precisa: uma lista, bordas alinhadas, nenhuma decoração que não seja informação.

## Como encontrar sua voz visual

1. **Escreva seus traços como “isto, não aquilo”** “Confiante, não arrogante.” “Calorosa, não melosa.” A segunda metade dá aos visuais um limite além de uma direção.
2. **Escolha o traço principal** Decida qual traço conduz a cor. Dois traços principais puxando em sentidos opostos, como calma e ousadia, produzem um visual confuso.
3. **Relacione cada traço a escolhas** Use a tabela acima para escolher cor, tipografia, textura, movimento e layout. Escreva as escolhas ao lado de cada traço.
4. **Passe a mesma frase por dois visuais** Componha uma linha real do seu texto no visual que você escolheu e no oposto dele. Se o oposto parecer mais verdadeiro, reveja os traços.
5. **Escreva tudo junto** Ponha as regras de voz e de visual na mesma página do seu [guia de estilo da marca](https://gradiently.design/pt-br/guide/brand-style-guide), para que quem escreve e quem projeta trabalhem a partir de uma só fonte.

## O movimento também tem voz

A velocidade e a suavização de uma animação soam como alguma coisa. Uma saída longa e gentil parece calma. Um movimento curto e seco parece decidido. Um leve exagero no fim parece brincalhão. Se sua marca aparece em vídeo ou em um site, dê ao movimento a mesma voz das palavras. [Suavização (easing)](https://gradiently.design/pt-br/guide/easing) explica as curvas em detalhe.

```css
/* Calm: slow, soft landing */
.calm { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Bold: fast and decisive */
.bold { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

/* Playful: a small overshoot past the target */
.playful { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Precise: short, even, no flourish */
.precise { transition: transform 200ms ease-out; }
```

Quatro vozes de movimento. O exagero na curva brincalhona vem do segundo ponto de controle passar de 1.

O mesmo vale para a tipografia. A fonte do título é a parte mais alta da sua voz visual, e a [combinação de fontes](https://gradiently.design/pt-br/guide/font-pairing) decide se ela fala sozinha ou numa conversa. No Gradiently, cada Mark traz uma voz tipográfica junto com suas cores e materiais, então o visual e as letras já chegam combinados.

> **O teste de ler em voz alta** Leia em voz alta as palavras de um post no tom que o design sugere. Se você nunca diria assim, o visual e a voz precisam voltar a se alinhar.

## FAQ

### O que é voz de marca?

A voz da marca é o caráter constante que ela expressa em suas palavras, como calma, ousada, brincalhona ou precisa. O tom ajusta essa voz à situação.

### Como os visuais expressam a voz da marca?

Por meio de cor, tipografia, textura, movimento e layout. Contraste suave e espaçamento aberto soam calmos; alto contraste e tipografia pesada soam ousados.

### Qual é a diferença entre voz e personalidade de marca?

A personalidade é o caráter da marca; a voz é como esse caráter aparece nas palavras. Os visuais devem expressar a mesma personalidade que a voz.

### Uma marca pode ter mais de um traço de voz?

Pode, e a maioria tem dois ou três. Escolha um para conduzir a cor e deixe os outros moldarem a tipografia, o movimento e o layout.

### A animação afeta a voz da marca?

Afeta. Suavização lenta e gentil parece calma, movimentos rápidos parecem decididos e um leve exagero parece brincalhão, então o movimento deve combinar com a voz das palavras.