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. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Make section spacing larger than card padding; keep text line length comfortable and leave visible whitespace around primary objects.