Pricing pages are some of the most carefully designed pages on any SaaS site. Color plays a critical role: it guides the user toward the recommended plan, creates visual differentiation between tiers, and reduces the cognitive load of comparing options.
Highlighting the Recommended Plan
The standard pattern: one plan (usually the middle tier) gets visually elevated with a colored border, colored header, or slightly larger card. Use your primary color for this highlight. The other plans use neutral borders and backgrounds. The contrast between the highlighted plan and the neutrals makes the recommendation unmistakable.
Plan Differentiation
Each plan should be visually distinct but not equally attention-grabbing. A common approach: the basic plan uses a light, muted treatment (gray header or no header). The recommended plan uses your primary color (bold header, colored CTA). The premium plan uses a dark or sophisticated treatment (dark header, gold accent).
CTA Button Hierarchy
The recommended plan should have the most prominent CTA (filled button in your primary color). Other plans should have secondary CTAs (outlined buttons or muted fills). This creates a clear visual hierarchy that guides the eye to the recommended action without hiding the alternatives.
Feature Comparison Colors
Feature tables within pricing pages use checkmarks (green), X marks (red or gray), and partial indicators (amber). These should come from your extended palette's semantic colors. Keep them consistent across all plans.