Design Principle
A few breakout media or proof regions can create rhythm, but primary information should return to stable alignment.
Principle A few breakout media or proof regions can create rhythm, but primary information should return to stable alignment.
Design action Allow only key media, quotes, or proof blocks to break the main grid; return to the shared content width afterward.
Examples Positive example: Brand pages, case studies, long docs, and resource maps need memorable visual moments inside a stable system. Counterexample: Every section uses a different width.
Apply when Brand pages, case studies, long docs, and resource maps need memorable visual moments inside a stable system. Users need to judge state, scope, risk, or next action quickly.
Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.
Agent Directive
Allow only key media, quotes, or proof blocks to break the main grid; return to the shared content width afterward.