TopSend DS
Quando cheguei na TopSend, não existia design system. Cada tela decidia cor, espaçamento e componente do seu jeito. Criei a base que hoje sustenta a plataforma inteira e a vertical iGaming.
- O quê
- Design system criado do zero
- Cliente
- TopSend
- Papel
- Product Designer
- Duração
- 2025 até hoje
- Onde
- Web
O ponto de partida
Sem uma fonte de verdade, o mesmo botão aparecia com três cores e o mesmo card com quatro raios diferentes. Cada tela nova custava decisões que já deveriam estar tomadas.
Comecei pelo contrato: o que é token, quem pode ter hex, como um componente é documentado e como uma mudança é registrada.
- Uma fonte de verdade
- Hex só existe no arquivo de tokens. Todo o resto consome variáveis.
- Dark-first, com tema claro
- Cada token tem versão clara, com ajuste de contraste quando precisa.
- Documentação viva
- Cada componente mostra anatomia, estados, variações e quando usar.
- Versionado
- Versionamento semântico e changelog: o time sabe o que mudou e por quê.
Fundamentos
Lime no escuro, roxo no claro. Texto com contraste AA e ações principais com AAA nos dois temas. Espaçamento em múltiplos de 8, com breakpoints, elevação e raios definidos como tokens.
A marca entrou no sistema também: logos em todas as versões e a sub-marca TopChat, desenhada a partir dos mesmos elementos.
Componentes
27 componentes, do botão à tabela de dados, cada um com versão clara e escura. A regra do projeto é simples: se o componente não existe, ele nasce no design system antes de aparecer numa tela.
Regras automáticas de aderência apontam quando alguém usa uma cor fora dos tokens, então o sistema não se degrada com o tempo.
Resultado
Uma base de 27 componentes e fundamentos documentados que sustenta 35 telas da plataforma e 24 da vertical iGaming.
Contraste AA no texto e AAA nas ações principais, nos dois temas.
Cada mudança registrada com versão e data no changelog, então o time sabe o que mudou em cada componente e por quê.
Tem um produto parecido travando?