# Marcas vivas: visuais em movimento e responsivos são a nova identidade

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

A maioria das identidades foi desenhada para o papel e depois colada nos celulares. Uma marca viva é desenhada para telas: move-se um pouco, cabe em qualquer formato e abre espaço para o que carrega.

## The short version

- Uma identidade de marca viva é aquela cujos visuais se movem, se adaptam a cada formato e respondem ao conteúdo colocado sobre eles, em vez de continuarem uma imagem fixa.
- O movimento ajuda nas telas porque uma mudança suave chama a atenção num feed, sem precisar de uma gravação em vídeo.
- Legibilidade responsiva significa que o fundo se ajusta onde as palavras ficam, para que o texto continue legível em todos os quadros.
- Uma identidade viva ainda precisa de regras fixas: a mesma família de cores, o mesmo material, a mesma tipografia e o mesmo tipo de movimento sempre.
- Boas marcas vivas respeitam quem prefere movimento reduzido e oferecem uma versão estática.

Uma **marca viva** é uma identidade desenhada para telas, não para papel: seus visuais se movem com suavidade, se recompõem em cada formato e respondem ao que for colocado sobre eles, para que as palavras sempre sejam lidas. A maioria das identidades de marca foi desenhada como imagem fixa e depois cortada para celulares, banners e stories. Uma marca viva mantém as mesmas cores, o mesmo material e a mesma tipografia, mas se comporta mais como uma superfície do que como uma figura. É o passo natural para marcas que vivem sobretudo em feeds.

## O que torna viva uma identidade de marca

Três comportamentos separam uma identidade viva de uma estática. Você não precisa dos três no primeiro dia, mas cada um deixa a marca mais à vontade onde as pessoas realmente a veem.

| Comportamento | O que significa | Por que ajuda |
| --- | --- | --- |
| Movimento | O fundo flutua, respira ou muda a luz devagar | Chama o olhar na rolagem sem gritar |
| Adaptação | Recompõe-se para cada tamanho em vez de ser cortado | A melhor parte do visual cai no lugar certo em todo formato |
| Resposta | Muda onde as palavras ficam para que continuem legíveis | Todo título se lê sem caixas, sombras ou desfoque |

Movimento, adaptação e resposta. Juntos, transformam uma identidade de imagem em superfície.

