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

Whitespace as Structure

Whitespace is not emptiness; it creates separation, breathing room, and attention paths.

whitespacestructureclarity

Design Principle

Effective whitespace reduces reliance on borders, dividers, and decoration while clarifying section relationships.

Principle Effective whitespace reduces reliance on borders, dividers, and decoration while clarifying section relationships.

Design action Make section spacing larger than card padding; keep text line length comfortable and leave visible whitespace around primary objects.

Examples Positive example: Content sections need clear layering. Counterexample: Content is stacked edge to edge.

Apply when Content sections need clear layering. Pages contain long reading flows or complex settings.

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

Agent Directive

Make section spacing larger than card padding; keep text line length comfortable and leave visible whitespace around primary objects.

Apply When

  • Content sections need clear layering.
  • Pages contain long reading flows or complex settings.

Avoid

  • Content is stacked edge to edge.
  • Many lines replace structured whitespace.

Knowledge Metadata

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