Escalando um Design System Multi-Brand
Projetando uma arquitetura de tokens semânticos para escalar Light & Dark Mode em um ecossistema white-label.
Plataforma:
Plataforma:
Aplicativos Mobile White-Label
Aplicativos Mobile
White-Label
Meu Papel
Product Designer
Product Designer
Duração
Duração
2 meses
Time
Time
Design + Engenharia
Desafio
O objetivo não era apenas implementar Dark Mode, mas reestruturar toda a arquitetura de cores do Design System para suportar múltiplas marcas white-label de forma escalável.
Os principais desafios eram:
Eliminar cores hardcoded dos componentes;
Desacoplar a identidade visual da estrutura do sistema;
Suportar Light e Dark Mode para diferentes marcas sem criar exceções;
Preservar consistência e acessibilidade.
O objetivo não era apenas implementar Dark Mode, mas reestruturar toda a arquitetura de cores do Design System para suportar múltiplas marcas white-label de forma escalável.
Os principais desafios eram:
Eliminar cores hardcoded dos componentes.
Desacoplar a identidade visual da estrutura do sistema.
Suportar Light e Dark Mode para diferentes marcas sem criar exceções.
Preservar consistência e acessibilidade.
Resultados
• Migração de 100% da biblioteca para Variáveis do Figma.
• Criação de temas independentes para cada marca (Light e Dark).
• Documentação da arquitetura para Design e Engenharia.
• Base escalável para Design System.
Resultados
• Migração de 100% da biblioteca para Variáveis do Figma.
• Criação de temas independentes para cada marca (Light e Dark).
• Documentação da arquitetura para Design e Engenharia.
• Base escalável para evolução do Design System.
• Migração de 100% da biblioteca para Variáveis do Figma.
• Criação de temas independentes para cada marca (Light e Dark).
• Documentação da arquitetura para Design e Engenharia.
• Base escalável para evolução do Design System.
100+
Variáveis de cor estruturadas
80+
Componentes tokenizados
Semanas → Dias
Tempo de adaptação de novas marcas
100+
Variáveis de cor estruturadas
80+
80+
Componentes tokenizados
Semanas → Dias
Tempo de adaptação de novas marcas
Auditoria do Design System
Antes de iniciar a migração, realizei uma auditoria para entender como as cores eram utilizadas.
Valores HEX aplicados diretamente nos componentes;
Baixo reaproveitamento entre produtos;
Identidade visual fortemente acoplada à interface;
Ausência de uma estrutura preparada para múltiplos temas.
Processo
Em vez de criar uma vers
ão paralela para Dark Mode, reorganizei completamente a arquitetura de cores inspirada no conceito de Design Tokens.
A estrutura passou a ser dividida em duas camadas:
Primitive Tokens
• Escalas tonais (Blue 50, Blue 100... Blue 900).
Semantic Tokens
• Intenção de uso (bg-surface-primary, color-text-secondary, color-border-default).
Com isso, os componentes passaram a depender apenas da intenção de uso do token, e não do valor da cor.
Tokenização completa da biblioteca:
Após definir a arquitetura, realizei a migração manual do Design System para variáveis do Figma, componente por componente:
• Backgrounds, textos, ícones, bordas, estados, overlays: tudo passou a consumir exclusivamente tokens semânticos.
Auditoria do Design System
Antes de iniciar a migração, realizei uma auditoria para entender como as cores eram utilizadas.
Valores HEX aplicados diretamente nos componentes;
Baixo reaproveitamento entre produtos;
Identidade visual fortemente acoplada à interface;
Ausência de uma estrutura preparada para múltiplos temas.
Processo
Em vez de criar uma versão paralela para Dark Mode, reorganizei completamente a arquitetura de cores inspirada no conceito de Design Tokens.
A estrutura passou a ser dividida em duas camadas:
Primitive Tokens
• Escalas tonais (Blue 50, Blue 100... Blue 900).
Semantic Tokens
• Intenção de uso (bg-surface-primary, color-text-secondary, color-border-default).
Com isso, os componentes passaram a depender apenas da intenção de uso do token, e não do valor da cor.
Tokenização completa da biblioteca:
Após definir a arquitetura, realizei a migração manual do Design System para variáveis do Figma, componente por componente:
• Backgrounds, textos, ícones, bordas, estados, overlays: tudo passou a consumir exclusivamente tokens semânticos.
Processo
Em vez de criar uma versão paralela para Dark Mode, reorganizei completamente a arquitetura de cores inspirada no conceito de Design Tokens.
A estrutura passou a ser dividida em duas camadas:
Primitive Tokens
• Escalas tonais (Blue 50, Blue 100... Blue 900).
Semantic Tokens
• Intenção de uso (bg-surface-primary, color-text-secondary, color-border-default).
Com isso, os componentes passaram a depender apenas da intenção de uso do token, e não do valor da cor.
A arquitetura foi organizada em modos independentes para cada marca.
Assim, os mesmos componentes passaram a ser reutilizados entre produtos, enquanto apenas os valores dos tokens mudavam conforme o tema ativo.
A identidade visual passou a ser responsabilidade do tema, não dos componentes.
Tokenização completa da biblioteca:
Após definir a arquitetura, realizei a migração manual do Design System para variáveis do Figma, componente por componente:
• Backgrounds, textos, ícones, bordas, estados, overlays: tudo passou a consumir exclusivamente tokens semânticos.
A arquitetura foi organizada em modos independentes para cada marca.
Assim, os mesmos componentes passaram a ser reutilizados entre produtos, enquanto apenas os valores dos tokens mudavam conforme o tema ativo.
A identidade visual passou a ser responsabilidade do tema, não dos componentes.
O teste de estresse: marcas saturadas
O mapeamento funcionava bem para marcas neutras, mas quebrava em identidades muito saturadas.
Solução: em vez de criar exceções por marca, os tokens passaram a referenciar diferentes níveis de uma mesma escala tonal conforme o tema ativo, preservando contraste, hierarquia e identidade sem aumentar a complexidade.
Acessibilidade
Toda a arquitetura foi validada utilizando as ferramentas de contraste do próprio Figma.
Esse processo garantiu que Light e Dark Mode mantivessem níveis adequados de contraste antes do handoff para Engenharia.
Trade-offs e Handoff
Decisões arquitetônicas:
Uso de tokens semânticos em vez de exceções por marca;
Componentes desacoplados da identidade visual por meio das Variáveis do Figma;
Temas independentes para Light e Dark Mode em cada marca;
Escalas tonais para preservar contraste em identidades saturadas;
Limitações estruturais documentadas em vez de solucionadas com adaptações pontuais.
Handoff:
Para facilitar a adoção pela Engenharia, entreguei:
Arquitetura de Design Tokens documentada;
Variáveis e temas organizados no Figma;
Diretrizes para Light e Dark Mode;
Regras de utilização de componentes e tokens;
Referência técnica para futuras evoluções do sistema.
Aprendizados
• Clareza semântica é mais importante que precisão visual em sistemas escaláveis;
• Componentes devem conhecer apenas a intenção de uso da cor, nunca seu valor
Produtos white-label exigem separar identidade visual da arquitetura do Design System;
Limitações arquitetônicas devem ser documentadas, não contornadas
O Dark Mode deixou de ser uma feature visual e passou a representar uma transformação estrutural na arquitetura do Design System, estabelecendo uma base reutilizável para múltiplos produtos, marcas e futuras evoluções da plataforma.
Acessibilidade
Toda a arquitetura foi validada utilizando as ferramentas de contraste do próprio Figma.
Esse processo garantiu que Light e Dark Mode mantivessem níveis adequados de contraste antes do handoff para Engenharia.
Trade-offs e Handoff
Projetar um Design System multi-brand exigiu equilibrar escalabilidade, simplicidade de implementação e consistência entre Design e Engenharia.
Decisões arquitetônicas:
Uso de tokens semânticos em vez de exceções por marca;
Componentes desacoplados da identidade visual por meio das Variáveis do Figma;
Temas independentes para Light e Dark Mode em cada marca;
Escalas tonais para preservar contraste em identidades saturadas;
Limitações estruturais documentadas em vez de solucionadas com adaptações pontuais.
Handoff:
Para facilitar a adoção pela Engenharia, entreguei:
Arquitetura de Design Tokens documentada;
Variáveis e temas organizados no Figma;
Diretrizes para Light e Dark Mode;
Regras de utilização de componentes e tokens;
Referência técnica para futuras evoluções do sistema.
Aprendizados
• Clareza semântica é mais importante que precisão visual em sistemas escaláveis;
• Componentes devem conhecer apenas a intenção de uso da cor, nunca seu valor
Produtos white-label exigem separar identidade visual da arquitetura do Design System;
Limitações arquitetônicas devem ser documentadas, não contornadas
O Dark Mode deixou de ser uma feature visual e passou a representar uma transformação estrutural na arquitetura do Design System, estabelecendo uma base reutilizável para múltiplos produtos, marcas e futuras evoluções da plataforma.
A arquitetura foi organizada em modos independentes para cada marca.
Assim, os mesmos componentes passaram a ser reutilizados entre produtos, enquanto apenas os valores dos tokens mudavam conforme o tema ativo.
A identidade visual passou a ser responsabilidade do tema, não dos componentes.
O teste de estresse: marcas saturadas
O mapeamento funcionava bem para marcas neutras, mas quebrava em identidades muito saturadas.
Solução: em vez de criar exceções por marca, os tokens passaram a referenciar diferentes níveis de uma mesma escala tonal conforme o tema ativo, preservando contraste, hierarquia e identidade sem aumentar a complexidade.
O teste de estresse: marcas saturadas
O mapeamento funcionava bem para marcas neutras, mas quebrava em identidades muito saturadas.
Solução: em vez de criar exceções por marca, os tokens passaram a referenciar diferentes níveis de uma mesma escala tonal conforme o tema ativo, preservando contraste, hierarquia e identidade sem aumentar a complexidade.
Acessibilidade
Toda a arquitetura foi validada utilizando as ferramentas de contraste do próprio Figma.
Esse processo garantiu que Light e Dark Mode mantivessem níveis adequados de contraste antes do handoff para Engenharia.
Trade-offs e Handoff
Decisões arquitetônicas:
Uso de tokens semânticos em vez de exceções por marca;
Componentes desacoplados da identidade visual por meio das Variáveis do Figma;
Temas independentes para Light e Dark Mode em cada marca;
Escalas tonais para preservar contraste em identidades saturadas;
Limitações estruturais documentadas em vez de solucionadas com adaptações pontuais.
Handoff:
Para facilitar a adoção pela Engenharia, entreguei:
Arquitetura de Design Tokens documentada;
Variáveis e temas organizados no Figma;
Diretrizes para Light e Dark Mode;
Regras de utilização de componentes e tokens;
Referência técnica para futuras evoluções do sistema.
Aprendizados
• Clareza semântica é mais importante que precisão visual em sistemas escaláveis;
• Componentes devem conhecer apenas a intenção de uso da cor, nunca seu valor
Produtos white-label exigem separar identidade visual da arquitetura do Design System;
Limitações arquitetônicas devem ser documentadas, não contornadas
O Dark Mode deixou de ser uma feature visual e passou a representar uma transformação estrutural na arquitetura do Design System, estabelecendo uma base reutilizável para múltiplos produtos, marcas e futuras evoluções da plataforma.