Design Principle
A component is not a visual screenshot; it is a reusable set of behaviors and constraints.
Principle
A component is not a visual screenshot; it is a reusable set of behaviors and constraints.
Design action
Specify default, hover, focus, disabled, loading, and error variants for common components; do not bypass component rules locally.
Examples
Positive example: Buttons, cards, tables, status tags, and form controls. Counterexample: The same component changes radius, padding, and states by page.
Apply when
Buttons, cards, tables, status tags, and form controls. Humans and agents both reuse components.
Source notes
Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/
Agent Directive
Specify default, hover, focus, disabled, loading, and error variants for common components; do not bypass component rules locally.