Espacamento
Escala de espaçamento alinhada com Radix UI.
Escala Visual
0
0px
--space-01
4px
--space-12
8px
--space-23
12px
--space-34
16px
--space-45
24px
--space-56
32px
--space-67
40px
--space-78
48px
--space-89
64px
--space-9Uso Recomendado
| Contexto | Step | Valor | Classe |
|---|---|---|---|
| Padding de botão | 2-3 | 8-12px | px-2, px-3 |
| Gap de form fields | 3 | 12px | gap-3 |
| Padding de card | 5 | 24px | p-5 |
| Gap entre cards | 4 | 16px | gap-4 |
| Padding de página | 5-6 | 24-32px | p-5, p-6 |
| Separação de seções | 6-8 | 32-48px | gap-6 a gap-8 |
Demo: Gap entre itens
gap-2
gap-4
gap-6