Foundations · Tokens
Spacing
One spacing scale governs rhythm everywhere — padding, gaps, and stack spacing. Compose layouts from these steps rather than arbitrary values, so density stays consistent across product and marketing.
Scale
--space-00rem
--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41rem
--space-51.25rem
--space-61.5rem
--space-82rem
--space-102.5rem
--space-123rem
--space-164rem
--space-205rem
--space-246rem
--space-328rem
--space-px1px
--space-0.50.125rem
In Tailwind these map to the usual p-*, gap-*, and m-* utilities; in hand-written CSS reference var(--space-4).
Radius
sm
calc(var(--radius) - 4px)
md
calc(var(--radius) - 2px)
lg
var(--radius)
xl
calc(var(--radius) + 4px)
2xl
calc(var(--radius) + 8px)
3xl
calc(var(--radius) + 12px)
4xl
calc(var(--radius) + 16px)
full
9999px
Breakpoints
--screen-sm40rem--screen-md48rem--screen-lg64rem--screen-xl80rem--screen-2xl96rem