O que é um design system de verdade
Design system não é uma biblioteca de componentes. É um conjunto de decisões compartilhadas — visual, de interação e de código — que permite times independentes construírem experiências coerentes.
A biblioteca de componentes é a implementação. O design system é a filosofia por trás dela.
Os três pilares
1. Tokens de design
Tokens são as variáveis fundamentais do sistema: cores, tipografia, espaçamento, bordas. Eles são a camada de abstração entre o design e o código.
export const tokens = {
color: {
primary: 'hsl(221.2 83.2% 53.3%)',
background: 'hsl(0 0% 100%)',
},
spacing: {
sm: '0.5rem',
md: '1rem',
lg: '1.5rem',
},
}2. Componentes primitivos
Componentes sem opinião visual — apenas comportamento e acessibilidade. Radix UI e Headless UI são exemplos. Sobre eles você aplica os tokens.
3. Componentes de produto
Combinações de primitivos com contexto de produto específico. São os que mais variam entre times e precisam de documentação clara de uso.
Governança: o problema real
A maioria dos design systems falha não na implementação técnica — mas na governança. Quem decide quando um componente entra? Quem revisa breaking changes? Quem documenta?
Modelo que funciona:
- Time de plataforma: mantém o core, define padrões
- Contribuições: qualquer time pode propor, time de plataforma aprova
- RFC process: para mudanças que afetam múltiplos consumidores
Versionamento semântico
Trate seu design system como uma biblioteca pública: semver rigoroso, changelogs detalhados, período de deprecação antes de remover.
Cada breaking change sem aviso é dívida de confiança com os times consumidores.
Documentação que as pessoas usam
- Exemplos reais, não exemplos mínimos
- Playground interativo (Storybook ou similar)
- Guia de “quando usar X vs Y”
- Acessibilidade documentada por componente
Conclusão
Um design system bem mantido é um multiplicador de velocidade para todos os times de produto. O investimento inicial é alto — espere 3 a 6 meses para ver retorno — mas o impacto em consistência e velocidade de desenvolvimento justifica em produtos com mais de dois times.