Pricing Table
Side-by-side plan comparison that makes the recommended option obvious.
Layout
3-column card grid (Free / Pro / Enterprise) centered on page. Recommended plan elevated 8–12px, accent border, "Most Popular" badge. Max width 960px. Stacked on mobile.
Content Slots
Plan name
16px semibold, top of card.
Price
Large display (32–40px bold) + billing period (14px secondary). "Contact us" for enterprise.
Plan description
14px secondary — 1 sentence positioning statement.
CTA button
Primary for recommended, secondary/outline for others.
Feature list
Checkmark list, 14px. 5–8 items per plan. Show differentiators, not all features.
Most popular badge
Accent color pill above the recommended card.
Annual/monthly toggle
Switch at top of section — shows annual discount.
Hierarchy Rules
- Recommended plan must be visually loudest — elevation + accent border + badge
- Price is the primary element within each card — largest text
- CTA buttons must be visually distinct between recommended and non-recommended
- Feature list should emphasize differences — grey out features not in lower tiers rather than omitting them
- Apply squint test: recommended plan must win visually at any zoom level
Examples
- SaaS: Free (hobbyist) / Pro $12/mo (individuals) / Team $49/mo (recommended) / Enterprise (contact)