Design Principle
Page width is an information architecture decision; not every region belongs in the same max-width container.
Principle
Page width is an information architecture decision; not every region belongs in the same max-width container.
Design action
Constrain prose and forms; allow canvases, maps, and timelines to go full-width; use bands or alignment lines when switching modes.
Examples
Positive example: A page mixes visual scenes, prose, tables, or tools. Counterexample: Long text spans the full ultrawide viewport.
Apply when
A page mixes visual scenes, prose, tables, or tools. 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
Constrain prose and forms; allow canvases, maps, and timelines to go full-width; use bands or alignment lines when switching modes.