Interface Lab
Login
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. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

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.