Spacing
Uma única base (4px) gera toda a escala de espaçamento via calc() do Tailwind v4.
Espaçamento é o ritmo da interface. É o que diz "esses dois elementos andam juntos" e "esse outro é parte de outro grupo" sem escrever uma palavra. Em UI, 70% das decisões visuais são decisões de spacing — e fazer isso bem significa parar de inventar valores e começar a usar uma escala.
Como a escala funciona
A KDS herda a estratégia do Tailwind v4: uma única variável
(--spacing: 0.25rem, ou seja, 4px) que gera toda a família de
utilitários via calc().
/* Tailwind v4 deriva tudo disso: */
.p-1 { padding: calc(var(--spacing) * 1); } /* 4px */
.p-2 { padding: calc(var(--spacing) * 2); } /* 8px */
.p-4 { padding: calc(var(--spacing) * 4); } /* 16px */
.gap-6 { gap: calc(var(--spacing) * 6); } /* 24px */
.h-32 { height: calc(var(--spacing) * 32); } /* 128px */A consequência prática: não há lista de stops como em radius
ou shadow. Qualquer multiplicador funciona — p-7, p-13, p-50.
Em geral seguimos os incrementos 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96 que cobrem
99% dos casos.
Por que 4px
A base de 4px (0.25rem) é o menor incremento útil em UI:
- Múltiplo de 2 e 4 — encaixa em densidade de pixel comum.
- Combina bem com line-heights de 16px (default body), 20px
(
text-sm) e 24px (text-base). - Stops finos (
p-0.5= 2px) cobrem casos hairline (separadores, bordas).
Se você precisa rescale o sistema todo para mais denso ou mais
espaçoso, edite --spacing num CSS layer maior — todos os
utilitários cascateiam.
Escala de referência
A tabela abaixo mostra um subset representativo. Qualquer multiplicador inteiro ou fracionário (até a quarto) funciona.
| Amostra | Passo | Classe | Rem | Pixels | Uso |
|---|---|---|---|---|---|
| 0 | p-0 | 0rem | 0px | Zero espaço — reset | |
| 0.5 | p-0.5 | 0.125rem | 2px | Hairline — bordas, separadores ultra-finos | |
| 1 | p-1 | 0.25rem | 4px | Padding mínimo de UI compacta | |
| 1.5 | p-1.5 | 0.375rem | 6px | Pill / tag interno | |
| 2 | p-2 | 0.5rem | 8px | Padding interno de inputs e botões pequenos | |
| 3 | p-3 | 0.75rem | 12px | Espaçamento entre elementos relacionados | |
| 4 | p-4 | 1rem | 16px | Padding padrão de cards e containers | |
| 5 | p-5 | 1.25rem | 20px | Padding intermediário | |
| 6 | p-6 | 1.5rem | 24px | Padding amplo de cards, gap entre seções | |
| 8 | p-8 | 2rem | 32px | Espaçamento entre blocos | |
| 10 | p-10 | 2.5rem | 40px | Espaçamento generoso | |
| 12 | p-12 | 3rem | 48px | Padding hero | |
| 16 | p-16 | 4rem | 64px | Margens de seção em landings | |
| 20 | p-20 | 5rem | 80px | Espaçamento entre seções em landings | |
| 24 | p-24 | 6rem | 96px | Padding de hero generoso | |
| 32 | p-32 | 8rem | 128px | Espaçamento dramático | |
| 48 | p-48 | 12rem | 192px | Display, ilustrações ocupando largura | |
| 64 | p-64 | 16rem | 256px | Larguras fixas grandes (sidebars, hero columns) | |
| 96 | p-96 | 24rem | 384px | Larguras gigantes (extremo da escala) |
Boas práticas
- 4 e 6 são os defaults seguros para padding interno de UI
(
p-4em cards,p-6em containers maiores). - 8, 12, 16 para gaps entre elementos relacionados.
- 20, 24 para gaps entre seções de conteúdo dentro da mesma surface.
- 64, 80, 96 para gaps entre seções macro em landings.
- Não invente: se você está prestes a usar
padding: 18px, pergunte sep-4(16px) oup-5(20px) não resolveria. A consistência da escala é mais valiosa que o pixel exato. - Use
gap-*em vez de margens quando possível — flex/grid com gap é mais previsível que margens cascateando.