O Phiz \u00e9 um aplicativo originalmente chin\u00eas, recentemente lan\u00e7ado 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\u00e1vel.<\/p>\n\n\n\n
A estrutura de cores havia crescido sem padroniza\u00e7\u00e3o, com hex codes aplicados diretamente nos componentes e sem categorias sem\u00e2nticas claras. O mesmo tom era utilizado para fun\u00e7\u00f5es diferentes, criando inconsist\u00eancias visuais, dificultando a manuten\u00e7\u00e3o e tornando a expans\u00e3o do sistema lenta e pouco escal\u00e1vel.<\/p>\n\n\n\n
Construir do zero um sistema sem\u00e2ntico de tokens de cor, garantindo uma base escal\u00e1vel para theming, contraste seguro por design e adapta\u00e7\u00e3o consistente entre tema claro, tema escuro e futuras varia\u00e7\u00f5es de marca.<\/p>\n\n\n\n
Mapeamos cada aplica\u00e7\u00e3o de cor atual atrav\u00e9s de todos os fluxos: conte\u00fado, backgrounds, borders e marca. Tamb\u00e9m adicionamos tokens a a\u00e7\u00f5es, feedback e elementos fixos usando a mesma cor de marca como base.<\/p>\n\n\n\n
A partir de defini\u00e7\u00f5es do time respons\u00e1vel 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\u00f3gica clara para aplica\u00e7\u00e3o e manuten\u00e7\u00e3o das cores.<\/p>\n\n\n\n
Tamb\u00e9m substitu\u00edmos nomes gen\u00e9ricos e visuais por nomenclaturas sem\u00e2nticas, como “interactive-primary-light” em vez de “teal-10”. Isso estabeleceu um vocabul\u00e1rio compartilhado entre design e desenvolvimento, facilitando a documenta\u00e7\u00e3o, o handoff e a evolu\u00e7\u00e3o consistente do sistema.<\/p>\n\n\n\n
O principal benchmark definido foi o WhatsApp, aplicativo de mensagens mais utilizado no Brasil para definir o n\u00edvel m\u00ednimo de contraste esperado em elementos de a\u00e7\u00e3o com texto branco.<\/p>\n\n\n\n
Durante os testes, identificamos que a cor prim\u00e1ria 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\u00e7\u00e3o da cor prim\u00e1ria, reduzindo levemente sua luminosidade enquanto mant\u00ednhamos o mesmo matiz e percep\u00e7\u00e3o da marca.<\/p>\n\n\n\n
O ajuste elevou o contraste para 3.3:1, alinhado ao benchmark utilizado, e garantiu melhor legibilidade e maior consist\u00eancia de uso em componentes interativos.<\/p>\n\n\n\n
Ap\u00f3s estruturar os tokens sem\u00e2nticos, configuramos os modos de vari\u00e1vel no Figma para mapear automaticamente os valores de tema claro e escuro no n\u00edvel sem\u00e2ntico do sistema.<\/p>\n\n\n\n
Essa estrutura tamb\u00e9m preparou o sistema para futuras expans\u00f5es de branding e novos temas, reduzindo esfor\u00e7o operacional e aumentando a escalabilidade do Design System.<\/p>\n\n\n\n
Com os tokens sem\u00e2nticos configurados para ambos os temas, alternar entre light e dark mode passou a ser apenas um toggle de vari\u00e1vel no n\u00edvel de frame dentro do Figma.<\/p>\n\n\n\n
Toda a adapta\u00e7\u00e3o visual \u00e9 controlada pela camada sem\u00e2ntica de tokens, que redefine automaticamente cores, contrastes e estados entre os diferentes modos. A mesma estrutura tamb\u00e9m prepara o sistema para futuras expans\u00f5es, como temas de alto contraste, white-labels ou novas variantes de marca, sem necessidade de duplicar interfaces ou manter vers\u00f5es separadas de tela.<\/p>\n\n\n\n
O sistema de tokens sem\u00e2nticos substituiu uma estrutura baseada em hex codes dispersos por uma \u00fanica fonte de verdade para cores em todo o produto. A nova arquitetura reduziu inconsist\u00eancias, facilitou manuten\u00e7\u00e3o e tornou a cria\u00e7\u00e3o de novos temas significativamente mais escal\u00e1vel.<\/p>\n\n\n\n
A abordagem accessibility-first tamb\u00e9m permitiu identificar problemas de contraste ainda na fase de design, antes de chegarem \u00e0 produ\u00e7\u00e3o. Documentar combina\u00e7\u00f5es v\u00e1lidas de cores e seus respectivos contextos de uso criou uma refer\u00eancia compartilhada entre design e desenvolvimento, reduzindo ciclos de revis\u00e3o, eliminando decis\u00f5es subjetivas sobre contraste e acelerando a constru\u00e7\u00e3o de interfaces consistentes.<\/p>\n\n\n\n
Como pr\u00f3ximos passos, a estrutura foi preparada para suportar novas variantes de marca, temas white-label e modos de alto contraste, aproveitando a mesma camada sem\u00e2ntica j\u00e1 implementada no sistema.<\/p>\n\n\n\n
Redu\u00e7\u00e3o no tempo gasto criando fluxos com tema<\/p>\n<\/div>\n\n\n
Para gerar um dark mode totalmente coerente<\/p>\n<\/div>\n\n\n
Qualquer novo tema via modo de vari\u00e1vel, sem retrabalho<\/p>\n<\/div>\n<\/div>\n\n\n\n
Este projeto refor\u00e7ou que um Design System n\u00e3o \u00e9 apenas sobre interface visual, mas sobre criar uma linguagem compartilhada entre times. No momento em que deixamos de discutir “o teal do bot\u00e3o” e passamos a falar sobre “interactive-primary-light”, as decis\u00f5es se tornaram mais claras, consistentes e escal\u00e1veis. A sem\u00e2ntica deixou de ser apenas uma camada de organiza\u00e7\u00e3o e passou a orientar a forma como o produto era pensado e constru\u00eddo.<\/p>\n\n\n\n
Tamb\u00e9m ficou evidente que acessibilidade precisa fazer parte da funda\u00e7\u00e3o do sistema, n\u00e3o aparecer apenas como valida\u00e7\u00e3o final. A matriz de contraste n\u00e3o foi tratada como uma checagem opcional, mas como um crit\u00e9rio estrutural. Cada token j\u00e1 nascia considerando legibilidade, contraste e seguran\u00e7a de uso em diferentes contextos.<\/p>\n\n\n\n
Outro aprendizado importante foi entender que documenta\u00e7\u00e3o e treinamento t\u00eam o mesmo peso que a arquitetura t\u00e9cnica do sistema. Um sistema de tokens bem constru\u00eddo perde valor se as pessoas n\u00e3o souberem aplic\u00e1-lo no dia a dia. As sess\u00f5es de alinhamento e onboarding foram fundamentais para transformar a ado\u00e7\u00e3o em algo realmente consistente entre design e desenvolvimento.<\/p>\n\n\n\n
Hoje, levo esse princ\u00edpio para qualquer novo projeto: primeiro vem o significado, depois vem a apar\u00eancia. Se um token n\u00e3o possui uma fun\u00e7\u00e3o clara dentro do sistema, ele provavelmente n\u00e3o deveria existir.<\/p>\n","protected":false},"excerpt":{"rendered":"
Construindo theming robusto com tokens acess\u00edveis<\/p>\n","protected":false},"author":2,"featured_media":0,"menu_order":2,"template":"","project_area":[2],"case_discipline":[],"case_platform":[],"class_list":["post-1002","case","type-case","status-publish","hentry","project_area-product-design"],"_links":{"self":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/case\/1002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/case"}],"about":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/types\/case"}],"author":[{"embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/users\/2"}],"version-history":[{"count":0,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=\/wp\/v2\/case\/1002\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1002"}],"wp:term":[{"taxonomy":"project_area","embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fproject_area&post=1002"},{"taxonomy":"case_discipline","embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcase_discipline&post=1002"},{"taxonomy":"case_platform","embeddable":true,"href":"https:\/\/staging.annemendes.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcase_platform&post=1002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}