Spacing

A 4px base unit scales into 13 steps. Every layout gap, padding, and margin maps to one of these tokens.

Scale

spacing.0
0px
Reset, borderless flush
spacing.1
4px
Icon gaps, tight insets
spacing.2
8px
Inline element gaps
spacing.3
12px
Small padding, badge insets
spacing.4
16px
Base component padding
spacing.5
20px
Input height padding, row gaps
spacing.6
24px
Card padding, section gutter
spacing.8
32px
Content block separation
spacing.10
40px
Between major sections
spacing.12
48px
Page-level vertical rhythm
spacing.16
64px
Hero padding, modal spacing
spacing.20
80px
Large layout breathing room
spacing.24
96px
Max vertical section gap

In context

Spacing decisions compound. Getting card padding, row gaps, and icon insets right together is what makes density feel intentional.

Card — spacing tokens applied

Project Alpha

Updated 2h ago

Active

Design system tokens, component library and Figma integration for the core product team.

3 members
Card paddingspacing.6 (24px)
Header gapspacing.3 (12px)
Section gapspacing.4 (16px)
Avatar overlapspacing.1 (4px)

List row — spacing tokens applied

Notifications

Push, email, and in-app

All›

Privacy

Data and permissions

›

Appearance

Theme, font size, density

System›

Keyboard shortcuts

View and customize

›
Row padding (h)spacing.4 (16px)
Row padding (v)spacing.3.5 (14px)
Icon-label gapspacing.3 (12px)
Row divider gapspacing.0 (flush)

Token Reference

TokenValueTailwindUse case
spacing.00pxp-0 / gap-0Reset, borderless flush
spacing.14pxp-1 / gap-1Icon gaps, tight insets
spacing.28pxp-2 / gap-2Inline element gaps
spacing.312pxp-3 / gap-3Small padding, badge insets
spacing.416pxp-4 / gap-4Base component padding
spacing.520pxp-5 / gap-5Input height padding, row gaps
spacing.624pxp-6 / gap-6Card padding, section gutter
spacing.832pxp-8 / gap-8Content block separation
spacing.1040pxp-10 / gap-10Between major sections
spacing.1248pxp-12 / gap-12Page-level vertical rhythm
spacing.1664pxp-16 / gap-16Hero padding, modal spacing
spacing.2080pxp-20 / gap-20Large layout breathing room
spacing.2496pxp-24 / gap-24Max vertical section gap

Usage Principles

Base unit

All spacing values are multiples of 4px. This keeps layouts aligned to a consistent grid and makes density decisions predictable.

Semantic use

Choose spacing by intent, not by feel. Use spacing.4 for component padding, spacing.6 for card insets, spacing.10+ for section separation.

Never hardcode

Reference a token — never a raw pixel value. When the base unit changes, every layout updates automatically.