Page patterns
Whole-page blueprints — layout regions, required states, microcopy, motion.
60 page patterns seed automatically with each new project, across nine
categories. Edit any one from /projects/<id>/patterns in the
dashboard.
Where a component contract governs a single component, a page pattern governs a whole screen — the regions it's built from, the states it must handle, the words on it, and how it moves.
A pattern has:
- Layout regions — the structural slots of the page (header, hero, sidebar, content, footer, …) and which component contracts fill them
- Required states — the states the page must handle (loading, empty, error, success, …)
- Microcopy — the default copy for headings, labels, empty states, and error messages
- Motion specs — entrance, transition, and feedback motion the page should use
Categories
60 patterns span nine categories:
| Category | Patterns |
|---|---|
| auth | 9 |
| onboarding | 4 |
| billing | 6 |
| dashboard | 10 |
| ecommerce | 10 |
| blog | 4 |
| marketing | 5 |
| errors | 7 |
| realtime | 5 |
AI tools query these via the MCP get_page_pattern tool before
scaffolding a new page, so a generated sign-in screen lands with the
right regions, states, and copy from the start.
Authoring tips
- Keep microcopy tight — it lands directly in the AI's prompt.
- Spell out the required states even when they feel obvious. AI tools skip empty and error states unless the pattern names them.
- Use layout regions to pin which component contracts belong on the
page — the
pattern-conformancerule flags pages that omit a required contract. - Toggling a pattern off removes it from the manifest, so AI tools fall back to free-form generation for that page.