UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Spacing Scale and Rhythm

A small repeatable spacing scale makes pages calm, predictable, and less improvised.

spacingrhythmlayout

Design Principle

Spacing should express structural relationships, not item-by-item guesswork.

Principle Spacing should express structural relationships, not item-by-item guesswork.

Design action Use limited spacing tokens; adjacent, intra-group, inter-group, and section spacing should increase, with stable dimensions for toolbars and grids.

Examples Positive example: Cards, forms, tables, and toolbars need unification. Counterexample: Many random margin values.

Apply when Cards, forms, tables, and toolbars need unification. Dense pages still need clarity.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Use limited spacing tokens; adjacent, intra-group, inter-group, and section spacing should increase, with stable dimensions for toolbars and grids.

Apply When

  • Cards, forms, tables, and toolbars need unification.
  • Dense pages still need clarity.

Avoid

  • Many random margin values.
  • Buttons and inputs resize the layout when content changes.

Knowledge Metadata

Category
Visual Foundations
Quality
82%
Version
v1
Published
6/6/2026