Page types
A page type is the shape of a whole screen: which regions it has, in what order, and what a customer carries out of it into the next one. A component page says what one control does. A pattern says how several controls behave together. A page type says what the screen around them is made of.
Four shapes cover most of the product. A list narrows a set of records down to one. A detail page answers what is going on with that one record. An overview says whether anything needs attention right now. A form changes a setting and confirms that it changed.
| page | holds |
|---|---|
| Detail page | One record, its state and actions in a fixed rail, and tabs over the evidence behind it. |
| Form page | The fields for one record, the result beside them, and one way to save. |
| List page | One kind of record, narrowed by a filter, with a row that opens each one. |
| Overview page | Measures across one subject, and the records that are open right now. |
4 pages, filtered on section=page-types, type=guidance.
What counts as a page type
A shape has to pass all three tests.
- It repeats across unrelated parts of the product. Two screens that look alike are still two screens. A shape used by errors, by performance, by logs, and by check-ins is a type.
- It is the whole surface. A region that can be dropped into any page is a component or a pattern. A form that opens over a page is still a whole surface, because nothing behind it is usable while it is open.
- It outlives any one screen. A redesign of a single page must not make the description wrong. No page type here is named after a screen.
How to read these pages
Each page carries a wireframe and a table of its regions. The table holds the facts and the wireframe is a reading aid. Cover the picture, and the table still answers the question. Coding agents read this site and get only the alt text.
The wireframes draw the header and the navigation faintly. Those two are the same on every page and belong to /foundations/layout.md. Everything drawn solid is the part a page type decides.