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.