Three-Tier Package / Pricing Cards

1Why three tiers

Three is the default not because it's prettier, but because it's the smallest number of options that lets you use comparison as a persuasion tool.

• Extremeness aversion / the compromise effect (Simonson & Tversky, 1992). When people face a range, they avoid the endpoints. The cheapest option feels like it's missing something; the most expensive feels indulgent. The middle reads as "the sensible one." With only two options you get a binary cheap-vs-expensive judgment; with three you manufacture a safe middle.
• Choice overload (Iyengar & Lepper, 2000 — the jam study). More options increases browsing but decreases conversion. Past roughly 4–5 tiers, users defer the decision entirely.
• Hick's Law. Decision time scales with the log of the number of options. Every extra tier adds cognitive cost to a page whose only job is to end deliberation.
• Anchoring. The highest tier's price sets the reference frame for the other two. A $299 tier makes $99 read as moderate. This works even when almost nobody buys the top tier — its job is partly to exist.

Counterpoints worth keeping: Basecamp famously collapsed to a single price and argued tiering creates decision friction and feature-gating resentment. Usage-based products (Vercel, Supabase, most APIs) often need a fourth "Enterprise / Contact us" slot because the top tier can't be priced publicly. Three is a strong default, not a law.

2Why we highlight one tier

This is the core of the pattern. The highlight does four distinct jobs:

It removes the decision, not just decorates it. Most visitors arrive without enough information to evaluate feature lists. A visual recommendation is a shortcut they're grateful for. Default bias is powerful — presenting a pre-selected option meaningfully increases the chance it's chosen, even when the user could trivially pick another.

It creates social proof. "Most popular" is the most common badge because it's an implicit endorsement by peers. It converts a private cost-benefit calculation into a much easier question: what do people like me pick? This is why badge copy matters — "Most popular" (social proof) tests differently from "Best value" (economic reasoning) and "Recommended" (authority).

It resolves the compromise effect in your favor. The middle tier is already psychologically advantaged by sitting between two extremes. Highlighting it stacks a visual cue on top of a cognitive one. The highlight doesn't create the preference so much as confirm and accelerate it.

It's a margin decision, not just a UX decision. The tier you highlight should be the tier that is best for the business and defensible for the user. Usually that's the middle: high enough ACV to be worth acquiring, feature-rich enough that the customer doesn't churn from frustration, and cheap enough not to require a sales conversation. Highlighting a tier that under-serves the buyer buys you a short-term conversion and a long-term refund.

Which tier to highlight

3The decoy effect (asymmetric dominance)

Huber, Payne & Puto (1982); popularized by Dan Ariely's Economist subscription example (web $59 / print $125 / print+web $125 — the print-only option existed only to make the bundle look free). A decoy is an option that is clearly worse than one specific other option, which makes that option look like an obvious win.

Practical version: price the middle tier close to the top tier while giving it noticeably less, or price the bottom tier close to the middle while giving it much less. The bottom tier then functions as a decoy pushing people up.

Ethical line: a decoy that's genuinely purchasable and honestly described is fine — it's just relative pricing. A "Most popular" badge on a tier that isn't popular is a false statement to consumers, and is squarely in dark-pattern territory (and increasingly the kind of thing regulators look at). Use "Recommended" or "Best value" when you're expressing an opinion rather than a fact.

4Anatomy of a tier card

Standard slots, roughly in visual order:

Feature list rules

• Cumulative framing beats exhaustive framing. "Everything in Starter, plus…" is shorter, communicates progression, and avoids repeating rows.
• Cap at 5–7 lines. Beyond that, link to a full comparison table below the fold. The cards are for deciding; the table is for justifying.
• Avoid mixing ✓ and ✗ inside a card. Listing what a tier lacks on the tier itself reads as punitive. Put absences in the comparison table where the framing is neutral.
• Lead with the differentiator. The first bullet of each tier should be the reason to move up from the one below it.
• Quantities over adjectives. "10 projects" beats "generous limits."

5Visual mechanics of the highlight

Effective highlights stack 2–3 signals. One signal alone is usually too subtle; four or more looks like a mistake.

Available signals:

• Elevation — stronger shadow, or the only card with a shadow.
• Scale — 1.03–1.08×. Beyond ~1.1× it breaks the grid rhythm and looks broken on mid-size viewports.
• Border/ring — 2px accent ring is the cheapest, most reliable signal.
• Inverted fill — dark card in a light set (or vice versa). Strongest signal available, but forces you to restyle every child element and is where contrast bugs live.
• Badge/ribbon — the only signal that carries semantic content, not just emphasis.
• Vertical offset — highlighted card breaks the top alignment by 8–16px. Works with scale.
• CTA weight — filled vs outline. Often the single highest-impact signal because it's at the point of action.
• Accent bar — 4px colored strip along the card's top edge.

Layout considerations

• Scaling a card changes its height. Decide whether the grid uses items-stretch (all cards equal height, highlighted one grows outward) or items-center. Equal-height cards with a scaled highlight is the most robust.
• Vertical rhythm across cards matters more than people expect: price, CTA, and the start of the feature list should sit on the same baseline in all three cards. Uneven qualifier-line lengths are the usual culprit — set a min-height on that line.
• Reserve badge space in all three cards (even if empty) so the price rows align.
• Card order: low → high left-to-right is the western reading default and supports anchoring poorly. High → low anchors better but feels aggressive. Low → high with a highlighted middle is the near-universal compromise and what users expect.

