DESIGN STUDY · PRICING PAGES

The pricing pages worth stealing from — and what I'd take from each

Found via Exa find-similar off canonical seeds, captured live in a headless browser. Fifteen known-good pages, each with the one move worth stealing.

Goal — build a pricing page that is scannable, easy to compare, and still sells

What I’d do

Steal structure, not skin: ship tiered cards for the pitch with a feature matrix beneath for the compare — and reserve usage pricing for genuinely consumption-based products.

Across all fifteen, the best pages do one thing well — they don't mix three patterns in one viewport.
Cards win the pitch (Linear, Attio, Clerk); a matrix wins the compare (Figma, Notion). Put both on the page, in that order.
Usage pricing (Stripe, Mux, Sentry) reads clean only when the product really is metered — don't force it.

The options

Tiered cards

One self-contained card per plan — the default for 2–4 plans.

Recommended

Good for

Pitching 2–4 plans where each tier has a clear story.

Tradeoff

Repeats the feature list per card, so cross-tier comparison is weak on its own.

Best when

The plan names and headline value matter more than line-by-line compare.

Feature-comparison matrix

Each feature named once down the left; plans across the top; read across one row.

Strong

Good for

Dense plans where buyers compare feature-by-feature.

Tradeoff

Reads like a spec sheet; weak as a standalone pitch.

Best when

Put it BENEATH the cards, behind a 'compare all features.'

Usage / pay-as-you-go

A rate, not a plan — price scales with what you consume.

Situational

Good for

Genuinely metered products (API calls, events, minutes, email).

Tradeoff

Hard to forecast cost; a poor fit for seat-based or fixed-scope offers.

Best when

The product's cost truly tracks consumption — then make the rate legible.

At a glance

Option	Scannable	Compare depth	Pitch fit	Fits usage-based
Tiered cards	High	Low	High	No
Matrix	Med	High	Low	No
Usage	High	Med	Med	Yes

If not the recommendation

Feature-comparison matrix

Why not #1: Leading with a matrix compares well but reads like a spec sheet — weak as the first thing a buyer sees.

Usage / pay-as-you-go

Why not #1: Usage-first is honest only for metered products; for seat-based plans it hides the real cost and stalls the decision.

Fifteen known-good pricing pages

Surfaced by Exa find-similar off canonical seeds (Linear, Stripe, Vercel, Resend, Attio, Framer), then captured live and filtered for clean renders. Click any to zoom.

Linear **Steal** Restraint — 3 dark cards, one accent, type hierarchy carries it.

Stripe **Steal** Two pricing models (per-transaction + custom) on one page, no clutter.

Vercel **Steal** Frames it as 'scale your app, control your costs' before any number.

Attio **Steal** 'From zero to IPO' narrative tiers; the popular plan earns visual weight.

Figma **Steal** Per-seat tiers + a deep matrix where each feature is named once.

Notion **Steal** Cards up top, a categorized feature matrix below — best-of-both.

Clerk **Steal** Free tier + usage add-ons; MAU dials shown inline so cost stays predictable.

Resend **Steal** Minimal dark cards; the email-volume number is the only dial.

Supabase **Steal** 'Predictable pricing that scales'; compute add-ons surfaced per plan.

Render **Steal** Calm light theme, four colour-coded tiers, per-resource pricing.

Sentry **Steal** Usage-based with a real free tier; event volume is the single lever.

Webflow **Steal** Base plan + add-on configurator; site vs workspace plans split cleanly.

Cal.com **Steal** Open-source angle; self-host offered as a legitimate tier.

PlanetScale **Steal** Usage + per-branch pricing explained with a calm, scannable table.

Liveblocks **Steal** Developer MAU tiers — dark and dense, but still legible.

Captured with steal-this-design (headless Chromium + extracted tokens). Reference screenshots are of live third-party pricing pages, captured for design study only.