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.
Agent Directive
Plan opening, proof, detail, and action rhythms; vary width, columns, and media ratio instead of changing brand tokens.