Uma identidade visual costuma chegar em forma de PDF: logo, paleta, duas fontes e alguns exemplos de aplicação. É um bom ponto de partida, mas na tela ele cobre pouca coisa. Um site precisa decidir a cor de um link, o visual de um botão desabilitado, como aparece um erro de formulário, o que acontece quando um título tem o dobro do tamanho previsto e como tudo isso fica no modo escuro. Quando ninguém decide essas coisas antes, quem decide é a pressa, página por página.

Este texto é sobre essa passagem: da identidade como arquivo para a identidade como sistema. Se você está no começo, com orçamento curto e ainda sem o logo resolvido, o post sobre identidade visual para pequenas empresas vai ser mais útil agora.

Por que o manual não chega sozinho à tela

O manual de marca mostra a marca em condições ideais. A interface vive de variação: telas de tamanhos diferentes, conteúdo real (nomes longos, fotos ruins, listas vazias) e interação (passar o mouse, focar com o teclado, esperar carregar). Cada uma dessas situações pede uma decisão visual.

O trabalho de um sistema é tomar essas decisões uma vez, dar nome a elas e reaproveitar em todo lugar.

Tokens: decisões com nome

Tokens são os valores básicos do sistema, cada um com um nome: cores, espaçamentos, tamanhos de texto, raios de borda, sombras, duração de animação. Eu costumo separar em duas camadas:

  • primitivos, que descrevem o valor ("laranja 500", "cinza 900");
  • semânticos, que descrevem o papel ("cor de destaque", "texto secundário", "borda", "fundo de erro").

Os componentes usam só os semânticos. Assim, ajustar o tom de destaque, ou criar um tema escuro, é mexer em um lugar, não caçar cor espalhada por cinquenta arquivos. No código eles viram variáveis CSS; no Figma, variáveis com os mesmos nomes. Quando design e código falam a mesma língua, some boa parte do "no layout estava diferente".

Tipografia: escala, não só fonte

Escolher a fonte é a parte fácil. O que sustenta a leitura é a escala: quantos tamanhos existem (título, subtítulo, corpo, legenda, rótulo), com qual entrelinha, e qual a largura máxima de linha para o texto corrido não cansar. Poucos níveis bem definidos funcionam melhor do que um tamanho novo a cada seção.

Há também um lado técnico. Cada peso de fonte é um arquivo a mais para baixar, então duas famílias com poucos pesos costumam bastar. E uma fonte de fallback com proporções parecidas evita que o texto "pule" quando a fonte final carrega, assunto que aparece no post sobre velocidade de site e Core Web Vitals.

Cor: papéis antes de tons

A paleta da marca não é a paleta da interface. A interface precisa de papéis: fundo, superfície, texto, texto secundário, borda, destaque, sucesso, aviso, erro. A cor da marca entra em alguns desses papéis, não em todos.

Aqui entra o contraste. As diretrizes de acessibilidade do W3C pedem pelo menos 4,5:1 entre texto normal e fundo, e 3:1 para texto grande. Muitas cores de marca, especialmente laranjas e amarelos, ficam ótimas em superfícies grandes e falham como cor de texto pequeno.

Neste site, por exemplo, o laranja de destaque tem uma variante só para texto: mais escura no tema claro e mais clara no tema escuro, porque o mesmo tom não atinge o contraste necessário nos dois fundos.

Componentes e seus estados

Botão, campo de formulário, card, menu, aviso. Cada componente precisa ter todos os estados desenhados, não só o padrão:

  • repouso, hover e pressionado;
  • foco visível para quem navega pelo teclado;
  • desabilitado e carregando;
  • erro, sucesso e vazio.

O foco visível não é detalhe estético: é o que permite usar o site sem mouse. E estados como "nenhum resultado" ou "algo deu errado" também são identidade. É ali que o tom de voz da marca aparece quando a pessoa mais precisa dele.

Modo escuro não é inverter as cores

Um tema escuro é um segundo conjunto de valores para os mesmos tokens semânticos. Algumas regras evitam os erros mais comuns:

  • superfícies ficam um pouco mais claras à medida que "sobem" em relação ao fundo;
  • cores muito saturadas precisam ser suavizadas para não vibrar sobre o escuro;
  • sombras perdem efeito, e bordas passam a separar melhor;
  • logos e imagens com fundo transparente podem precisar de uma versão própria.

O site pode seguir a preferência do sistema operacional, com prefers-color-scheme, e oferecer a troca manual. Se o orçamento não comporta dois temas bem feitos, prefiro entregar um tema cuidado a dois pela metade.

Ícones e ilustração com a mesma mão

Ícones de bibliotecas diferentes, com espessuras e cantos diferentes, denunciam improviso. Vale escolher uma família e fixar regras: espessura da linha, grade, contorno ou preenchimento.

Para ilustração, a lógica é a mesma: o estilo precisa ser uma regra, não uma imagem solta. A identidade deste site parte de um conjunto de pranchas técnicas. Cada seção abre com um carimbo numerado, como uma folha de um jogo de desenhos, e as cenas isométricas seguem a mesma perspectiva, a mesma linha e o mesmo tipo de anotação. É essa regra que permite desenhar uma cena nova sem que ela pareça de outro site.

Como eu conduzo isso num projeto

Como eu faço o design e o código, os tokens são definidos uma vez e usados com o mesmo nome nos dois lados. A documentação é uma página simples com tokens, componentes e estados, não um manual de cem páginas que ninguém abre. E tudo fica no nome do cliente: arquivos de design, repositório, domínio e hospedagem. Explico como isso entra num projeto de site na página de websites.

Se a sua identidade ainda não virou sistema na tela, pode me contar pelo contato em que ponto ela está.

Referências