Espaçamento
Uma escala com base de 4px, espelhando os padrões do Tailwind para que o código existente continue funcionando sem reescritas.
Um mesmo ritmo em todos os produtos é Valor: espaço para respirar consistente, que dá a cada tela a mesma sensação calma e duradoura.
| Token | Valor | Uso |
|---|---|---|
spacing.1 | 4px | Espaço de cabelo |
spacing.2 | 8px | Espaço inline apertado |
spacing.3 | 12px | Espaço inline compacto |
spacing.4 | 16px | Padrão (ritmo 1×) |
spacing.6 | 24px | Espaço entre seções |
spacing.8 | 32px | Padding de card / espaço de layout |
spacing.12 | 48px | Espaço de layout grande |
spacing.16 | 64px | Padding de página (mobile) |
spacing.24 | 96px | Padding de hero |
No Tailwind
<div class="p-4 gap-6"> <!-- padding 16px, gap 24px -->O preset do Tailwind conecta a escala completa. Você pode usar qualquer valor de p-0.5 (2px) até p-32 (128px).
Não faça
- Não introduza valores estranhos (
p-[14px],p-[5]). Eles quebram o ritmo. - Não brigue com a escala. Se
gap-4está apertado demais egap-6solto demais, a resposta não égap-5. Escolha um e ajuste o layout ao redor.