UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Page Pattern Selection

First classify the page task as marketing, operations, reading, configuration, commerce, or creation, then choose the layout pattern.

page-patternlayoutstrategy

Design Principle

The wrong page pattern makes good components serve the wrong goal.

Principle The wrong page pattern makes good components serve the wrong goal.

Design action Output pageType first, then match pattern: marketing uses hero plus proof, operations use toolbar plus table, reading uses TOC plus body, creation uses canvas plus controls.

Examples Positive example: AI generates pages from a brief. Counterexample: Every request defaults to a landing page.

Apply when AI generates pages from a brief. The brief mixes brand, data, forms, and content.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Output pageType first, then match pattern: marketing uses hero plus proof, operations use toolbar plus table, reading uses TOC plus body, creation uses canvas plus controls.

Apply When

  • AI generates pages from a brief.
  • The brief mixes brand, data, forms, and content.

Avoid

  • Every request defaults to a landing page.
  • Every page uses a card grid.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026