Spacing & Layout
4px base scale, matched 1:1 to Tailwind — the reason Ghost and the Next.js app land on the same pixel
07Spacing
4px base, index-matched to Tailwind so p-4 and var(--space-4) are the same 16px in both products.
--space-0 | 0rem | |
--space-px | 1px | |
--space-0-5 | 0.125rem | |
--space-1 | 0.25rem | |
--space-1-5 | 0.375rem | |
--space-2 | 0.5rem | |
--space-2-5 | 0.625rem | |
--space-3 | 0.75rem | |
--space-3-5 | 0.875rem | |
--space-4 | 1rem | |
--space-5 | 1.25rem | |
--space-6 | 1.5rem | |
--space-7 | 1.75rem | |
--space-8 | 2rem | |
--space-9 | 2.25rem | |
--space-10 | 2.5rem | |
--space-12 | 3rem | |
--space-14 | 3.5rem | |
--space-16 | 4rem | |
--space-20 | 5rem | |
--space-24 | 6rem | |
--space-32 | 8rem | |
--space-40 | 10rem |
Semantic aliases — reach for these first
--pad-card | var(--space-5) | |
--pad-card-lg | var(--space-6) | |
--pad-control | var(--space-2-5) | |
--pad-control-x | var(--space-4) | |
--pad-row | var(--space-3) | |
--gap-inline | var(--space-2) | |
--gap-card | var(--space-4) | |
--gap-grid | var(--space-6) | |
--gap-field | var(--space-1-5) | |
--stack-xs | var(--space-2) | |
--stack-sm | var(--space-4) | |
--stack-md | var(--space-8) | |
--stack-lg | var(--space-16) | |
--stack-xl | var(--space-24) |
Applied — the same tokens doing real work
--pad-card
Card padding is one token — change it once, every card follows.
--gap-grid
The gap between these two cards is the grid gap token.
Stacked blocks separated by
--stack-lg —
— the rhythm between sections, not a hand-picked margin.