Guideline 03Operational

Product patterns

Reusable interaction and page-level decisions for common product flows, including their loading, empty, error, and permission states.

Owner: Product Design
Last reviewed: August 2026
Review cadence: Quarterly and after major product launches
Source of truth: DESIGN-SYSTEM.md and live pattern specimens

Required outcomes

Common workflows behave consistently across products.

Teams design the complete state model before the happy path ships.

Patterns compose public primitives without creating hidden component APIs.

Complete state model

Every data-backed surface declares what the user sees before, during, and after work.

Required product states

State	Communicate	Primary action	Preferred primitive
Initial	Purpose and first useful action	Start or create	EmptyState
Loading	Structure and progress without layout shift	Usually none	Skeleton or inline pending state
Success	Result and next step	Continue or inspect	Notice or refreshed content
Empty result	Why no match exists	Clear filters or change query	EmptyState
Recoverable error	What failed and how to retry	Retry	Notice or inline field message
Diagnostic error	Summary plus inspectable details	Copy report or retry	ErrorReport
Offline	Connection dependency and preserved work	Retry when online	Notice with local state
Permission denied	Missing access and request path	Request access	EmptyState or dedicated page

Forms and committed actions

Validation stays close to the field while submission status remains clear at the form level.

Form behavior

Validate at a useful moment

Validate on blur or submit. Avoid interrupting the user before a value can be complete.

Keep errors persistent

Field errors remain visible until the condition is resolved and are associated through description semantics.

Preserve input on failure

A failed submission must not erase work. Focus the first actionable error when useful.

Make submission singular

Disable or guard repeated submissions and communicate pending state in the action label.

Destructive action ladder

Risk	Pattern	Confirmation
Low and reversible	Immediate action plus undo	No blocking dialog
Material but recoverable	ConfirmDialog with consequence	Explicit action label
Permanent or high impact	ConfirmDialog plus typed or secondary verification	Name the object and outcome

Location, scope, query, filters, and result count remain observable and shareable.

Discovery contract

Navigation

One page has one primary landmark and heading.
Current location is visually and programmatically identifiable.
Back behavior returns to a meaningful prior context.
Deep links restore the same useful state.

Search and filters

Search results appear next to the query, not only as a count.
Filters expose active values and a clear-all action.
No-results states explain how to recover.
Query and filters use URL state when sharing matters.

Pagination and tables

Announce result range and total.
Preserve sort and selection across pagination deliberately.
Keep row actions keyboard reachable.
Offer a narrow-screen alternative to horizontal data loss.

Page archetypes

Stable page skeletons reduce navigation and density decisions while leaving room for product content.

Archetype inventory

Archetype	Required regions	Responsive priority
Directory	Title, search/filter, result summary, list, empty/error states	Keep search and first results above the fold.
Detail	Breadcrumb/back, identity, status, primary actions, grouped details	Keep identity before actions and secondary metadata.
Editor	Title/status, workspace, controls, validation, save state	Preserve the work area and collapse secondary controls.
Settings	Local navigation, grouped fields, save feedback	Stack navigation before fields without losing location.
Dashboard	Time/scope controls, summary, trends, exceptions	Prioritize exceptions and readable comparisons.
Onboarding	Progress, one decision, help, safe exit	One column and one primary action.