Esta é a distinção que os boards de inspiração simplificam, e quase todo problema de dashboard tem origem nela. Três sistemas de cores compartilham uma única tela, cada um com uma função e um modo de falha diferentes.

Uma paleta de marca que fica ótima em uma landing page geralmente fornece apenas uma dessas — uma cor de destaque — e nenhuma das outras duas. É por isso que a primeira tela do dashboard parece boa, mas a quinta parece três produtos costurados.

Os neutros carregam a maior parte de um dashboard, e uma escala neutra rasa é o defeito estrutural mais comum. Uma tabela densa precisa separar, no mínimo: o fundo da página, o card onde a tabela está, a linha de cabeçalho, o estado de hover da linha, a borda entre linhas, o texto primário, o texto secundário e o texto desativado. Isso representa oito valores distinguíveis, e "três cinzas" não são suficientes para isso.

Duas coisas fazem uma escala neutra funcionar. Primeiro, dê a ela passos suficientes — cerca de nove, espaçados perceptualmente em vez de por aritmética de hexadecimais, que agrupa tudo no meio. Segundo, aplique matizes. Um neutro que carrega uma pequena quantidade da cor da sua marca é lido como parte do design; um cinza sem matiz é lido como o padrão do framework, porque ele é.

Success, warning, danger e info não são decoração. No momento em que uma série de gráfico, um destaque de navegação ou um banner de marketing utiliza o seu vermelho, o vermelho deixa de significar "algo está errado" e os usuários param de procurá-lo. Esta é uma porta de sentido único: a atenção gasta com decoração não pode ser recuperada para o significado.

• Mantenha-as fora do conjunto categórico. Se você tem quatro séries e uma delas é verde, esse verde torna-se ambíguo em uma tela que também exibe o status de saúde.
• Não deixe a cor de destaque ser uma cor de status. Se a sua marca é verde e o verde também significa sucesso, ou a marca ou o significado precisam mudar. Geralmente a marca: altere a matiz ou a luminosidade do destaque o suficiente para que os dois nunca fiquem adjacentes e sejam lidos como a mesma coisa.
• Nunca dependa apenas da cor. Um status precisa de um ícone, um rótulo ou uma forma também. Isso é um requisito de acessibilidade e é também o que mantém a interface legível em um screenshot colado em um ticket de suporte.
• Dê a cada status uma variante de superfície. Um *badge* de perigo e um *fundo de banner* de perigo são cores diferentes; se você definir apenas uma, terá um banner que ou grita ou desaparece.

Seis ou sete, e a resposta honesta é que seis é onde começa a ficar difícil. A restrição não é estética: matizes distinguíveis com a mesma luminosidade são um recurso limitado e, quando cerca de oito delas estão em um único gráfico, séries adjacentes tornam-se suposições e a legenda vira uma tarefa de busca.

Esta é a parte em que um gerador de paletas não pode ajudar, porque o conjunto categórico deve ser julgado como um grupo e em relação aos neutros sobre os quais ele ficará. Abaixo estão duas paletas com formato de dashboard com seus papéis de chart-1 a chart-5 visíveis ao lado das superfícies — que é a única maneira de ver se a série quatro ainda é distinguível da série dois em um card.

Ambos os conjuntos param em cinco, o que é deliberado e não uma limitação do formato.

O que fazer em vez disso, por ordem de preferência:

1. Rotule diretamente. Coloque o nome da série ao final de sua linha. Isso remove a legenda, remove a busca e remove a maior parte da pressão sobre a cor.
2. Agrupe a cauda. Mostre as cinco principais e um grupo "outros". Quase nenhum leitor de dashboard compara a série onze com a série doze.
3. Divida o gráfico. Small multiples — uma série por painel, mesmos eixos — superam um gráfico com doze cores em quase qualquer tamanho.
4. Varie algo além da matiz. Padrão de traço, formato do marcador ou textura de preenchimento, especialmente em impressões ou quando um screenshot puder ser convertido para escala de cinza.

Cerca de um em cada doze homens tem algum tipo de deficiência de visão cromática, e a forma mais comum torna difícil separar o vermelho do verde — o que é lamentável, pois vermelho e verde são exatamente o que os dashboards usam para ruim e bom.

As regras práticas são curtas. Varie a luminosidade, bem como a matiz, entre quaisquer duas cores que carreguem significado, para que permaneçam distinguíveis em escala de cinza. Nunca combine vermelho e verde como a única diferença entre dois estados. E para status, sempre adicione um segundo canal — um ícone, um sinal de mais ou menos, uma palavra — para que a cor seja um reforço e não a mensagem. Uma paleta que sobrevive a um screenshot em escala de cinza sobrevive a quase qualquer deficiência.

Dashboards são usados em modo escuro mais do que a maioria das superfícies de produto, e uma paleta categórica ajustada para o branco não se transfere. Matizes saturadas de tom médio que são lidas com clareza no branco tendem a vibrar contra um fundo quase preto, e as duas ou três séries mais escuras simplesmente desaparecem.

Defina as cores das séries por modo em vez de convertê-las. O mesmo vale para sua escala de neutros: no modo escuro, superfícies elevadas são *mais claras* que o fundo, o que inverte o instinto de que um card é algo mais claro em uma página colorida. Os detalhes — incluindo valores de luminosidade medidos de paletas de produção — estão em paletas de cores para modo escuro que funcionam.

Cada vez mais, o dashboard é gerado em vez de projetado — pede-se a um agente uma tela de analytics e ele a produz. O que quer que o briefing não tenha especificado, o modelo fornece, e o fornece de forma nova a cada vez.

Amostramos 299 arquivos DESIGN.md públicos, documentos escritos especificamente para que um agente de código os siga. 86% fornecem valores hex puros sem nenhum papel semântico atribuído, o que significa que o arquivo não consegue responder "qual cor é uma célula de tabela desativada" ou "qual cor significa perigo". 69% nunca mencionam o modo escuro. Então o agente decide, e decide de forma diferente na próxima tela.

A solução é a mesma, quer seja uma pessoa ou um agente construindo: nomeie os papéis, defina-os em ambos os modos e anote quais cores estão reservadas. Uma paleta expressa como papéis é uma instrução; uma paleta expressa como cinco códigos hex é inspiração.

1. 1

   Tire um screenshot da tabela mais densa e dessature-a

   Se linhas, cabeçalhos, estados de hover e desativados deixarem de ser distinguíveis em escala de cinza, sua escala de neutros está muito plana e suas cores de status estão carregando o significado sozinhas.

2. 2

   Coloque todos os status na tela ao mesmo tempo

   Sucesso, aviso, perigo e info juntos, como badge e como banner. É aqui que a ausência de uma variante de superfície aparece imediatamente.

3. 3

   Gere propositalmente um gráfico com oito séries

   Não porque você deva publicá-lo assim, mas para descobrir onde sua paleta falha. Seja qual for esse número, projete o comportamento de "e outros" para um número abaixo dele.

4. 4

   Alterne para o modo escuro com um gráfico aberto

   As duas séries mais escuras são as que desaparecem, e elas desaparecem silenciosamente.

5. 5

   Conte a cor de destaque

   Em uma tela de dashboard bem projetada, o destaque aparece uma ou duas vezes. Se estiver em todo lugar, ele deixa de significar "esta é a ação".