Patterns Overview
Patterns are composed UI — combinations of primitives and tokens that solve a recurring product job. They don’t introduce new building blocks; they teach how the existing ones come together. Pilot teams ship in patterns, not parts.
What a pattern is
A pattern is a composition — a recognized way of putting primitives and tokens together to solve a recurring job. A form layout is a pattern. A data table is a pattern. An empty state is a pattern. The pattern lives in how the parts cooperate, not in any one part on its own.
Patterns sit one layer above Components and one layer below page templates. A component answers which input does this user need? A pattern answers how does the whole form behave? A page template answers what does the entire settings screen look like?
The rule that holds: a pattern references components and tokens, it does not introduce them. If a candidate pattern needs a new primitive or a new token to work, that’s a signal the primitive or token should ship first.
The pattern catalog
4 patterns scoped for the first wave, with 4 ready now. This catalog is backed by the same structured registry the Agent Kit exports, so the page is useful to people and queryable by agents.
Empty State
ReadyThe UI a user sees when there is nothing to show: first-run, no-results, or absence after deletion.
Form Layout
ReadyHow fields, labels, helper text, and validation hang together in a coherent form.
Navigation Shell
ReadyThe persistent app frame: sidebar, header, breadcrumbs, and the rules that keep it consistent.
Data Table
ReadyTabular data with sort, filter, pagination, empty states, and the trade-offs between density and scanning.
Reach for a pattern or build something custom?
A useful test before naming a new pattern. Three signals on each side; if you land in the left column on all three, the pattern is real and the system should hold it.
| Reach for a pattern | Build something custom |
|---|---|
| The shape recurs across product teams. | It only fits one team’s workflow today. |
| It composes existing primitives and tokens. | It needs a new primitive or new tokens. |
| A decision standard can be defended from a principle. | The right answer is still unclear. |
What a pattern page teaches
Six sections, the same shape for every pattern. Consistency makes the catalog scannable and gives reviewers and agents a shared vocabulary.
When to use it
The product situations the pattern solves, plus adjacent states where a different treatment is more honest.
Anatomy
The named parts of the pattern so reviewers and agents can defend a screen against shared vocabulary.
Variants
The real product shapes the pattern takes, with the decision rule that picks between them.
Examples
Rendered examples and wrong/right copy pairs that show the pattern under realistic product context.
Voice, accessibility, implementation
The copy, semantics, focus behavior, component composition, and token rules that make the composition usable.
Review checklist
A short acceptance gate before a team ships the pattern in product work.