A cor da marca que estraga o gráfico: como escolher a paleta sem perder a leitura do número
Colocar a identidade da agência na ferramenta é fácil. Difícil é fazer isso sem que o gráfico fique ilegível, as séries se confundam e o cliente leia o número errado. Um guia prático de cor aplicada a dashboard e relatório.
A agência fecha a identidade visual, escolhe o roxo da marca e aplica em tudo: dashboard, portal do cliente, relatório, gráficos. Fica bonito na primeira tela. Três dias depois começa o problema.
O gráfico de linhas tem cinco séries e todas são variações do mesmo roxo. O cliente abre o relatório no celular, no sol, e não distingue "leads" de "leads qualificados". A barra do mês atual e a do mês anterior parecem a mesma cor. O texto cinza-claro sobre fundo roxo-claro sumiu.
Ninguém reclama de cor. As pessoas reclamam de outra coisa: "esse número tá certo?", "qual linha é qual mesmo?", "não consegui ler no celular". A cor errada não aparece como problema de design, aparece como problema de confiança no dado.
Este artigo é sobre como colocar a sua marca na ferramenta que o cliente usa — algo que a Marca própria resolve de uma vez — sem transformar o gráfico num enigma.
Identidade de marca e paleta de dados são duas coisas diferentes
A confusão mais comum é tratar a paleta da marca como paleta de visualização de dados. São funções distintas.
A paleta da marca existe para ser reconhecida. Ela tem uma cor dominante, uma ou duas de apoio e serve para dizer "isso é nosso". Funciona em logo, cabeçalho, botão, capa de proposta.
A paleta de dados existe para ser distinguida. Ela precisa de cores que não se confundam entre si, em qualquer ordem, em qualquer tamanho, inclusive quando duas séries ficam vizinhas num gráfico de área empilhada. Precisa funcionar em tela de 6 polegadas e em PDF impresso em preto e branco.
Uma marca com uma cor forte dá uma excelente identidade e uma péssima paleta de cinco séries. Daí vêm as variações de tonalidade — roxo escuro, roxo médio, roxo claro, roxo clarinho — que são tecnicamente diferentes e visualmente iguais.
A regra prática: a marca manda na moldura, os dados mandam dentro do gráfico. Cabeçalho, navegação, botão de ação, destaque de seção: cor da marca. Séries de um gráfico com mais de três categorias: paleta pensada para diferenciação, com a cor da marca ocupando a série principal.
Onde a cor vira erro de leitura
Quatro situações concentram quase todos os problemas reais.
Texto sobre fundo colorido. O cabeçalho ficou na cor da marca e o título em branco por cima. Se a cor da marca for média-clara, o contraste cai e o texto fica legível no monitor do designer e ilegível no notebook do cliente com brilho baixo. O critério objetivo aqui é contraste medido, não "ficou bom". A referência usada no mercado é a WCAG, que define um mínimo de 4,5:1 para texto normal e 3:1 para texto grande — o nível AA.
Séries vizinhas no mesmo gráfico. Três séries na mesma família de cor é o limite do tolerável. Acima disso, você precisa de matizes diferentes, não de tonalidades diferentes. E vale um teste bruto: tire a saturação do gráfico mentalmente (ou abra o print em escala de cinza). Se as séries continuarem distinguíveis, a leitura sobrevive a qualquer tela.
Semântica de cor atropelada pela marca. Esse é o mais perigoso. Se a marca da agência é vermelha e o indicador de "meta batida" herdou o vermelho da marca, o cliente lê queda onde houve alta. Verde e vermelho carregam significado em relatório de performance. Eles não são cor de marca, são sinal. Mantenha-os fora da paleta de identidade.
Variação positivo/negativo em preto e branco. O relatório que vai para a diretoria frequentemente é impresso. Se a diferença entre bom e ruim só existe na cor, ela desaparece na impressora. Seta, sinal, rótulo, posição: a cor é reforço, não a única informação.
Claro e escuro: duas vezes o mesmo trabalho
Uma cor que funciona em fundo branco raramente funciona em fundo escuro. O roxo escuro bonito no tema claro vira um borrão sobre o cinza-chumbo do tema escuro.
Isso importa porque você não controla o tema que o cliente usa. Alguém vai abrir o portal no celular à noite, com o sistema em modo escuro. Se a sua paleta só foi testada no claro, metade das pessoas vê uma versão quebrada da sua marca.
O caminho é não escolher cor isolada, e sim pares: cada cor da paleta precisa de uma variante que mantenha o mesmo contraste no fundo oposto. É trabalhoso de fazer à mão, e é exatamente o tipo de coisa que compensa resolver no nível da ferramenta em vez de tela por tela.
Na Blocos, o visual vem de variáveis centrais: trocar a paleta repinta dashboard, portal, relatórios e gráficos de uma vez, sem editar nenhuma tela. São 11 paletas curadas, os dois temas — claro e escuro — sempre disponíveis, e o contraste AA fica travado por teste. Ou seja: a decisão que você toma é "qual paleta", não "qual hexadecimal para cada estado de cada componente em dois temas".
Conforto não é detalhe estético
Tem um grupo de ajustes que raramente entra na conversa de marca e que muda a experiência de quem usa a ferramenta oito horas por dia.
Tema por pessoa e por dispositivo. O analista que trabalha no escuro no monitor e no claro no celular não quer escolher um dos dois. Deixar cada pessoa definir — claro, escuro ou seguir o sistema — resolve sem debate.
Reduzir animações. Transição em dashboard é agradável para quem abre uma vez e desconfortável para quem abre quarenta. Para parte das pessoas, movimento na tela causa mal-estar real; existe até uma preferência de sistema padronizada para isso.
Destacar o foco do teclado. Quem opera rápido navega por tab. Se o indicador de foco foi apagado "porque polui", a operação por teclado morre.
Esses três itens são configuráveis por pessoa e por dispositivo na Blocos. Vale ativar o que fizer sentido para o seu time antes de discutir qual roxo é mais fiel ao manual da marca.
Um roteiro curto antes de publicar a sua paleta
Antes de aplicar a identidade e sair enviando portal para cliente, rode esta checagem. Leva vinte minutos.
Abra o relatório mais denso que você tem, não a tela de exemplo. O gráfico com sete séries é o que vai quebrar.
Veja nos dois temas. Claro e escuro, mesma tela, mesmo gráfico.
Abra no celular. Fora de casa, com luz, brilho em 50%.
Tire um print em escala de cinza. As séries continuam distinguíveis? O positivo e o negativo continuam identificáveis?
Confira a semântica. Verde é alta, vermelho é queda, em qualquer lugar do produto. Sem exceção pela marca.
Mostre para alguém que não fez o relatório e peça para dizer, em voz alta, qual linha é qual.
Se passar nos seis, a sua marca está na ferramenta sem custo de leitura. E é esse o objetivo: o cliente deveria perceber a sua marca sem perceber o esforço — vendo um portal coerente, não um gráfico que ele precisa decifrar.
Quando a identidade visual vem de um lugar só e o contraste já está garantido, essa decisão deixa de ser um projeto e passa a ser uma escolha de dois minutos. É assim que funciona a Marca própria: você escolhe a paleta, o produto inteiro assume a sua cara, e a leitura do número continua intacta.
