Design Principle
Long pages need variation in density, alignment, media ratio, and whitespace without changing the design system.
Principle
Long pages need variation in density, alignment, media ratio, and whitespace without changing the design system.
Design action
Plan opening, proof, detail, and action rhythms; vary width, columns, and media ratio instead of changing brand tokens.
Examples
Positive example: Landing pages, portfolios, docs, and resource pages have multiple consecutive sections. Counterexample: Several consecutive sections use centered heading plus three cards.
Apply when
Landing pages, portfolios, docs, and resource pages have multiple consecutive sections. 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
Plan opening, proof, detail, and action rhythms; vary width, columns, and media ratio instead of changing brand tokens.