Spacing scale

A single 4px-based rhythm — --ax-space-1 through --ax-space-20 — drives every gap, pad and margin.

Color tokens Borders & radius
--ax-space-N

The scale

Geometric-ish steps tuned for dense admin UIs. Click any row to copy its token.

base · 4px
Nesting

Padding in practice

How the steps nest in a real card.

padding: --ax-space-6
padding: --ax-space-4
padding: --ax-space-2

Step down one notch per nesting level — 6 → 4 → 2 — to keep visual rhythm tight without re-tuning per component.

Flex / grid gap

Gaps you can feel

Same six tiles, four different gap tokens.

.ax-stack

Vertical rhythm

.ax-stack flows children with a token gap — override via --ax-gap.

--ax-gap: --ax-space-2 (tight)
--ax-gap: --ax-space-6 (roomy)

Snap to the scale

Reach for a --ax-space-N token before a raw px value. Card padding is --ax-space-6, the grid gutter is --ax-space-6 (16 below 768px), and card-to-card stacking is --ax-space-8.