---
name: pricing-page
description: Design a clear, persuasive pricing page that steers users to the right plan and reduces decision anxiety.
category: ui-design
---

# Pricing Page

Reach for this when designing or fixing a pricing page — clarity converts, and confusion kills more deals than price does.

1. Limit to 3–4 tiers and anchor with one recommended plan, visually elevated (border accent, "Most popular" badge, slight scale) — the decoy/anchor frames the others.
2. Make the price unmissable: large tabular number, `/mo` qualifier muted beside it, and a monthly↔annual toggle that shows the savings ("2 months free") to nudge annual.
3. Build a feature comparison that scales by inclusion, not repetition: list the delta each tier adds, use a clean check matrix for full comparison, and put the highest-value differentiator first.
4. Give each tier one CTA with consistent verbs; the recommended plan gets the solid primary button, others get quieter ghost buttons. Keep button widths and card heights aligned on the grid.
5. Defuse risk near the buttons: "no credit card", "cancel anytime", money-back guarantee, and a short FAQ for the predictable objections (overage, downgrades, taxes).
6. Polish hierarchy and motion: 8px rhythm, equal-height cards, a subtle hover lift on the recommended tier, and `prefers-reduced-motion` respected.

## Rules
- One recommended plan, clearly signaled — an undifferentiated row of equal cards makes users bounce.
- Show the real total: surface annual-vs-monthly math and any per-seat/usage cost; hidden pricing erodes trust fast.
- CTA verbs match commitment ("Start free trial" vs "Contact sales"), never a generic "Submit" everywhere.
- Lead each tier with value/outcomes, not a feature dump; the comparison table is for buyers who already want detail.
- Keep contrast and legibility on badges/accents ≥4.5:1 — the "popular" highlight must not sacrifice readability.