Spacing

Relate component padding and layout gaps through shared spacing steps.

Core principles

  • Use spacing to show grouping and hierarchy.
  • Keep layout gaps and component padding on a shared scale.

Model

  • Spacing steps derive from the scale ratio and density.
  • Recipes use shared tokens for padding, gaps, and block sizes.

Use in your app

  • Use named steps for stacks, sections, and controls.
  • Inspect dense layouts with realistic content and narrow widths.

Verification scope

  • Layout fixtures estimate containment at each requested width. These estimates do not measure rendered wrapping.

Token notes

  • Density affects spacing across component families.