Fragmentação visual
Cada produto seguia padrões próprios, sem componentes compartilhados. Zero reuso entre equipes e marcas.
DesignSystem
O design system como redutor de custo operacional, criado para unificar mais de 20 produtos digitais em três segmentos de negócio.
em produção desde 202120+ produtos · uma base compartilhada
Delta Design System
Contexto
Uma plataforma de design capaz de escalar múltiplas marcas, produtos e equipes.
À medida que a Escale crescia, novas marcas e frentes de negócio surgiam em ritmos diferentes. Cada equipe decidia de forma independente, o que gerava inconsistências e retrabalho.
O desafio não era apenas criar componentes. Era estabelecer uma linguagem comum capaz de conectar pessoas,produtos e marcas em uma operação em expansão.
Foi nesse contexto que nasceu o Delta.
Meu papel
Liderei a construção do design system desde a fundação, definindo os ativos visuais, a estratégia, a governança e os processos que garantiriam sua adoção ao longo do tempo.
01 · Contexto
Entendendo o desafio
Antes de desenhar qualquer componente, era necessário compreender como os produtos eram construídos, onde estavam os pontos de atrito e quais decisões precisavam ser padronizadas. Mais do que um problema visual, era um problema de operação. Mapeamos os principais desafios.
Retrabalho crônico
Designers recriavam soluções já resolvidas a cada landing nova. Cada projeto recomeçava do zero, sem biblioteca de consulta.
Handoff sem padrão
A ambiguidade entre design e código gerava idas e vindas. Cada dev interpretava o layout à sua maneira, sem documentação.
Escala sem fundação
Novos produtos herdavam inconsistências em vez de padrões. A dívida visual crescia mais rápido que a empresa, com 3× mais marcas no roadmap.
White label
02 · Definindo a estratégia
Uma plataforma capaz de atender diferentes contextos, sem abrir mão de consistência, velocidade ou qualidade.
A estratégia partiu de uma arquitetura white label: múltiplas marcas compartilham a mesma fundação enquanto preservam suas identidades próprias.
Uma separação clara entre regras estruturais e características visuais, flexível o suficiente para evoluir junto com a empresa.
Uma fundação. Muitas marcas.
O princípio
Separar o que é estrutura do que é aparência, para que o sistema cresça sem se repetir.
Fundação
O que construí
A construção do Delta aconteceu em diferentes camadas,
cada uma responsável por sustentar a próxima.
Estruturei os fundamentos visuais que serviriam de base
para todo o ecossistema de produtos, transformando
decisões visuais em regras compartilhadas e escaláveis.
Semantic Color System
Color Tokens
Paleta semântica e escalável que comunica significado, acessibilidade e consistência em todos os produtos e marcas do ecossistema Delta.
Accessibility · Contrast
Diagrama de contrastes
A validação de contraste faz parte do processo de design, garantindo que todos os produtos do ecossistema Delta sejam mais inclusivos e acessíveis. Cada par da paleta é validado para acessibilidade (WCAG · AA ≥ 4.5 · AAA ≥ 7).
Biblioteca de componentes
Componentes reutilizáveis, acessíveis e
consistentes para acelerar o design e
garantir produtos digitais de alta qualidade.
Onde achar
Onde achar tudo
Onde achar tudo
que foi construído
23 componentes únicos, 46 versões em produção. Navegáveis com variantes, e stados, props e exemplos, no Storybook oficial do Delta.
Explore por dentro
Hands-on
Sempre atualizado
03.02 · Componentes
Biblioteca de componentes
01
Referência
Com a fundação estabelecida, desenvolvi a biblioteca de componentes que passou a servir como referência para designers e desenvolvedores.
02
Consistência
O foco não era apenas criar elementos reutilizáveis, mas construir padrões consistentes capazes de acelerar entregas sem comprometer a experiência.
03
Documentação
A biblioteca contemplava componentes documentados, variantes, estados e comportamentos preparados para
diferentes cenários de produto.
03.03 · White Label
Arquitetura
White Label
Um dos principais diferenciais do Delta foi sua capacidade de atender diferentes marcas a partir de uma única base.
Através da combinação entre tokens e componentes compartilhados, foi possível adaptar rapidamente interfaces para segmentos como telecomunicações, saúde e serviços financeiros, mantendo consistência estrutural e reduzindo custos de manutenção.
Uma Única Base
Consistência em todos os produtos e marcas.
Adaptação Rápida
Novas marcas e produtos com mais velocidade.
Redução de Custos
Menos manutenção, mais eficiência.
Escalabilidade
Crescimento sustentável com padrões sólidos.
03.04 · Simulação
Mesma base.
Marcas diferentes.
Simulação de troca de marca sobre o mesmo componente. Os tokens mudam (cor, raio, CTA); a estrutura, não. Clique nos botões para alternar entre os três conjuntos.
Marca A
240 Mega
Com Wi-Fi grátis e serviços digitais inclusos
TV por assinatura
130 canais digitais e HD
+ 100 canais grátis por 1 ano no combo
Plano de celular 10GB
+ 20GB bônus
Telefone fixo ilimitado
Ligações à vontade para qualquer operadora em todo o Brasil.
R$ 249,99
/mês
Pagamento no débito automática e fidelidade de 12 meses
Mais detalhesMarca B
240 Mega
Com Wi-Fi grátis e serviços digitais inclusos
TV por assinatura
130 canais digitais e HD
+ 100 canais grátis por 1 ano no combo
Plano de celular 10GB
+ 20GB bônus
Telefone fixo ilimitado
Ligações à vontade para qualquer operadora em todo o Brasil.
R$ 249,99
/mês
Pagamento no débito automática e fidelidade de 12 meses
Mais detalhesMarca C
240 Mega
Com Wi-Fi grátis e serviços digitais inclusos
TV por assinatura
130 canais digitais e HD
+ 100 canais grátis por 1 ano no combo
Plano de celular 10GB
+ 20GB bônus
Telefone fixo ilimitado
Ligações à vontade para qualquer operadora em todo o Brasil.
R$ 249,99
/mês
Pagamento no débito automática e fidelidade de 12 meses
Mais detalhesPersonalização sem reconstrução.
White label na prática.
O Delta foi estruturado para suportar múltiplas marcas a partir da mesma fundação de componentes.
Por meio de temas e tokens de design, características visuais como cores, tipografia e elementos de interface podem ser adaptadas sem alterar a lógica ou a estrutura dos componentes.
Um dos principais diferenciais do Delta foi atender diferentes marcas a partir de uma única base. Combinando tokens e componentes compartilhados, adaptei rapidamente interfaces para telecomunicações, saúde e serviços financeiros, mantendo consistência estrutural e reduzindo custos de manutenção.
03.05 · Governança
Além da biblioteca
A construção do sistema não terminava na biblioteca. Para garantir consistência ao longo do tempo, estruturei processos de governança que ajudaram o Delta a se tornar parte da cultura da organização. Essas iniciativas permitiram que o sistema continuasse evoluindo de forma sustentável, mesmo diante do crescimento da empresa.
Iniciativas que conduzi
Criação da Guilda de Design
Processos de contribuição
Manuais de uso do sistema
Documentação de criação e evolução de componentes
Alinhamento entre design e desenvolvimento
Disseminação de boas práticas entre equipes
04 · Impacto
Resultados
Um sistema que mudou como o time constrói produto: retrabalho reduzido, padrão visual coerente entre as 20+ marcas e handoff sem ambiguidade entre design e engenharia.
Impacto principal
−47%
no tempo de criação de novas interfaces,
do briefing ao protótipo navegável.
do briefing ao protótipo navegável.
Estimativa: feedback de prazos das squads (montagem de telas, antes vs. depois).
20+
Marcas na mesma base
Uma fundação, múltiplas identidades.
100%
Handoff documentado
Sem ambiguidade entre design e engenharia.
0
Redesenho na troca de marca
Troca via swap de tokens.
Antes e depois
A biblioteca virou referência interna: novos squads chegavam e encontravam uma fundação pronta, não um canvas em branco. O reaproveitamento virou o default.
DimensãoAntesDepois
Componentes compartilhados
Nenhum
Biblioteca completa
Início de cada projeto
Tudo do zero
Reaproveitamento
Documentação de handoff
Inexistente
100% documentada
Troca de marca
Redesenho manual
Swap de tokens
05 · Encerramento
Uma base.
Múltiplas experiências.
Ao consolidar tokens, componentes e diretrizes em um único sistema, o Delta tornou possível escalar produtos para diferentes contextos sem abrir mão da consistência.
O resultado foi um ecossistema mais eficiente, sustentável e preparado para evoluir.
600+Componentes
3Segmentos atendidos
1Base compartilhada
O Delta é mais que padrão.
É a estrutura que viabiliza crescimento.
