Design Principle
A stable grid reduces ad hoc placement and keeps complex pages structured across viewports.
Principle
A stable grid reduces ad hoc placement and keeps complex pages structured across viewports.
Design action
Use clear content width plus a 12-column or 2/3-column structure on desktop; recompute layout on mobile instead of scaling text with viewport width.
Examples
Positive example: Dashboards, libraries, knowledge bases, and admin consoles. Counterexample: Each section defines a different width.
Apply when
Dashboards, libraries, knowledge bases, and admin consoles. Pages need columns and filter sidebars.
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
Use clear content width plus a 12-column or 2/3-column structure on desktop; recompute layout on mobile instead of scaling text with viewport width.