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.
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.