Spacing

A single base unit drives every gap, padding and margin in the system. Components expose their own spacing token so density can be tuned per instance.

--spacing0.25rem (4px) base unit

--spacing(n)calc(var(--spacing) * n)

--card-spacingper-component override

The base unit

All spacing derives from a single custom property, --spacing: 0.25rem (4px). Tailwind's --spacing(n) function resolves to calc(var(--spacing) * n), so a numeric step n is always n × 4px. Change the base once and the whole system re-scales.

Scale — step × 4px

0.5

2px--spacing(0.5)

1

4px--spacing(1)

1.5

6px--spacing(1.5)

2

8px--spacing(2)

2.5

10px--spacing(2.5)

3

12px--spacing(3)

4

16px--spacing(4)

5

20px--spacing(5)

6

24px--spacing(6)

8

32px--spacing(8)

10

40px--spacing(10)

12

48px--spacing(12)

16

64px--spacing(16)

20

80px--spacing(20)

24

96px--spacing(24)

Each step maps 1:1 to Tailwind utilities: p-4, gap-6, m-2, size-8.

Component spacing token — --card-spacing

Components that own internal spacing expose it as a CSS variable derived from the scale. Card sets [--card-spacing:--spacing(4)] and reads it through gap-(--card-spacing) and px-(--card-spacing). Override it on a single instance to change section gaps and insets together.

Login to your account

Enter your email below to login

Password

Use negative margins -mx-(--card-spacing) to make content bleed edge-to-edge while staying aligned with the card inset.