Spacing

Stable

The spacing scale — 12 primitive tokens from 0px to 64px used for padding, gaps, and layout.

The spacing system uses 12 named primitives covering 0–64px. Every component padding, gap, and margin is bound to one of these tokens — no arbitrary pixel values are used anywhere in the system.

Scale reference

Hover over any row to see how the token maps to a visual size. All tokens are available as Figma variables in the Spacing collection.

Token

Value

Tailwind

Visual

scale/000

—

scale/22px0.5

scale/44px1

scale/88px2

scale/1212px3

scale/1616px4

scale/2020px5

scale/2424px6

scale/3232px8

scale/4040px10

scale/4848px12

scale/6464px16

Usage in components

How spacing tokens map to padding and gap values across the component library.

Interactive padding demo — see how scale tokens affect component size

scale/12

card padding

flex gap

Padding: scale/12 = 12px

Component	Padding H	Padding V	Gap
Button SM	`scale/12 (12px)`	`scale/8 (8px)`	`scale/8 (8px)`
Button MD	`scale/16 (16px)`	`scale/12 (12px)`	`scale/8 (8px)`
Button LG	`scale/20 (20px)`	`scale/12 (12px)`	`scale/8 (8px)`
Input SM	`scale/12 (12px)`	`scale/8 (8px)`	`—`
Input MD	`scale/16 (16px)`	`scale/12 (12px)`	`—`
Tab/Item SM	`scale/12 (12px)`	`scale/8 (8px)`	`scale/8 (8px)`
Tab/Item MD	`scale/16 (16px)`	`scale/12 (12px)`	`scale/8 (8px)`
Card / Doc card	`scale/24 (24px)`	`scale/24 (24px)`	`—`
Table row	`scale/16 (16px)`	`scale/8 (8px) or scale/12`	`—`

Token reference

Token	Value	Description
`scale/2`	`2px`	Micro gap — icon nudges, fine-tuning
`scale/4`	`4px`	XS — tight internal gaps, badge padding
`scale/8`	`8px`	SM — icon-to-label gap, small component padding
`scale/12`	`12px`	MD — SM component horizontal padding
`scale/16`	`16px`	LG — MD component horizontal padding, base grid unit
`scale/20`	`20px`	XL — LG component horizontal padding
`scale/24`	`24px`	Card / panel padding, section spacing SM
`scale/32`	`32px`	Section gap MD, list item spacing
`scale/40`	`40px`	Section gap LG, form group spacing
`scale/48`	`48px`	Layout gap, page section divider
`scale/64`	`64px`	Layout gap XL, hero spacing

Guidelines

✓Always use a token name — never hardcode px values
✓Use scale/8 (8px) as the default gap between related items
✓Use scale/24 (24px) for card and panel padding
✓Use scale/16 for page-level section gaps on mobile
✓Use scale/32–64 for section separators on desktop

Don't

✕Don't use values outside the scale (e.g., 10px, 14px, 18px)
✕Don't skip steps — go from scale/8 to scale/12, not scale/8 to scale/16
✕Don't mix spacing scales within the same component
✕Don't use scale/0 for visual separation — use borders instead
✕Don't use scale/64 inside dense data-heavy components