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. 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
Allow only key media, quotes, or proof blocks to break the main grid; return to the shared content width afterward.