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

Pricing Plan Comparison

Pricing Plan Comparison turns a frequent interface judgment into an executable constraint before generation.

pricingcomparisondecision

Design Principle

Pricing pages help users choose the right plan rather than stacking marketing adjectives.

Principle Pricing pages help users choose the right plan rather than stacking marketing adjectives.

Design action Compare price, limits, core features, audience, and next step on shared dimensions; highlight the recommended plan while keeping other options readable.

Examples Positive example: SaaS, subscriptions, memberships, ecommerce bundles, and service quotes need plan choice. Counterexample: Plan cards have mismatched heights and incomparable features.

Apply when SaaS, subscriptions, memberships, ecommerce bundles, and service quotes need plan choice. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Compare price, limits, core features, audience, and next step on shared dimensions; highlight the recommended plan while keeping other options readable.

Apply When

  • SaaS, subscriptions, memberships, ecommerce bundles, and service quotes need plan choice.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Plan cards have mismatched heights and incomparable features.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

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