Design Principle
Users infer grouping from spatial distance before reading labels or borders.
Principle
Users infer grouping from spatial distance before reading labels or borders.
Design action
Use a spacing scale such as 4/8/12/16/24; inner spacing must be smaller than group spacing, and labels, inputs, filters, and results should stay close.
Examples
Positive example: Forms, filters, list rows, and settings need grouping. Counterexample: Too many borders compensate for weak spacing.
Apply when
Forms, filters, list rows, and settings need grouping. Cards contain title, metadata, and actions.
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
Use a spacing scale such as 4/8/12/16/24; inner spacing must be smaller than group spacing, and labels, inputs, filters, and results should stay close.