Design Tokens: A Base do Sistema
Design tokens são os átomos do nosso sistema visual. Eles definem valores fundamentais que são reutilizados em todo o projeto.
Categorias de Tokens
Espaçamento
Nossa escala de espaçamento é baseada em múltiplos de 4px:
$space-1: 0.25rem (4px)$space-2: 0.5rem (8px)$space-3: 0.75rem (12px)$space-4: 1rem (16px)
Cores
Cada tema define sua própria paleta, mas a estrutura é consistente:
- Background e Surface
- Foreground e Muted
- Accent e Accent Strong
- Line e Glow
Benefícios
- Consistência: Valores centralizados garantem uniformidade
- Manutenção: Mudanças propagam automaticamente
- Comunicação: Vocabulário compartilhado entre design e dev