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.
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.