Espaçamento & Grid
Sistema 4pt
Todo espaçamento (padding, margin, gap) parte de múltiplos de 4px. O uso mais frequente vive nos passos de 8px.
01
Escala de espaçamento
space-0.5
2px
space-1
4px
space-1.5
6px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px
space-20
80px
space-24
96px
space-32
128px
02
Border radius
xs
4px
sm
6px
md
10px
lg
14px
xl
20px
2xl
28px
full
9999px
03
Border width
hairline · 0.5px
1 · 1px
2 · 2px
4 · 4px
04
Grid responsivo
12 colunas no desktop, colapsa para 4 no mobile. Gutters de 24px, margens de 32px.
12-col grid · desktop
1
2
3
4
5
6
7
8
9
10
11
12
Desktop
12 col · 24px gutter · 32px margin
Tablet
8 col · 20px gutter · 24px margin
Mobile
4 col · 16px gutter · 16px margin
05
Container widths
max-w-prose
672px
Artigos, docs, formulários
max-w-app
1280px
Layouts de app padrão
max-w-wide
1536px
Dashboards, tabelas grandes
06
Breakpoints
sm
≥ 640px
Mobile horizontal / phablet
md
≥ 768px
Tablet portrait
lg
≥ 1024px
Tablet horizontal / laptop pequeno
xl
≥ 1280px
Desktop padrão
2xl
≥ 1536px
Telas grandes