UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Component Consistency Contract

Components need clear props, states, sizes, and disallowed combinations to stay consistent across pages.

componentscontractdesign-system

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.

Agent Directive

Specify default, hover, focus, disabled, loading, and error variants for common components; do not bypass component rules locally.

Apply When

  • Buttons, cards, tables, status tags, and form controls.
  • Humans and agents both reuse components.

Avoid

  • The same component changes radius, padding, and states by page.
  • Empty, loading, and error states are missing.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026