Design Principle
Borders, surface colors, and shadows all communicate hierarchy; too many containers fragment the page.
Principle
Borders, surface colors, and shadows all communicate hierarchy; too many containers fragment the page.
Design action
Use cards only for repeated objects, tool panels, and dialogs; page sections should be full-width bands or unframed layouts, avoiding card nesting.
Examples
Positive example: Cards, panels, tables, and dialogs. Counterexample: Page sections become floating cards containing more cards.
Apply when
Cards, panels, tables, and dialogs. Actionable objects need distinction from the background.
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 cards only for repeated objects, tool panels, and dialogs; page sections should be full-width bands or unframed layouts, avoiding card nesting.