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.