Espaçamento & Grid
Tudo é múltiplo de 4
Base 4px, do 2px ao 128px. Grid responsivo 12/8/4 e containers padronizados.
Escala base 4
--sp-0-5
2px
--sp-1
4px
--sp-1-5
6px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
20px
--sp-6
24px
--sp-8
32px
--sp-10
40px
--sp-12
48px
--sp-16
64px
--sp-20
80px
--sp-24
96px
--sp-32
128px
Border radius
sm · 4px
md · 8px
lg · 12px
pill · ∞
circle · ∞
Border width
--bw-hairline
0.5px
--bw-1
1px
--bw-2
2px
--bw-4
4px
Grid responsivo
| Breakpoint | Colunas | Gutter | Margem |
|---|---|---|---|
| Desktop ≥1024px | 12 | 24px | 32px |
| Tablet ≥640px | 8 | 20px | 24px |
| Mobile | 4 | 16px | 16px |
Container widths
| Token | Largura | Uso |
|---|---|---|
| max-w-prose | 672px | Formulários, docs |
| max-w-app | 1280px | Layout de app padrão |
| max-w-wide | 1536px | Dashboards e tabelas densas |
Breakpoints
| Nome | Min-width | Uso |
|---|---|---|
| mobile | 0 | Base mobile-first |
| sm | 640px | Tablet retrato |
| md | 768px | Tablet paisagem |
| lg | 1024px | Desktop |
| xl | 1280px | Desktop wide |
| 2xl | 1536px | Monitor gigante |