A regra 60-30-10 foi quebrada: sistemas de cores modernos que realmente funcionam.
A regra 60-30-10 é um atalho de design de interiores que os designers insistem em aplicar aos seus projetos. Veja o que os sistemas de cores modernos fazem em vez disso.
A regra Regra 60-30-10 é a primeira coisa que a maioria dos designers aprende sobre cores, e é a primeira coisa que a maioria das equipes de produto sérias abandona silenciosamente assim que lançam uma interface real. Sessenta por cento dominante, trinta por cento secundária, dez por cento de destaque.
Limpa. Memorável. Completamente inviável quando uma marca tem botões, estados desativados, notificações, gráficos, modo escuro e um site de documentação.
A regra não está errada. Ela apenas foi criada para um problema diferente. O que os melhores sistemas de design utilizam em vez disso não é uma proporção, mas sim um sistema token baseado em funções. Este artigo analisa por que a regra 60-30-10 falha, o que a substituiu e cinco sistemas de design reais que estão implementando essa substituição em larga escala.
De onde veio a regra 60-30-10
A regra 60-30-10 é um atalho da decoração de interiores de meados do século XX, adaptado ao design digital por pessoas que precisavam de uma regra para citar.
Sua origem está no design residencial. Um cômodo tem uma cor dominante (paredes), uma cor secundária (estofados, cortinas) e um elemento de destaque (almofadas, obras de arte). Sessenta, trinta, dez. Funciona para cômodos porque eles são superfícies estáticas únicas, visualizadas por uma única pessoa por vez, e permanecem com a mesma cor até que alguém pinte.
Nenhuma dessas premissas se aplica ao design de produto. Um produto digital não é uma superfície estática. São centenas de superfícies, cada uma com seus próprios estados, temas e contextos. A regra nunca foi concebida para esse mundo, e isso fica evidente.
Por que ela falha no design de produto
A regra 60-30-10 pressupõe uma única superfície estática e um único visualizador, o que não tem absolutamente nada a ver com o funcionamento do design de produto.
Interfaces reais têm botões desabilitados, estados de foco, anéis de foco, banners de erro, notificações de sucesso, séries de dados em gráficos, estados vazios, esqueletos de carregamento e cores semânticas para ações destrutivas. Nenhuma dessas opções se encaixa perfeitamente em "60, 30 ou 10 por cento da tela". Elas não são tela. São comportamentos.
A regra também deixa de funcionar no momento em que você adiciona o modo escuro. Seus 60% de cor neutra clara agora precisam se tornar 60% de cor neutra escura, seus 30% de cor secundária precisam ter sua tonalidade alterada para manter a hierarquia e seus 10% de cor de destaque geralmente precisam clarear ou mudar completamente de matiz para permanecerem acessíveis. Isso não é um problema de proporção. É um problema do sistema.
A acessibilidade é o golpe final. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) relações de contraste não se importam com a porcentagem de azul na sua página. Elas se importam se o azul específico no botão específico tem contraste suficiente com o fundo específico atrás dele. Você não pode resolver esse problema com proporções de espaço.
O que os sistemas de cores modernos usam em vez disso
Os sistemas que impulsionam as interfaces mais bem-sucedidas substituem as regras de proporção por níveis de tokens baseados em funções que descrevem o que uma cor faz, e não a sua quantidade.
| Nível | O que faz | Exemplos de tokens |
|------|--------------|---------------------|
| Superfície | Camadas de fundo e elevações | bg-default, bg-subtle, bg-raised, bg-overlay |
| Conteúdo | Texto e ícones em superfícies | text-default, text-muted, text-on-accent |
| Destaque | Cores da marca e cores de ação principais | accent-primary, accent-primary-hover, accent-secondary |
| Estado | Estados interativos e de feedback | state-hover, state-focus, state-disabled |
| Semântico | Sinais carregados de significado | success, warning, critical, info |
Cada token descreve uma função. "Esta cor é a superfície atrás de um cartão." "Esta cor é o texto sobre o destaque."
O designer nunca escolhe entre "secundário ou destaque a 30%". Ele escolhe entre as funções que o sistema já define.
O benefício se acumula. Adicionar o modo escuro se torna uma questão de mapear os mesmos tokens para valores brutos diferentes, sem precisar redesenhar a interface. Adicionar um novo tema de marca se torna uma simples troca de token na camada de destaque. A acessibilidade é aplicada no nível do token, e não verificada página por página.
Cinco Sistemas de Design que Fazem a Diferença
Esses sistemas estão sendo implementados em larga escala com paletas baseadas em funções que funcionam bem em todos os modos, incluindo o modo claro e o modo escuro, e em todas as superfícies que o usuário toca.
Material Design 3
Veja ao vivo em m3.material.io
O Material 3 é o mais explícito sobre essa mudança. O sistema define funções de cores como "primária", "sobre a primária", "superfície", "sobre a superfície", "primária inversa", com cada função pré-associada para contraste. Os designers não escolhem cores. Eles escolhem funções, e os tokens são resolvidos para os valores corretos do tema ativo.
O que aproveitar: a convenção de nomenclatura "sobre". on-primary para texto/ícones sobrepostos a uma superfície primária codifica a acessibilidade diretamente no nome do token.
Radix Colors
O Radix Colors oferece escalas de 12 tons por matiz, com cada tom pré-atribuído a uma função (fundo do aplicativo, fundo sutil, elemento da interface do usuário, foco, ativo, sólido, texto, texto de alto contraste). Sem lógica de proporção. Cada tom representa uma função.
O que aproveitar: a escala numerada com anotações de função. Ela oferece aos designers um vocabulário compartilhado que elimina 90% do debate sobre "qual cinza devo usar".
Shopify Polaris
Veja ao vivo em polaris.shopify.com
O Polaris organiza as cores por função do componente: fundo (superfície), texto (conteúdo), ícone, borda e interativo. Cada um possui subfunções para foco, pressionado, desativado e selecionado. O sistema dificulta estruturalmente que um designer acesse cores fora dos tokens definidos.
O que aproveitar: o agrupamento de funções. Separar os tokens de "borda" dos tokens de "superfície" força o uso intencional de cores no nível do componente.
Duas Marcas em Produção
A documentação do sistema de design acima serve como referência. Estas duas marcas são a prova. Stripe e Linear utilizam cores baseadas em função na camada do produto diariamente, e ambas comprovam que o padrão se mantém em uso real.
Stripe
Stripe apresenta uma marca em produção, não apenas um documento de sistema de design. O site público demonstra como as cores baseadas em função se apresentam em produção.
Quase tudo tem superfícies e conteúdo neutros. O roxo é a cor de destaque e aparece exatamente onde estão as ações, os links e os sinais da marca. Sem lógica de proporção. Lógica de função.
O que aproveitar: a disciplina de manter a camada de destaque fina. O cor de destaque da Stripe é usado com parcimônia porque seu papel é reservado. Se você usa cores de destaque para decoração, perde a capacidade de usá-las para ação.
Linear
Linear prioriza os neutros mais do que quase qualquer outro sistema de produção em larga escala. Todo o produto consiste em camadas de fichas de superfície escuras com uma única tonalidade de destaque (roxa) realizando todo o trabalho de ação. Nenhuma regra de proporção conseguiria produzir isso. É um sistema puramente baseado em funções, onde a camada de "destaque" é uma cor usada com moderação, e a camada de "superfície" é uma pilha completa de relevo.
O que aproveitar: a confiança para deixar a camada de destaque ser de uma única cor. Muitos sistemas de design novos sobrecarregam as cores de destaque. Linear demonstra que um único destaque bem escolhido, usado de forma consistente, gera um reconhecimento mais forte do que três destaques em proporções diferentes.
Como Criar uma Paleta Baseada em Funções
Criar uma paleta dessa forma leva mais tempo do que escolher três cores e atribuir porcentagens, mas o investimento se paga já na primeira vez que um designer adiciona o modo escuro.
O processo é o inverso de como a maioria dos designers aprendeu. Em vez de escolher as cores primeiro e depois encontrar as funções para elas, você escolhe as funções primeiro e depois encontra as cores para elas.
-
Defina os níveis de função. Comece com superfície, conteúdo, destaque, estado e semântica. A maioria dos produtos precisa exatamente dessas cinco. Alguns precisam de uma sexta para visualização de dados.
-
Escreva os tokens antes de escolher os valores hexadecimais. Cada token deve descrever uma função (
surface-subtle,content-muted,accent-primary-hover). Se o nome de um token descreve uma cor ("azul-claro"), renomeie-o. -
Preencha a escala neutra primeiro. A maior parte de uma interface real é composta por cores neutras. Crie uma escala completa (o Radix usa 12 etapas por um motivo) antes de mexer na cor da marca.
-
Adicione a camada de destaque por último. A cor de destaque geralmente é o único local onde identidade da marca está ativamente presente. A moderação aqui é fundamental.
-
Mapeie o modo escuro resolvendo novamente os tokens, não redesenhando. Se o seu sistema for baseado em funções, o modo escuro é uma troca de valor de token, não uma reformulação de cores.
-
Reforce a acessibilidade na camada de token. Cada token
on-surfacedeve passar no teste de 4,5:1 em relação à sua superfície correspondente. Incorpore a verificação.
O atalho tentador é definir três funções (primária, secundária e de destaque), declarar vitória e pronto. Essa é a regra 60-30-10 disfarçada de token. Ela falha exatamente no mesmo ponto: o primeiro componente real.
Para uma visão mais ampla de como as decisões de cor são percebidas pelos usuários antes que qualquer trabalho com tokens seja relevante, psicologia das cores no design aborda a camada de significado. Para entender como os sistemas de cores se encaixam no contexto geral do sistema, guia de sistemas de projeto apresenta o panorama completo.
FAQ
A regra 60-30-10 ainda é útil?
Sim. O design de superfície única ainda se beneficia dela. Pôsteres, posts em redes sociais, seções principais de marketing, embalagens, editoriais. Em qualquer situação em que o produto final seja uma única tela visualizada uma única vez, a regra oferece um atalho rápido para proporções. O design de produto não é assim.
Quantas cores um sistema de design deve ter?
Menos valores hexadecimais brutos do que você imagina, organizados em mais tokens do que você imagina. A maioria dos sistemas de entrega possui de 8 a 12 tons neutros, de 8 a 12 tons de destaque e de 3 a 5 famílias semânticas, todas resolvidas em tokens baseados em funções. O número bruto de cores é pequeno. O número de funções é grande.
Qual a diferença entre uma paleta de cores e um sistema de cores?
Uma paleta de cores é um conjunto de cores. Um sistema de cores é um conjunto de funções, um conjunto de regras sobre como essas funções interagem e um mapeamento de funções para cores que pode mudar de acordo com o tema. Uma paleta responde à pergunta "quais cores estão presentes na marca". Um sistema responde à pergunta "qual é a cor deste elemento neste estado, neste tema?".
Pare de medir cores em porcentagens
A regra 60-30-10 não é ruim. Ela simplesmente está fora de contexto.
O design de produto não é um cômodo. É um sistema de superfícies, estados e funções que muda conforme o usuário se move por ele.
Medir cores em porcentagens faz tanto sentido quanto medir tipografia pela porcentagem da página. Você não diz "30% do texto são títulos". Você diz "títulos são uma função com um estilo definido". A cor precisa funcionar da mesma forma.
As marcas que entregam os trabalhos com melhor escalabilidade, como Material, Radix, Polaris, Stripe e Linear, já entenderam isso e construíram seus designs em torno dessa lógica. Copiar as porcentagens delas é perder o ponto principal. Copiar a estrutura de funções delas é o objetivo.
Se sua paleta atual tem três cores e uma regra de alocação vaga, você não tem um sistema de cores. Você tem uma preferência de cores. Crie os níveis, nomeie as funções e deixe que os valores hexadecimais sejam a última coisa sobre a qual você discuta.
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
