Pricing Page Design

Pricing page layout, plan comparison, feature matrices, and pricing tier presentation.

dragoon0x Updated

File contents

Pricing Page Design

Pricing Page Principles

  1. 3 tiers is optimal. Free/Starter, Pro, Enterprise. More than 4 creates decision paralysis.
  2. Highlight the recommended tier. Visually distinct (larger card, "Most Popular" badge, brand color border).
  3. Lead with benefits, not features. "Build unlimited projects" not "Unlimited project slots."
  4. Show annual savings. "Save 20% with annual billing" with monthly/annual toggle.
  5. Price anchoring. Show the most expensive plan first (right side) to make the middle feel reasonable.

Feature Comparison

  • Checkmarks for included features. X or dash for excluded.
  • Group features by category.
  • Sticky header with plan names on scroll.
  • Highlight differences between tiers, not similarities.

Enterprise Tier

  • "Contact Sales" instead of a price.
  • List 3-4 key differentiators (SSO, SLA, dedicated support).
  • Don't make it feel inaccessible. Frame as "Custom plan for your team."

dragoon0x/everything-design-taste/tree/main/skills/pricing-page-design commit 54033efe2a

Frequently asked questions

npx skillmds@latest add dragoon0x/pricing-page-design