Spacing & Radius
Sistema de espaçamento com unidade base de 4px (Tailwind padrão) e escala de border-radius com base de 12px (--radius: 0.75rem).
Spacing Scale
Escala padrão do Tailwind. Usar para padding, margin, gap.
0.52px0.125rem
14px0.25rem
1.56px0.375rem
28px0.5rem
2.510px0.625rem
312px0.75rem
416px1rem
520px1.25rem
624px1.5rem
832px2rem
1040px2.5rem
1248px3rem
1664px4rem
Border Radius
Base: --radius: 0.75rem (12px). Outras escalas derivadas automaticamente.
8px
rounded-smBadges, small elements
10px
rounded-mdInputs, buttons
12px
rounded-lgCards, containers
16px
rounded-xlLarge cards, sections
24px
rounded-2xlProduct cards, banners
9999px
rounded-fullAvatars, pills, circles
| Token | Valor | Classe | Uso |
|---|---|---|---|
--radius-sm | 8px | rounded-sm | Badges, small elements |
--radius-md | 10px | rounded-md | Inputs, buttons |
--radius-lg | 12px | rounded-lg | Cards, containers |
--radius-xl | 16px | rounded-xl | Large cards, sections |
| — | 24px | rounded-2xl | Product cards, banners |
| — | 9999px | rounded-full | Avatars, pills, circles |
Layout Widths
Larguras máximas padrão para containers de conteúdo.
| Contexto | Largura | Classe |
|---|---|---|
| Storefront content | 1060px | max-w-7xl |
| Docs content | 860px | max-w-[860px] |
| Dialog / Sheet | 480px | max-w-md |
| Form column | 384px | max-w-sm |