11 patterns · each one live
Patterns
A component holds its own contract; a pattern is how several hold it together on a page. Each page here is the pattern running, with its state, and the rules a page that copies it must keep.
- Form with error summary
Validation at submission, the summary focused, each message tied to its field, the success announced.
- Destructive confirmation
A question with the verb, the consequence, cancel first and focused, the outcome announced.
- Filter group
Filters that apply at once, the count announced, the list never empty without saying why.
- Data table page
A titled list with its toolbar, its table named and scrollable, and its empty state.
- Empty state
What a list shows when a search finds nothing: a heading, what to do, and the way out.
- Disabled with reason
A control that refuses says why, next to it, and becomes available when the condition is met.
- App shell
The frame of a signed-in page: the column that folds to a rail, the drawer, the banner, the content area that says when it loads.
- Report document
A document read on screen with its summary beside it, printed with a cover, a table of contents and a header on every page.
- Wizard step
One screen of an audit wizard: the frame, one question per element, the answer, the note, the derogation, and what a reopened page kept.
- Panel shell
The frame of the side panel: live regions first, a banner, a header that counts, the themes, the keys at the foot, alive at 216 pixels.
- Print
What a page owes to paper: the light set whatever the theme, the screen controls gone, the address after a link, nothing split that should hold.