Paletas de cores para SaaS e por que todas acabam sendo azuis

A convergência é real e não é uma falha de imaginação. Quatro pressões independentes têm o azul como a resposta mais segura, e uma equipe que toma essas quatro decisões de forma sensata chega lá sem nunca tê-lo escolhido deliberadamente.

1. Cores de status reivindicam as melhores matizes primeiro. Vermelho é perigo, âmbar é aviso, verde é sucesso. Essas são convenções aprendidas, quase universais e indisponíveis. O que sobra para o destaque da marca é azul, violeta, teal ou um neutro quente, e o azul é a maior e mais segura região do que resta.
2. O contraste é mais fácil no azul. Um azul médio passa nos testes de contraste tanto contra o branco quanto contra o quase-preto com o mínimo de ajuste. Amarelo, lima e laranja exigem trabalho real em ambas as direções, e esse trabalho acontece tarde, sob pressão de prazo, quando a solução é "deixe mais azul".
3. Pesquisas de confiança são citadas cedo e literalmente. Todo artigo sobre cores de marca diz que o azul transmite confiança e estabilidade. Para um produto que solicita a custódia de dados de alguém, esse argumento vence a reunião.
4. Padrões. Temas iniciais de frameworks e bibliotecas de componentes vêm com um primário azul ou violeta. Uma equipe que nunca o altera deliberadamente ainda assim o escolheu, e a maioria das equipes tem coisas mais urgentes para mudar no primeiro mês.

Esta é a versão cromática de uma convergência mais ampla em interfaces de software, onde padrões compartilhados e conselhos comuns produzem resultados idênticos. O caso geral, e como isso fica quando a geração é automatizada, está em por que sites feitos por IA são todos iguais.

Aqui está a observação que muda a forma como você lida com isso. Abra qualquer tela de produto (uma lista, uma página de configurações, um editor) e estime quanto dela é a cor de destaque. É um botão primário, talvez um item de navegação ativo, talvez um link. Digamos que sejam dois por cento dos pixels.

Os outros noventa e tantos por cento são neutros: fundo da página, superfícies de cards, bordas, linhas de tabela, texto do corpo, texto secundário, estados desativados. É isso que alguém realmente vê ao olhar para o seu produto e, na maioria dos produtos SaaS, é o *mesmo cinza neutro* de todo mundo, porque o destaque foi a única decisão que alguém tomou.

Um neutro deslocado alguns graus para areia quente, ardósia fria, sálvia ou tinta é percebido como deliberado imediatamente, não custa nada em termos de contraste e não conflita com cores de status porque quase não tem saturação. É a decisão de cor de maior impacto em uma interface de produto e a que mais frequentemente é ignorada.

Galerias e geradores de paletas mostram cinco amostras em um cartão branco, o que favorece qualquer cor. Uma paleta de SaaS é julgada em um lugar muito menos permissivo: uma tela densa, usada por horas, por alguém que está tentando concluir uma tarefa e não admirar suas cores.

• Uma tabela de configurações. Linha de cabeçalho, linhas de corpo, hover, selecionado, desativado e uma borda entre todos eles. Isso exige cerca de oito valores neutros distinguíveis e é onde uma paleta de três cinzas morre.
• Um formulário com erro. Texto de perigo, borda de perigo, fundo de perigo e um rótulo ainda legível. Três funções que a maioria das paletas define como uma só.
• Um estado vazio (empty state). Texto suave em uma superfície suave, que é a combinação com menor probabilidade de ter sido testada.
• Oito horas. Um destaque saturado que é encantador em um screenshot torna-se cansativo como um destaque permanente de navegação. A cor de um produto é julgada ao longo de um dia de trabalho, não em um relance.
• Dark mode. Cada vez mais o padrão para produtos voltados a desenvolvedores, e não apenas uma inversão da sua paleta clara. Os detalhes mensuráveis estão em paletas de cores para dark mode que funcionam.

O argumento acima só tem valor se houver alternativas. Estas são três paletas viáveis para SaaS com seus valores hex reais, cada uma resolvendo o neutro de forma diferente. Nenhuma delas é um mood board: cada função que uma tela densa precisa está presente, incluindo aquelas que decidem se uma tabela é legível.

1. 1

   Escolha o neutro primeiro

   Decida a temperatura do seu produto antes do destaque: quente (areia, argila, osso), fria (ardósia, tinta, aço) ou matizada para uma cor que você goste. Tudo o mais fica mais fácil depois que isso é definido, e esta é a decisão que as pessoas realmente percebem.

2. 2

   Construa a rampa completa de neutros

   Cerca de nove etapas, espaçadas perceptualmente e não por aritmética hex decimal simples; a aritmética simples agrupa tudo no meio e deixa os extremos inúteis. Mantenha um pouco da matiz em toda a rampa para que ela permaneça coerente.

3. 3

   Reserve as cores de status

   Sucesso, aviso, perigo, info. Defina-as antes do destaque para saber o que já está ocupado, e nunca permita que um elemento decorativo utilize uma delas.

4. 4

   Escolha o destaque a partir do que restou

   Agora o campo está genuinamente aberto, porque o neutro está cuidando da identidade e o destaque só precisa ser distinto do conjunto de status, legível em ambos os modos e tolerável por oito horas.

5. 5

   Defina cada função em ambos os modos

   Não é uma paleta: é uma lista de funções. Background, foreground, card, popover, muted, primary, secondary, destructive, border, input, ring e seus respectivos foregrounds. Qualquer coisa não definida acaba sendo inventada a cada tela.

Todo ano surge uma rodada de artigos sobre "tendências de paletas SaaS", e eles não são inúteis. São leituras razoáveis sobre o que sinaliza contemporaneidade atualmente. No entanto, são uma base ruim para uma paleta de produto por uma razão estrutural: uma tendência é, por definição, o que muitas pessoas estão fazendo ao mesmo tempo, portanto, adotá-la é um caminho para a convergência, não para a diferenciação. A paleta que parecia inovadora em janeiro é a que três concorrentes também adotaram em junho.

A versão mais duradoura desse mesmo instinto é extrair a *temperatura do neutro* do que você gosta e deixar as matizes específicas de lado. Um produto de neutro quente não fica datado da mesma forma que um destaque específico, e é a camada que ninguém copia porque ninguém percebe que é ela quem está fazendo o trabalho.

A UI de produtos é cada vez mais gerada do que desenhada, e uma tela gerada preenche cada valor não especificado com o padrão do modelo, que é o mesmo padrão de todos os outros modelos. Amostramos 299 arquivos DESIGN.md públicos, escritos especificamente para que um agente de código os siga: 86% listam valores hex brutos sem nenhuma função semântica atribuída, e 54% contêm pelo menos um adjetivo imensurável, sendo os mais comuns "clean" ou "moderno".

"Limpo e moderno" não é uma instrução. É um elogio, e um agente o satisfaz com sua ideia mediana de limpo e moderno. Que é azul, sobre cinza, com cards uniformemente arredondados. Uma paleta escrita como papéis nomeados com valores para ambos os modos altera esse resultado em um único arquivo.