Spacing, sizing, and layout

Explicit zero avoids magic values.

Use: Intentional edge removal.

Four-pixel base unit supports fine alignment.

Use: Tight icon and text relationships.

Two units create compact internal rhythm.

Use: Compact gaps.

Three units bridge compact and default density.

Use: Control internals.

Sixteen pixels is the default component rhythm.

Use: Default gaps and padding.

Supports comfortable content groups.

Use: Compact surface padding.

Separates related sections without fragmentation.

Use: Default surface padding.

Creates a clear section boundary.

Use: Section and layout gaps.

Provides medium layout separation.

Use: Page regions.

Supports large responsive sections.

Use: Page section padding.

Creates strong page hierarchy.

Use: Large-screen section breaks.

Largest standard tier prevents arbitrary gaps.

Use: Hero and major page regions.

Thirty-two pixels supports dense pointer-led contexts.

Use: Dense desktop only; preserve a 44px hit target.

Forty-four pixels meets the pointer-target baseline.

Use: Default interactive control height.

Forty-eight pixels supports primary and touch-heavy actions.

Use: Prominent controls and mobile.

Sixteen pixels fits supportive inline icons.

Use: Decoration; not standalone controls.

Twenty pixels balances clarity and density.

Use: Default control and status icons.

Twenty-four pixels supports standalone recognition.

Use: Navigation and large controls.

Limits prose to a comfortable line length.

Use: Long-form reading regions.

Bounds wide shells on large screens.

Use: Maximum application canvas.

Separates narrow phones from larger compact layouts.

Use: Content-led progressive enhancement.

Supports common split-layout transitions.

Use: Two-column and navigation changes.

Introduces persistent structure when space permits.

Use: Side navigation and multi-column layouts.

Bounds wide grids without assuming a device.

Use: Large content canvases.

Four columns make narrow composition predictable.

Use: Compact layout planning.

Eight columns support medium composition.

Use: Medium layout planning.

Twelve columns support flexible desktop division.

Use: Expanded layout planning.

Protects content from narrow viewport edges.

Use: Compact page gutters.

Adds breathing room as width grows.

Use: Medium page gutters.

Keeps desktop content aligned without waste.

Use: Expanded page gutters.