Spacing

A 4 px scale and named layout distances that follow the density mode.

Primitive scale

The 4 px steps behind every spacing utility. These do not change with density.

Token	Value	Utility
space.0	0px	p-0
space.1	4px	p-1
space.2	8px	p-2
space.3	12px	p-3
space.4	16px	p-4
space.5	20px	p-5
space.6	24px	p-6
space.7	28px	p-7
space.8	32px	p-8
space.9	36px	p-9
space.10	40px	p-10
space.12	48px	p-12
space.16	64px	p-16
space.20	80px	p-20
space.24	96px	p-24
space.px	1px	p-px
space.0-5	2px	p-0.5
space.1-5	6px	p-1.5
space.2-5	10px	p-2.5

Named distances that components and layouts use. The compact column is the value under data-density="compact".

Token	Comfortable	Compact	Utility
layout.stack-xs	4px	same	gap-stack-xs
layout.stack-sm	8px	same	gap-stack-sm
layout.stack-md	16px	12px	gap-stack-md
layout.stack-lg	24px	16px	gap-stack-lg
layout.inline-sm	8px	same	gap-inline-sm
layout.inline-md	12px	same	gap-inline-md
layout.card-x	20px	12px	px-card-x (Card padding md)
layout.card-y	16px	12px	py-card-y (Card padding md)
layout.card-x-sm	16px	8px	px-card-x-sm (Card padding sm)
layout.card-y-sm	12px	8px	py-card-y-sm (Card padding sm)
layout.gutter Gap between grid columns.	24px	16px	gap-gutter
layout.margin Page padding at the edge of the main area.	32px	24px	px-margin
layout.section Space between page sections.	32px	24px	py-section · gap-section