Patterns

What a pattern is

A pattern is a versioned page engine that brings several components together for a specific workflow. Screens are not designed one by one; they are built by giving these engines data and settings, so hundreds of screens share the same behaviour, the same empty and error states and the same accessibility rules.

Scope

Code	Pattern	For
KL1	List, filter and detail	Tabular record lists, filters, row detail, export
KL2	Wizard	Multi-step form, summary and confirmation step
KL3	Bulk upload	Template download, file upload, row errors and confirmation
KL4	Document and receipt	Printable document, field masking, verification code
KL5	Dashboard	Summary cards and charts tied to a date range
KL6	Settings form	Settings in sections, saving and secret values
KL7	Permission matrix	Permissions by role and module
KL8	Identity and session	Sign-in, one-time code, new password, session ended
KL9	Status and system	Error, maintenance, empty state and help pages

Usage patterns

Ahead of the page patterns, rules and live examples are ready for the behaviour that repeats on every screen:

Pattern	For
Forms and validation	Field errors, the error summary and submitting
Filtering	The filter bar, result count and address bar
Empty states	First use, no results and a cleared list
Loading	No indicator under 1 s, a spinner for 1–3 s, progress over 3 s
Notifications	Inline alert, banner and toast
Saving	Explicit save, instant save and unsaved changes
Confirming irreversible actions	A confirmation step and confirming by typing a name
Disabled and read-only	Which one to use when
Bulk actions	Selection, the action bar and the result message
Data export	Format choice, scope and long-running exports
Session timeout and one-time code	Expiry warning, extending the session and code entry
Error recovery	Retry, partial failure and permanent failure
Charts gallery	Which chart answers which question

Each page holds the rules, behaviour, accessibility, content and motion rules and a live Storybook example.