Um sistema comum à plataforma, ao site e ao cadastro, feito em uma semana: seis princípios, tokens com tema claro e escuro e 42 componentes, testados num produto novo sem nenhuma cor ou estilo fora do sistema.
Empresa
Appmax
Papel
Levantamento, princípios, tokens, componentes e telas
Time
Só eu
Período
1 a 8 de outubro de 2026
Ferramentas
Figma (variáveis e modos) e IA, no levantamento técnico e na montagem
Resultado
Arquivo em uso pelo time de design, testado num produto novo
Contexto
A Appmax mantém três produtos com interfaces próprias: a plataforma, o site e o cadastro de novos clientes. Propus um design system comum aos três e o testei num produto novo.
Problema
Não existia um sistema único para servir de referência às telas dos três produtos. O objetivo era reunir num só lugar as decisões de interface, os valores de cor, texto e espaço e os componentes, de modo que uma tela nova pudesse usá-los sem decidir tudo de novo.
Meu papel
Fiz sozinha o levantamento, os princípios, os tokens, os componentes e as telas, de 1 a 8 de outubro de 2026. A IA fez o levantamento técnico das cores, fontes e espaçamentos e acelerou a montagem. As decisões de princípios, tokens e componentes foram minhas.
Processo
Levantamento dos três produtos
Antes de desenhar qualquer coisa, olhei os três produtos lado a lado. A IA fez o levantamento técnico: um navegador abriu cada produto e leu as cores, fontes, tamanhos, raios e espaçamentos que estão no código.
3produtos levantados lado a lado: plataforma, site e cadastro
6princípios definidos antes de escolher cor ou fonte
6,7:1de contraste do roxo de ação com texto branco, acima dos 4,5:1 exigidos pelo nível AA
Roteiro de discovery
Para organizar o discovery do novo sistema, montei no Figma um roteiro com 10 passos em 4 etapas, a partir do método do Design System Specialist, da Meiuca, e de atividades da Liga DS. Os passos vão de stakeholders, nome e discovery de tech até os inventários de estilo e de componentes, o concept visual, os tokens, o desenho dos componentes, o handoff e a arquitetura da documentação. Todo passo segue o mesmo modelo: por que existe, o que sai dele, quem é a pessoa mais indicada e o erro comum, com perguntas para responder e dicas. Nesta semana fiz os passos de inventário, tokens e componentes. Stakeholders, handoff e documentação ficaram para a etapa seguinte.
Princípios antes de cor
Antes de escolher cor ou fonte, defini como as telas devem funcionar. São seis princípios, cada um com a heurística que o sustenta e os tokens e componentes onde aparece. Quando duas propostas de tela discordam, são eles que decidem.
Princípio
Na prática
Por quê
O dinheiro vem primeiro
Valor em reais grande, centavos menores, verde só para dinheiro entrando
O olhar vai primeiro ao que é maior (hierarquia visual)
Uma ação principal por tela
Um único botão cheio; o resto em cinza ou link
Quando só uma ação tem destaque, fica claro qual é o próximo passo (hierarquia visual)
Menos ruído visual
Pesos leves e uma cor de destaque, só em ação e estado
O que é diferente chama atenção, então só ação e estado ganham cor (efeito Von Restorff)
Dado concreto na tela
Data, cliente, origem e status em cada linha
A pessoa decide olhando cada linha, sem lembrar de outra tela (reconhecer em vez de lembrar)
Sem surpresa
Taxa, prazo e consequência antes da confirmação
Previne o erro antes da confirmação e mostra o status da operação (prevenção de erro e visibilidade do status)
Acessível por padrão
Contraste AA, foco visível, rótulo sempre à mostra e alvo de 40 px no painel e 48 px no cadastro e no celular, acima dos 24 px que a WCAG 2.2 exige
Contraste e foco vêm da WCAG 2.2; alvos maiores são mais fáceis de acertar (Lei de Fitts); a Lei Brasileira de Inclusão exige acessibilidade em sites (art. 63)
Tokens e componentes
Cores primitivas (violeta, tinta e status) alimentam as cores semânticas, que têm um modo claro e um escuro. Espaço em múltiplos de 4, quatro raios com uso definido, três alturas de controle e uma sombra só, para o que fica por cima da tela. Em cima disso, 42 componentes, cada um com quando usar, o que evitar e como fica no escuro.
Primitivos de cor: violeta, tinta e status. O roxo de ação é o violeta 600, e os primitivos não vão direto para a tela.Espaço, raio, altura e sombra. O contraste de cada par semântico foi conferido nos dois temas.As variantes do Botão, no tema claro e no escuro.
Telas que já existiam, refeitas
Remontar telas reais mostra se as peças dão conta. Refiz o cadastro só com componentes e tokens.
O cadastro refeito com o sistema. Cada número marca uma decisão, explicada ao lado.
Teste do sistema: um produto novo
Para testar o sistema fora das telas que já existiam, criei a Conciliação, um produto fictício que confere cada venda com o repasse que caiu na conta. A dor veio de um processo real do financeiro das lojas, feito à mão em planilha. As referências foram os relatórios de conciliação da Stripe e da Adyen.
Visão do dia: o que fazer hoje.
Conferência no tema claro: onde está a diferença.A mesma tela no tema escuro. Nenhuma cor foi trocada à mão: cada componente buscou o valor do modo.
Decisões
O valor em reais vem primeiroO que vi
Na plataforma de vendas, o valor em reais é a informação mais importante da maioria das telas.
O que decidi
Mostrar o valor em 40 px, com os centavos menores, e usar verde só quando o dinheiro está entrando.
Por quê
O olhar vai primeiro ao que é maior, então a pessoa vê o valor antes de qualquer outro dado da tela.
Uma ação principal por telaO que vi
Cada tela existe para uma ação principal, como resolver divergências na Conciliação.
O que decidi
Um único botão cheio por tela. As outras ações ficam em botão cinza ou em link.
Por quê
Com menos escolhas competindo, fica claro o que fazer em seguida.
Contraste e alvo de clique como pisoO que vi
O roxo de ação não passava no contraste AA com texto branco.
O que decidi
Um roxo de ação com 6,7:1 de contraste com texto branco, e todos os pares de cor conferidos nos dois temas. O alvo de clique é de 40 px no painel e de 48 px no cadastro e no celular, acima dos 24 px que a WCAG 2.2 exige (critério 2.5.8). No celular, os 48 px atendem ao que a Apple (44 pt) e o Material (48 dp) recomendam para toque.
Por quê
Texto em botão precisa ser legível para todas as pessoas, e um alvo maior é mais fácil de acertar.
Resultado
O time de design passou a trabalhar no arquivo do sistema.
No teste do sistema, a Conciliação foi montada com três tipos de página (visão do dia, conferência e fluxo em passos), 20 componentes que já existiam e nenhuma cor ou estilo fora do sistema.
