SaaS Pricing Page Design Guide - The Page That Makes or Loses You Money
A pricing page guide covering tier architecture, comparison tables, anchor pricing, highlighted plans, trial psychology, enterprise CTAs, FAQ placement, and trust signals.
Built for practical use
2 vs 3 vs 4 tier guidance
A pricing page guide covering tier architecture, comparison tables, anchor pricing, highlighted plans, trial psychology, enterprise CTAs, FAQ placement, and trust signals.
Highlighting and anchor pricing tactics
A pricing page guide covering tier architecture, comparison tables, anchor pricing, highlighted plans, trial psychology, enterprise CTAs, FAQ placement, and trust signals.
Enterprise CTA patterns
A pricing page guide covering tier architecture, comparison tables, anchor pricing, highlighted plans, trial psychology, enterprise CTAs, FAQ placement, and trust signals.
Pricing page teardowns
A pricing page guide covering tier architecture, comparison tables, anchor pricing, highlighted plans, trial psychology, enterprise CTAs, FAQ placement, and trust signals.
Part 3: Visual Design Best Practices
Typography
- Prices: Large, bold, impossible to miss (typically 36-48px)
- Tier names: Clear, distinct (typically 18-24px, bold)
- Feature lists: Readable body text (14-16px)
- Supporting text: Smaller (12-14px)
Color
- Primary tier CTA: Your primary brand color (highest contrast)
- Other tier CTAs: Secondary styling (outlined buttons or muted color)
- Recommended tier: Accent color to make it stand out
- Backgrounds: White or very light neutral; avoid busy backgrounds behind pricing cards
Spacing
- Generous white space: Pricing cards need breathing room
- Consistent card heights: Even if content varies, make cards the same height visually
- Visual alignment: Feature lists should align across tiers for easy comparison
Mobile
- Cards stack vertically: On mobile, tier cards stack one below another
- Recommended tier appears first or highlighted prominently
- Feature comparison table — either horizontal scroll with sticky feature column, OR collapse into expandable sections per tier
- CTAs are prominent and easy to tap (44px minimum)
Sources and References
- Price Intelligently / ProfitWell research on SaaS pricing
- Patrick Campbell, "Pricing SaaS Products"
- Kyle Poyar, "Pricing Strategy for SaaS"
- ChartMogul research on SaaS pricing
- Baymard Institute pricing UX research
- Intercom research on SaaS pricing
Created by Desisle — SaaS UI/UX Design Agency desisle.com | hello@desisle.com Free to use and share with attribution.
For a custom pricing page design and conversion optimization project, contact us at hello@desisle.com.
Keep Building With These Next
SaaS Feature Prioritization Framework - RICE Scoring Worksheet
A formula-based worksheet for prioritizing features using reach, impact, confidence, and effort so roadmap discussions are less subjective.
Open RICE WorksheetCompetitive UX Analysis Template - How to Audit Your Competitors' Design
A structured way to compare 3 to 5 competitors across onboarding, navigation, dashboard design, mobile UX, pricing, discoverability, and error handling.
Open Competitive MatrixSaaS Dashboard Design Guidelines - Turning Data Dumps Into Decision Tools
A practical dashboard design guide covering information hierarchy, chart selection, filters, drill-downs, power-user disclosure, and data-state design.
Open Dashboard PlannerNeed This Applied to Your Product? We'll Turn It Into Execution.
These resource pages are meant to be used hands-on. If you want the audit, plan, or framework translated into live product work, we can do that with your team.