Spacing
A single base (4px) generates the entire spacing scale through Tailwind v4 calc().
Spacing is the rhythm of the interface. It is what says "these two elements belong together" and "this other one is part of another group" without writing a word. In UI, 70% of visual decisions are spacing decisions, and doing it well means you stop inventing values and start using a scale.
How the scale works
Gremorie inherits the Tailwind v4 strategy: a single variable
(--spacing: 0.25rem, that is, 4px) generates the entire family
of utilities through 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 */The practical consequence: there is no list of stops like in
radius or shadow. Any multiplier works - p-7, p-13, p-50. In
general we stick to the increments 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, which cover
99% of cases.
Why 4px
The 4px base (0.25rem) is the smallest useful increment in
UI:
- A multiple of 2 and 4, so it fits common pixel densities.
- It combines well with line-heights of 16px (default body), 20px
(
text-sm) and 24px (text-base). - Thin stops (
p-0.5= 2px) cover hairline cases (separators, borders).
If you need to rescale the whole system to be denser or more
spacious, edit --spacing in a higher CSS layer and every
utility cascades.
Reference scale
The table below shows a representative subset. Any integer multiplier, or fractional down to a quarter, works.
| 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) |
Best practices
- 4 and 6 are the safe defaults for internal UI padding
(
p-4on cards,p-6on larger containers). - 8, 12, 16 for gaps between related elements.
- 20, 24 for gaps between content sections inside the same surface.
- 64, 80, 96 for gaps between macro sections on landing pages.
- Do not invent values. If you are about to write
padding: 18px, ask whetherp-4(16px) orp-5(20px) would do. Scale consistency is worth more than the exact pixel. - Prefer
gap-*over margins when possible. Flex and grid with gap are more predictable than cascading margins.