Skip to content
AwesomeDSTaste for AI agents
HomeCanonReference AtlasComponentsMotionPlayground
All docs

Start

Principles

Explore

AI designBrand

Build

FoundationsPatternsInteraction

Verify

ReviewReportsStatus
English日本語
Enter the Canon
HomeCanonReference AtlasComponentsMotionPlayground
All docs

Start

Principles

Explore

AI designBrand

Build

FoundationsPatternsInteraction

Verify

ReviewReportsStatus
English日本語

Canon domain

Interaction

3 canon modules in this domain. Full Markdown is rendered from design-system/.

3 modules · interaction
Browser-Native Correctness

Design is incomplete if it breaks browser contracts. Synthesized from Vercel guidelines + platform docs. Non-negotiables 1. URL state for filters, tabs, dialogs, pagination when shareable. 2. Back/Forward restores pri

Product Quality Interactions

Rules - Loading, empty, error, and partial success are designed with the happy path. - Optimistic updates declare rollback messaging. - URL-addressable state for shareable filters and tabs. Linked rules - rule.interact

States & Recovery

Matrix | State | User need | UI obligation | |---|---|---| | Loading | confidence | reserved space + status | | Empty | next action | explain + primary CTA | | Error | recovery | cause + retry path | | Success | confirma

Featured

Browser-Native Correctness

Browser-Native Correctness

Design is incomplete if it breaks browser contracts. Synthesized from Vercel guidelines + platform docs.

Non-negotiables

  1. URL state for filters, tabs, dialogs, pagination when shareable.
  2. Back/Forward restores prior UI + scroll when expected.
  3. Real links for navigation (middle-click, open in new tab).
  4. Forms: Enter submits, Escape cancels where modal, errors announced.
  5. Zoom & reflow work at 200% and 320px width.
  6. Safe areas on notched devices.
  7. Autofill & paste never broken for credentials/fields.
  8. Hydration does not steal focus or wipe values.
  9. Locale from language prefs, not IP.
  10. translate="no" on brand/code tokens.

Linked rules

  • rule.interaction.url-state
  • rule.interaction.interface-quality
AwesomeDS

Taste for AI agents — with receipts, and a little joy.

CanonComponentsMotionReference AtlasStatusReports

DESIGN.md→rule.*→UI→verify