React Design System para Aplicações Escaláveis
Design system de nível produção construído para uma fintech, estabelecendo primitivas compartilhadas, tokens de design e documentação para times em 6 superfícies de produto.
Visão geral
Design system completo entregue para uma fintech para unificar linguagem visual e de interação em toda a plataforma web. O sistema cobre componentes primitivos, padrões compostos, infraestrutura de tokens e documentação interativa — utilizado por 4 times de engenharia.
Contexto
O cliente tinha 4 times de produto construindo de forma independente com padrões inconsistentes, lógica duplicada e ausência de linguagem visual compartilhada. Novas funcionalidades exigiam coordenação excessiva para manter consistência.
Problema
Projetar e construir um sistema de componentes escalável que funcionasse como fonte única de verdade de UI em todas as superfícies, com infraestrutura sólida de tokens, APIs claras e plataforma de documentação colaborativa.
Responsabilidades
- ›Desenho da arquitetura completa de tokens cobrindo cores, spacing, tipografia, radius e shadows
- ›Construção de mais de 60 componentes primitivos e compostos com APIs de variante em CVA
- ›Definição da estrutura de documentação no Storybook e guias de contribuição
- ›Implementação de visual regression com Chromatic integrado ao CI
- ›Facilitação de sessões de alinhamento entre design e engenharia para ancorar decisões de tokens em variáveis do Figma
Decisões técnicas
class-variance-authority para variantes
Uso de CVA para codificar lógica de variantes como configuração tipada, tornando APIs previsíveis, auto-completáveis e desacopladas de detalhes de estilo.
Radix UI para primitivas acessíveis
Construção de componentes interativos sobre primitivas headless do Radix UI para garantir conformidade ARIA e navegação por teclado sem reimplementar acessibilidade complexa.
Tokens de design como fonte única de verdade
Estruturação de camada de tokens em CSS custom properties espelhando variáveis do Figma, garantindo consistência design-código e centralizando mudanças globais de tema.
Arquitetura
Estrutura de monorepo com pacotes separados para tokens, primitivas e compostos. Storybook como superfície principal de documentação e testes visuais. Chromatic como gate de regressão visual em CI.
Desafios
- ›Projetar convenções de nomenclatura de tokens que fossem significativas para design e engenharia
- ›Gerenciar estabilidade de API de componentes enquanto o sistema evoluía rapidamente
- ›Alcançar conformidade completa de acessibilidade em todos os componentes interativos
Resultados
Redução de 52% no ciclo de revisão de PRs relacionados à UI entre os times de produto
Conformidade WCAG 2.1 AA em todos os componentes interativos
Redução média de 35% no tempo de implementação de novas funcionalidades após adoção
Aprendizados
- ›Nomenclatura de tokens é um contrato de comunicação — investir na taxonomia correta gera retorno exponencial em alinhamento
- ›Um design system nunca está finalizado; o modelo de sustentação importa mais que o escopo inicial