Canon / interaction

rule.interaction.product-quality · canon

Product quality includes recovery states

Empty, loading, error, and partial success are designed, not improvised.

Guidance

Every flow defines recovery and next best action.

Verification contract

component tests for empty/error

Supporting references

• ref.apple.hig-spatial — Apple HIG Spatial Design
• ref.govuk.design-system — GOV.UK Design System
• ref.linear.brand — Linear
• ref.nielsen.usability — Nielsen Norman Group
• ref.notion.design — Notion
• ref.shopify.app-design-guidelines — Shopify App Design Guidelines
• ref.shopify.polaris — Shopify Polaris
• ref.stripe.design — Stripe
• ref.uswds.uswds — U.S. Web Design System
• ref.vercel.web-interface-guidelines — Vercel Web Interface Guidelines

Implementations and verification artifacts

• artifact.component.empty-state — EmptyState component · packages/react/src/components/Status.tsx
• artifact.component.error-state — ErrorState component · packages/react/src/components/Status.tsx
• artifact.component.skeleton — Skeleton component · packages/react/src/components/Status.tsx
• artifact.component.toast — Toast component · packages/react/src/components/Status.tsx