Sistema de Cores Semântico

Contexto

O Phiz é um aplicativo originalmente chinês, recentemente lançado no Brasil. Durante o processo de rebranding para PhizChat, surgiu a oportunidade de reconstruir a base visual do produto e estruturar um novo sistema de cores mais consistente e escalável.

Desafio

A estrutura de cores havia crescido sem padronização, com hex codes aplicados diretamente nos componentes e sem categorias semânticas claras. O mesmo tom era utilizado para funções diferentes, criando inconsistências visuais, dificultando a manutenção e tornando a expansão do sistema lenta e pouco escalável.

Objetivo

Construir do zero um sistema semântico de tokens de cor, garantindo uma base escalável para theming, contraste seguro por design e adaptação consistente entre tema claro, tema escuro e futuras variações de marca.

Processo

Auditar uso de cores existente

Mapeamos cada aplicação de cor atual através de todos os fluxos: conteúdo, backgrounds, borders e marca. Também adicionamos tokens a ações, feedback e elementos fixos usando a mesma cor de marca como base.

Mapeamento de cores e definição de categorias semânticas

A partir de definições do time responsável pela identidade visual da nova marca, reorganizamos a paleta em categorias funcionais baseadas em significado. Estruturamos o sistema em grupos como Brand, Backgrounds, Content, Actions, Feedback, Borders, Interactive e Fixed, criando uma lógica clara para aplicação e manutenção das cores.

Também substituímos nomes genéricos e visuais por nomenclaturas semânticas, como “interactive-primary-light” em vez de “teal-10”. Isso estabeleceu um vocabulário compartilhado entre design e desenvolvimento, facilitando a documentação, o handoff e a evolução consistente do sistema.

Testes de contraste de acessibilidade

O principal benchmark definido foi o WhatsApp, aplicativo de mensagens mais utilizado no Brasil para definir o nível mínimo de contraste esperado em elementos de ação com texto branco.

Durante os testes, identificamos que a cor primária definida pelo branding apresentava contraste insuficiente quando aplicada com textos brancos, atingindo apenas 2.52:1. Para preservar a identidade visual sem comprometer acessibilidade e legibilidade, criamos uma nova variação da cor primária, reduzindo levemente sua luminosidade enquanto mantínhamos o mesmo matiz e percepção da marca.

O ajuste elevou o contraste para 3.3:1, alinhado ao benchmark utilizado, e garantiu melhor legibilidade e maior consistência de uso em componentes interativos.

Variáveis de cor

Após estruturar os tokens semânticos, configuramos os modos de variável no Figma para mapear automaticamente os valores de tema claro e escuro no nível semântico do sistema.

Essa estrutura também preparou o sistema para futuras expansões de branding e novos temas, reduzindo esforço operacional e aumentando a escalabilidade do Design System.

Dark mode como um único switch

Com os tokens semânticos configurados para ambos os temas, alternar entre light e dark mode passou a ser apenas um toggle de variável no nível de frame dentro do Figma.

Toda a adaptação visual é controlada pela camada semântica de tokens, que redefine automaticamente cores, contrastes e estados entre os diferentes modos. A mesma estrutura também prepara o sistema para futuras expansões, como temas de alto contraste, white-labels ou novas variantes de marca, sem necessidade de duplicar interfaces ou manter versões separadas de tela.

Resultados e Próximos Passos

O sistema de tokens semânticos substituiu uma estrutura baseada em hex codes dispersos por uma única fonte de verdade para cores em todo o produto. A nova arquitetura reduziu inconsistências, facilitou manutenção e tornou a criação de novos temas significativamente mais escalável.

A abordagem accessibility-first também permitiu identificar problemas de contraste ainda na fase de design, antes de chegarem à produção. Documentar combinações válidas de cores e seus respectivos contextos de uso criou uma referência compartilhada entre design e desenvolvimento, reduzindo ciclos de revisão, eliminando decisões subjetivas sobre contraste e acelerando a construção de interfaces consistentes.

Como próximos passos, a estrutura foi preparada para suportar novas variantes de marca, temas white-label e modos de alto contraste, aproveitando a mesma camada semântica já implementada no sistema.

O que aprendi

Este projeto reforçou que um Design System não é apenas sobre interface visual, mas sobre criar uma linguagem compartilhada entre times. No momento em que deixamos de discutir “o teal do botão” e passamos a falar sobre “interactive-primary-light”, as decisões se tornaram mais claras, consistentes e escaláveis. A semântica deixou de ser apenas uma camada de organização e passou a orientar a forma como o produto era pensado e construído.

Também ficou evidente que acessibilidade precisa fazer parte da fundação do sistema, não aparecer apenas como validação final. A matriz de contraste não foi tratada como uma checagem opcional, mas como um critério estrutural. Cada token já nascia considerando legibilidade, contraste e segurança de uso em diferentes contextos.

Outro aprendizado importante foi entender que documentação e treinamento têm o mesmo peso que a arquitetura técnica do sistema. Um sistema de tokens bem construído perde valor se as pessoas não souberem aplicá-lo no dia a dia. As sessões de alinhamento e onboarding foram fundamentais para transformar a adoção em algo realmente consistente entre design e desenvolvimento.

Hoje, levo esse princípio para qualquer novo projeto: primeiro vem o significado, depois vem a aparência. Se um token não possui uma função clara dentro do sistema, ele provavelmente não deveria existir.