Nome De Cor Diferente

O problema que ninguém conta sobre cores em projetos grandes

Eu passei três semanas refatorando um sistema de design inteiro porque dois devs estavam usando nomes diferentes para a mesma cor hexadecimal. #1E3A5F era o azul principal no componente A e "azul-marinho-profundo" no componente B. O resultado foi um layout que mudava de tom aleatoriamente quando você navegava entre telas, e levamos cinco dias para rastrear tudo. A solução mais prática que encontrei envolveu criar uma camada intermediária de tokens antes de qualquer cor chegar ao CSS. Em vez de hardcodar #1E3A5F em qualquer arquivo, eu defini uma constante chamada --color-primary-deep num arquivo separado, e todas as referências iam para lá. O ganho foi imediato: quando o cliente pediu para mudar o tom do azul, eu alterei um único valor e o projeto todo se atualizou.

Como escolher um nome de cor diferente sem perder a sanidade

O primeiro erro é tentar ser descritivo demais. Cores como "azul-que-lembra-o-ceu-dia-fortalecido-pela-tempestade" são inúteis na prática. Você vai esquecê-las em duas semanas e ninguém mais vai entender. O segundo erro é o oposto: usar nomes genéricos como "cor-1", "cor-2". Isso funciona no início e vira caos quando o projeto cresce. A abordagem que eu recomendo divide os nomes por função, não por aparência. Use prefixos como bg- para fundos, text- para tipografia, border- para contornos, e accent- para destaques. Dentro de cada grupo, agrupe por intensidade: light, medium, dark. Um exemplo concreto: bg-primary-light, text-secondary-dark, border-accent-medium. Isso cria um sistema previsível. Quando você vê border-accent-dark, sabe exatamente o que esperar sem precisar abrir o arquivo de tokens. E se precisar de um nome de cor diferente em algum ponto — digamos que uma seção específica do site exija uma variação que não se encaixa nas categorias existentes — você adiciona um sufixo contextual como -alt ou -fallback sem quebrar o padrão.

O guia prático

Vou mostrar como isso funciona em quatro etapas, com exemplos reais de código. Comece com um arquivo único. Se estiver usando CSS puro, use variáveis nativas. Se for React ou outro framework, um arquivo TypeScript com constantes exportadas funciona melhor. Aqui está um exemplo mínimo: tokens.css

--color-bg-primary: #F5F7FA; --color-bg-secondary: #FFFFFF; --color-text-primary: #1A1A2E; --color-text-secondary: #4A4A68; --color-border-main: #D1D5DB; --color-border-subtle: #E5E7EB; --color-accent-primary: #3B82F6; --color-accent-secondary: #8B5CF6; O arquivo deve ter apenas definições. Nada de media queries, nada de aplicações. definição. Isso permite que qualquer componente importe e use sem depender de regras extras.

Etapa 2 — Aplique nos componentes

Em vez de escrever a cor diretamente no estilo, referencie o token: .button { background-color: var(--color-accent-primary); color: var(--color-bg-secondary); border: 1px solid var(--color-border-main); } Se o botão precisar de uma variação de cor, crie uma classe modificadora:

.button--alt { background-color: var(--color-accent-secondary); } Essa é a situação mais comum onde você precisa de um nome de cor diferente. O modificador mantém a estrutura, mas aplica uma cor distinta sem duplicar regras inteiras.

Etapa 3 — Lidere com a hierarquia

O maior problema em projetos grandes é a inconsistência. Dois designers podem escolher tons ligeiramente diferentes para o que deveria ser o mesmo cinza de fundo. Para evitar isso, defina uma escala de valores fixos e nunca saia dela. Em vez de criar um novo token para cada leve variação de cinza, estabeleça uma paleta de dez níveis e restrinja-se a ela. Escala neutra sugerida: 50 = #FAFAFA 100 = #F5F5F5 200 = #EEEEEE 300 = #E0E0E0 400 = #BDBDBD 500 = #9E9E9E 600 = #757575 700 = #616161 800 = #424242 900 = #212121

Com essa escala, você raramente precisará de um nome de cor diferente porque já tem o tom certo na paleta. Se precisar, adicione um sufixo contextual, não um token novo.

Etapa 4 — Documente quando desviar

Às vezes, um contexto específico exige algo fora do padrão. Um card promocional talvez precise de um fundo mais escuro do que qualquer um dos tokens de bg existentes. Nesse caso, crie um token com sufixo -custom e adicione um comentário explicando o motivo: /* Card promocional: tom mais saturado para destacar oferta */ --color-bg-promo: #1E3A5F; Isso evita que o token seja apagado ou redefinido por alguém que não saiba por que ele existe.

Limitações que você precisa saber

Esse sistema funciona bem em projetos de médio porte. Em aplicações extremamente grandes com múltiplas equipes, você vai enfrentar dois problemas. O primeiro é a quantidade de tokens: com centenas de componentes, o arquivo de tokens pode ultrapassar trezentas linhas, o que dificulta a manutenção manual. Nesse cenário, ferramentas como Style Dictionary ou Tokens Studio no Figma automatizam a geração e a sincronização. O segundo problema é o versionamento. Se duas versões do produto usam paletas diferentes, manter dois conjuntos de tokens no mesmo repositório gera conflito. A solução simples é separar por pasta: tokens/v1/ e tokens/v2/. Isso evita mistura acidental. Uma terceira limitação importante é que tokens não resolvem problemas de acessibilidade automaticamente. Um token bem nomeado ainda pode ter contraste insuficiente. Sempre valide pares de cor-fundo com uma ferramenta como o WebAIM Contrast Checker antes de considerar o token como aprovado.

Download e recursos

Um template pronto com os tokens básicos e exemplos de aplicação está disponível para uso. O arquivo contém a paleta neutra de dez níveis, os tokens primários e secundários, e três componentes de demonstração. Baixe o pacote completo pelo repositório oficial do projeto de design system que estou mantendo, ou copie o trecho abaixo se preferir começar do zero. O código acima cobre o essencial. Se você está apenas começando com gestão de cores, Foque em ter um arquivo de tokens centralizado, usar prefixos funcionais e nunca hardcodar valores hexadecimais em componentes. Esses três hábitos eliminam a maioria dos problemas que aparecem depois. E se algum dia precisar de um nome de cor diferente por uma razão específica, use sufixos contextuais em vez de criar toda uma nova categoria.