Espaçamento
Escala construída sobre a unidade base do Tailwind v4 (4px), em três grupos semânticos: Linked (2–4px), Related (8–24px) e Distinct (32–64px). Três tokens semânticos complementam a escala para padding de conteúdo, seções e página.
Escala recomendada
| Tailwind | Valor | Grupo | Escala |
|---|---|---|---|
| p-0.5 · gap-0.5 | 2px | Linked | |
| p-1 · gap-1 | 4px | Linked | |
| p-2 · gap-2 | 8px | Related | |
| p-3 · gap-3 | 12px | Related | |
| p-4 · gap-4 | 16px | Related | |
| p-6 · gap-6 | 24px | Related | |
| p-8 · gap-8 | 32px | Distinct | |
| p-10 · gap-10 | 40px | Distinct | |
| p-12 · gap-12 | 48px | Distinct | |
| p-16 · gap-16 | 64px | Distinct |
Tokens semânticos
--spacing-content
16px
Padding padrão de conteúdo (cards, seções internas).
--spacing-section
48px
Espaçamento entre seções de uma página.
--spacing-page
64px
Margem externa de página.
--spacing-rail
80px
Largura/altura do rail de navegação do Concierge (AppShell).
--spacing-chat-max
760px
Largura máxima da coluna de chat do Concierge.