Core Design System
Arquitetura de tokens multi-marca e biblioteca de componentes acessíveis para ecossistemas digitais.
Criação e estruturação do design system corporativo unificado, conectando equipes de design de produto e engenharia front-end através de tokens semânticos e governança automatizada.
Lead Architect no desenvolvimento dos tokens tipográficos, de cor e espaçamento em Style Dictionary, além da especificação técnica de 40+ componentes React acessíveis.
A organização mantinha 4 produtos digitais distintos com código duplicado, múltiplos padrões de UI e severas lacunas de acessibilidade que geravam retrabalho constante entre design e desenvolvimento.
Alterar um único padrão visual ou ajuste de marca levava semanas de alinhamento manual e demandava refatorações em dezenas de repositórios front-end isolados.
Uma auditoria técnica identificou 142 variações isoladas de cores hexadecimais no código e mais de 30 estilos de botões redundantes sendo renderizados nos produtos.
Definição do modelo de arquitetura de tokens (Globals, Semantics, Components).
Permitiu que novos temas e marcas fossem criados sem alterar o código dos componentes React.
Aumentou a complexidade inicial da taxonomia de design tokens.
Tempo de criação de um novo tema reduzido de 3 semanas para 2 dias.
Garantia de conformidade com WCAG 2.2 AA em todos os pull requests.
Integrar testes de acessibilidade e checagem de contraste diretamente na pipeline de build da biblioteca.
Bloqueia merges se os testes automatizados encontrarem violações de contraste ou foco.
100% dos componentes liberados cumprem integralmente as exigências de acessibilidade.
Uma infraestrutura de design robusta baseada em Figma Tokens, Style Dictionary, Storybook e componentes React tipados com acessibilidade de nível internacional.
- ✓ Taxonomia de tokens semânticos escalável e documentada
- ✓ Biblioteca de componentes React com foco visível e teclado integral
- ✓ Portal de documentação viva integrado ao Storybook e GitHub Actions
Visão conceitual da arquitetura de tokens semânticos e guia de estilo do Core Design System.
Governança & Developer Experience
Criação de fluxos claros de contribuição, versionamento semântico (SemVer) e canal direto de suporte para mais de 50 desenvolvedores e designers.
Aumento expressivo na velocidade de entrega das equipes de produto.
Eliminação de inconformidades visuais entre os produtos web da companhia.
Cultura de acessibilidade consolidada em toda a diretoria de tecnologia.
- Um design system é 20% componentes e 80% governança, cultura e alinhamento humano.
- Tokens semânticos claros são a ponte definitiva para unificar linguagem entre designers e engenheiros.
- Acessibilidade não deve ser tratada como ajuste final, mas como requerimento fundamental de arquitetura.