Pricing page
Every SaaS ships this page. Almost none get it right.
The starting point
Count the problems.
Layer 1: Copywriting
Fix the tier names
Before: Basic / Pro / Enterprise After: Starter / Team / Organization
Fix the tier descriptions
Before: "5 projects, 1 GB storage, Email support" After: "For solo makers shipping side projects" / "For teams shipping daily" / "For companies that need compliance and control"
Describes the buyer, not the product.
Fix the CTAs
Before: Get Started / Get Started / Get Started After: Start for free / Start a team trial / Talk to sales
Fix the section header
Before: "Choose the plan that's right for you." After: "Start free. Scale when you're ready."
Layer 2: Typography
Tabular numerals
Tier label letterspacing
Hierarchy between tiers
Proper punctuation
Layer 3: Craft
The toggle
The recommended tier
CTA differentiation
<a>, not <button>. h-11 for 44px touch target.
Responsive layout
Layer 4: Animation
Toggle price transition
Card hover states
Reduced motion
Reduced motion keeps the crossfade but removes vertical translation.