Responsive

• At mobile widths the cards stack, which destroys the center-stage advantage. Two options: (a) reorder so the highlighted tier is first, or (b) keep source order and rely on the badge/ring. Reordering converts better; keeping order is more honest about price progression.
• If you reorder visually, use CSS order and keep DOM order logical for screen readers — or better, reorder the data itself so both match.
• Horizontal scroll-snap carousels on mobile keep the comparison intact but hide options; if used, show a peek of the next card so users know to scroll.
• Sticky CTA bar on mobile once a tier is in view.

6Pricing presentation

• Monthly/annual toggle — default to annual with the savings visible ("Save 20%" / "2 months free"). Show the effective monthly rate as the big number with "billed annually" beneath; showing the annual lump sum as the headline suppresses conversion.
• Charm pricing ($49 vs $50) — measurable effect in consumer contexts, much weaker in B2B, where round numbers read as more premium and less manipulative.
• Price gaps — the ratio between tiers frames value. Roughly 2–3× between tiers is common. A small gap between middle and top pushes people up; a large gap makes the middle feel safe.
• Strikethrough / original price — effective for promotions, corrosive if permanent.
• "Contact sales" as a fourth slot removes the need to publish enterprise pricing and makes the top public tier look attainable.

7Accessibility

• Never signal the highlight with color alone (WCAG 1.4.1). The badge text is what makes it perceivable — it's an accessibility feature, not decoration.
• Contrast on inverted cards is the most common failure. Muted body text that passes on white frequently fails on a dark highlighted card. Check the feature list text, the "/mo" suffix, and disabled/secondary states separately.
• Semantics: feature lists should be real <ul> elements so screen readers announce item counts. Cards can be <article>s or list items; the tier name should be a heading so users can jump between tiers.
• Badge announcement: put the badge text inside the card's heading region, or associate it via aria-describedby, so it isn't lost. A purely visual ribbon is invisible to screen reader users.
• Focus order must follow visual order. This is the trap with mobile reordering via CSS order — focus follows DOM, not visual placement.
• Touch targets: 44×44px minimum for CTAs and the billing toggle. Toggles should be real inputs (role="switch" or a radio group), not divs.
• Don't make the whole card clickable if it contains a button and a link — it creates ambiguous activation targets. If you do, use the "stretched link" pattern with a single primary action.
• Reduced motion: if the highlighted card animates in or scales on hover, gate it behind prefers-reduced-motion.

8Copy patterns

Badges: Most popular · Best value · Recommended · Most teams choose this · Our pick

Tier naming:

• Sequential: Basic / Pro / Premium — clear ordering, no self-selection help
• Persona: Solo / Team / Agency — strong self-selection, weak ordering
• Branded: Hobby / Pro / Enterprise (Vercel) — ordering plus identity signal

CTA differentiation: Escalating commitment reads well — "Start free" → "Get started" → "Talk to sales."

9Measurement

Don't optimize for clicks on the highlighted card — that's trivially gameable by making the highlight louder.

Track instead:

• Revenue per visitor (RPV) — the actual objective
• Tier mix — % of purchases per tier, before and after a change
• Time-to-decision on the pricing page (proxy for choice friction)
• Downgrade and churn rate by tier — a highlight that pushes people into a tier that doesn't fit shows up here 60–90 days later, not in the conversion metric
• Expansion rate from the highlighted tier — if the middle is doing its job, it should feed upgrades

Test one variable at a time: badge copy, which tier is highlighted, price gap, and toggle default are four separate experiments.

10Implementation notes (Next.js / React / Tailwind)

• Data-drive the tiers. A tiers array with { name, price, cadence, blurb, features[], cta, highlighted } keeps the highlight a single boolean rather than duplicated markup — makes A/B testing which tier is highlighted a one-line change.
• Conditional classes rather than a separate component for the highlighted card; a forked component drifts.
• Grid: grid md:grid-cols-3 items-stretch gap-6 with h-full flex flex-col inside each card and mt-auto on the CTA so buttons bottom-align regardless of feature count.
• Ring approach: ring-2 ring-[accent] md:scale-[1.04] shadow-lg z-10 on the highlighted card. Add relative so z-10 applies and the scaled card layers over its neighbors.
• Badge: absolute -top-3 left-1/2 -translate-x-1/2 with the card set to relative and overflow-visible. Reserve badge space in non-highlighted cards with an invisible spacer or pt offset on the grid.
• Billing toggle: lift to shared state above the grid, derive displayed price from it, and animate the number change carefully (or not at all — jitter reads as unreliable). Server-render prices; don't compute them client-side where a hydration mismatch can flash the wrong number.

11Examples worth studying

• Stripe — restrained, integrated pricing, no aggressive highlight; trust over persuasion
• Linear — tight visual system, minimal feature lists, strong tier qualifiers
• Vercel — Hobby/Pro/Enterprise; usage-based reality behind fixed tiers
• Notion — heavy use of persona qualifiers and cumulative feature framing
• Slack — clear annual/monthly savings presentation
• Basecamp — the single-price counterargument

12Open questions to resolve per project

1. Is the middle tier the one we actually want to sell, or is it just the middle?
2. Can we substantiate the badge copy we've chosen?
3. What's the price gap ratio, and is it doing anchoring work?
4. Does the highlight survive mobile stacking?
5. Does the highlighted card's contrast pass in both themes?

Research notes · treyvititoe.com