Tokens de Espaço
Sistema de spacing baseado em múltiplos de 4px. Consistência em todos os componentes e layouts.
Múltiplos de 4px. Um valor fora da escala quebra o ritmo vertical da tela inteira.
xsGaps internos, ícones
sm
mdPadding padrão
lg
xl
2xl
3xl
Oito níveis nomeados. Um z-index inventado sempre ganha de quem precisa mais dele.
| base | Conteúdo padrão | |
| dropdown | Menus dropdown | |
| sticky | Headers fixos | |
| overlay | Backdrops | |
| modal | Modais, sheets | |
| popover | Tooltips, popovers | |
| toast | Notificações toast | |
| max | Cookie banner |
| Token | Largura | Colunas | Uso |
|---|---|---|---|
| xs | 1 col | Mobile small | |
| sm | 1-2 cols | Mobile large | |
| md | 2 cols | Tablet portrait | |
| lg | 2-3 cols | Tablet landscape / Laptop | |
| xl | 3-4 cols | Desktop | |
| 2xl | 4 cols | Wide desktop |