---
name: page-patterns
description: Select a clear responsive page structure for landing, dashboard, auth, pricing, settings, and documentation screens.
---

# Page patterns

Use when planning the information order and responsive composition of a screen. Do not use for component behavior, brand theme selection, or implementation details.

## Procedure

1. Name the screen's primary user task and required content.
2. Open one matching pattern reference below; combine patterns only when the user flow requires it.
3. Apply the theme's grid, spacing, typography, and component tokens. Treat breakpoints as starting points, then test actual content and device widths.
4. Specify empty, loading, and error states before implementation.
5. Check hierarchy, keyboard flow, and narrow-width behavior with the selected stack.

## Inputs and outputs

- Inputs: approved brief, theme, tokens, and screen goal.
- Outputs: section order, hierarchy, grid, responsive rules, and state coverage.

## Reference routing

| Screen | Load |
|---|---|
| Marketing home or campaign | [Landing page](references/landing.md) |
| Data-rich product home | [Dashboard](references/dashboard.md) |
| Sign in, registration, recovery | [Auth screens](references/auth.md) |
| Plan comparison and conversion | [Pricing](references/pricing.md) |
| User or workspace preferences | [Settings](references/settings.md) |
| Product and API documentation | [Docs layout](references/docs-layout.md) |