Design System para Startup White Label

Criei este design system para uma startup que precisava tirar vários produtos da mesma prateleira. A regra era clara: todo produto saía white label — o cliente final trocava a cor e o logo, e o resto continuava sendo o mesmo sistema. As referências vieram da própria startup: o benchmark principal foi o Carbon, o design system da IBM, escolhido exatamente por separar tokens, componentes e padrões com clareza. Foi essa régua de arquitetura que usei para construir uma base única que a startup aplicava nos produtos de prateleira e nas personalizações de cada cliente.

Sem uma base única, a startup não conseguia crescer:

• Produtos de prateleira, cada um para um lado: cada produto novo começava do zero e a qualidade oscilava.
• White label de verdade: o cliente precisava trocar cor e logo sem quebrar nada — e isso só funciona se a cor for um token, não um valor fixo na tela.
• Duas pontas para atender: quem desenha no Figma e quem programa precisam ler a mesma definição, com os mesmos nomes.
• Sem documento, sem escala: sem tokens, componentes e padrões escritos, cada novo produto cobrava gente nova para redesenhar.

Product Designer

1. Etapa 1

   Descoberta com a startup

   Entender os produtos de prateleira e o que o white label exigia: cor e logo trocáveis em qualquer produto.

2. Etapa 2

   Fundamentos e tokens

   Grid de 8px, espaçamentos, raios, sombras, tipografia e a paleta de azuis com cor adaptável.

3. Etapa 3

   Componentes e padrões

   Botões, formulários, alertas, abas, cards, KPIs, tabela, timeline e os fluxos de uso, com todos os estados.

4. Etapa 4

   Acessibilidade e entrega

   Verificação WCAG 2.1, ícones e grid responsivo, e exportação dos tokens em JSON e CSS para Figma e código.

Um sistema completo, documentado em pranchas e exportado em código:

• Fundamentos: grid de 8px, espaçamentos de 4 a 128, raios e sombras definidos como tokens.
• Cores: paleta de azuis em nove tons, neutros, semânticos (sucesso, alerta, erro, informação) e pares de contraste — é aqui que a cor do cliente entra sem tocar nas telas.
• Tipografia: Inter com pesos e escala de display a microcopy, com versão clara e escura.
• Componentes e padrões: botões, formulários, alertas, abas, cards, KPIs, tabela, timeline e fluxos de uso, cada um com seus estados.
• Ícones, grade e acessibilidade: família de ícones por categoria e tamanho, breakpoints de painel e verificação WCAG 2.1 com leitores de tela.
• Entrega: tokens exportados em JSON e CSS e pacotes prontos para React, Tailwind, Vue, Angular e Figma.

O sistema virou a base de todos os produtos de prateleira da startup: cada produto saía com a mesma arquitetura de telas, e o cliente só precisava escolher a cor e o logo. Como a cor é token, o white label acontece sem mexer em nenhuma tela — e o mesmo pacote de tokens vai para o Figma e para o código, então o que se desenha é o que se programa.