Uma marca viva é parente de uma [identidade dinâmica](https://gradiently.design/pt-br/guide/dynamic-brand-identity), mas a ênfase é outra. A identidade dinâmica varia a forma de uma peça para outra de propósito. Uma identidade viva pode parecer igual em todas as peças; o que muda é como ela se comporta dentro de cada uma, movendo-se, encaixando-se e abrindo espaço.

## Movimento: pequeno, lento e sempre do mesmo tipo

O movimento é a parte mais visível de uma marca viva e a mais fácil de exagerar. O objetivo é um fundo que pareça vivo, não que concorra com a mensagem. Mantenha as palavras paradas, deixe a superfície se mover devagar e use um só tipo de movimento em todo lugar para que ele vire parte do visual. [Movimento para marcas estáticas](https://gradiently.design/pt-br/guide/motion-for-still-brands) e [fundos de gradiente animado](https://gradiently.design/pt-br/guide/animated-gradient-background) aprofundam a técnica.

### Evite

- Ciclos rápidos de cor
- Palavras que quicam ou giram
- Um estilo de animação diferente a cada post
- Loops com um salto visível no final

### Faça

- Uma deriva lenta de luz pela superfície
- Palavras paradas ou uma entrada calma
- Uma assinatura de movimento para a marca toda
- Um loop contínuo que se emenda de forma invisível

## Adaptação: um visual, todos os formatos

Uma marca que posta durante a semana pode precisar de um story, um post de feed, uma imagem de link e um banner do LinkedIn. Uma imagem fixa cortada para cada um perde sua melhor parte em pelo menos um deles. Uma identidade viva é renderizada para cada formato, então a luz e as áreas calmas caem no lugar certo todas as vezes. [Um visual, todos os tamanhos](https://gradiently.design/pt-br/guide/one-look-every-size) mostra como isso funciona na prática.

- Story 1080×1920: 1080 × 1920
- Post do Instagram 1080×1350: 1080 × 1350
- Prévia de link 1200×630: 1200 × 630
- Banner do LinkedIn 1584×396: 1584 × 396

Do muito alto ao muito largo. Uma identidade viva se recompõe para cada um em vez de ser reduzida a partir de uma só imagem.

## Resposta: fundos que abrem espaço para as palavras

Num gradiente ou numa superfície em movimento, o contraste muda ao longo do quadro e do tempo. Um título que se lê bem num segundo pode afundar numa mancha clara no seguinte. As soluções de sempre, uma caixa atrás do texto, uma sombra ou um desfoque, brigam todas com o fundo. Uma identidade responsiva resolve na origem: a parte mais calma da superfície fica atrás das palavras e as cores perto das letras escurecem ou clareiam.

Um post de escola de dança em que a área clara do gradiente atravessa o título

Um fundo fixo: a área mais clara pode cair bem atrás do título.

O mesmo post da escola de dança com uma área calma e mais escura do gradiente atrás do título

Um fundo responsivo: a área calma vai para trás das palavras e o texto fica nítido.

Para os princípios por trás disso, veja [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) e [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

## Respeite o movimento reduzido

Algumas pessoas ativam o movimento reduzido nas configurações do aparelho porque a animação lhes faz mal ou as distrai. Uma marca viva na web deve respeitar essa preferência e mostrar uma versão estática do mesmo visual. São poucas linhas de CSS, documentadas na [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```css
.brand-surface {
  background: linear-gradient(120deg, #0f172a, #1e3a8a, #0e7490, #0f172a);
  background-size: 300% 300%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-surface {
    animation: none;
    background-position: 30% 50%; /* a calm, still frame of the same look */
  }
}
```

Uma deriva lenta por uma superfície azul-marinho, azul e turquesa, com um quadro estático para quem prefere movimento reduzido. Mais em [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).

## Como começar uma marca viva sem refazer tudo

1. **Mantenha o seu núcleo fixo** Cores, tipografia e logo ficam exatamente como estão. Ser vivo é um comportamento acrescentado por cima, não um rebranding.
2. **Faça do fundo a parte que se move** Ele ocupa mais espaço e carrega menos informação, então o movimento ali não custa nada em clareza.
3. **Escolha uma assinatura de movimento** Uma deriva, um sopro lento de luz ou um brilho suave. Escreva-a no seu [guia de estilo da marca](https://gradiently.design/pt-br/guide/brand-style-guide).
4. **Renderize por formato** Faça cada tamanho a partir da mesma receita em vez de cortar um arquivo mestre.
5. **Confira cada linha de texto** Em todos os quadros e em todos os formatos, as palavras devem ser lidas sem uma caixa atrás.

O Gradiently foi feito exatamente para isso. Um Mark é um fundo vivo, uma receita de cores, materiais, luz, granulação, movimento e uma voz tipográfica que é renderizada ao vivo atrás de cada design. Ele se compõe sozinho para cada tamanho, sua região mais calma se move para trás das suas palavras e a **tinta automática** escolhe texto claro ou escuro linha a linha a partir da paleta do próprio Mark. As palavras podem entrar com animações simples, como subir ou revelar, e com o Pro você pode exportar o design em movimento, como GIF, ou como MP4 ou WebM onde o seu navegador suporta gravação.

## FAQ

### O que é uma identidade de marca viva?

Uma identidade cujos visuais se movem com suavidade, se adaptam a cada formato e respondem às palavras colocadas sobre eles, mantendo as mesmas cores, o mesmo material e a mesma tipografia.

### Motion branding é só para grandes empresas?

Não. Um fundo em movimento lento atrás de palavras paradas já basta, e não exige gravação de vídeo nem equipe de animação.

### Um fundo em movimento deixa meu texto mais difícil de ler?

Pode deixar, se as áreas claras ou agitadas passarem atrás das palavras. Mantenha o movimento lento e a parte mais calma da superfície atrás do texto.

### Como uma marca viva deve tratar as configurações de movimento reduzido?

Mostre um quadro estático do mesmo visual quando o aparelho pedir movimento reduzido. Na web, use a media query prefers-reduced-motion.