Find pricing page references by color and layout

Contents

• [Start with the layout](#start-with-the-layout)
• [Build a restrained color hierarchy](#build-a-restrained-color-hierarchy)
• [Use a comparison scorecard](#use-a-comparison-scorecard)
• [Checklist before you borrow a pattern](#checklist-before-you-borrow-a-pattern)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

Pricing page references are easiest to compare when you separate the job into two checks: how the page is structured and how the color system guides attention. Start with the examples below, then score each reference against the same checklist instead of choosing the page that simply looks most polished.

Start with the layout

Compare the main pricing decision first. Ask:

1. Is the plan comparison visible immediately, or does the page lead with a promise, testimonial, or feature list?
2. Are plans arranged in equal cards, a highlighted recommended plan, or a simpler two-column choice?
3. Does the page show monthly and annual billing together, or make the visitor switch views?
4. Are feature differences readable without opening another screen?
5. Is the primary action repeated at the point where the visitor finishes comparing?

The HeroUI Pro pricing reference has a wider composition, while the Linear pricing reference is closer to a square capture. Treat that as a useful starting contrast, not proof that one layout is better. Compare the visible plan count, card width, emphasis on the recommended option, and amount of supporting copy before borrowing a pattern.

Open the examples below and compare the first screen before looking at details. For a page with three or four plans, equal-width cards usually make scanning easier. If one plan is the intended choice, a stronger border, background, or position can mark it, but the distinction should still leave the other options easy to understand.

Build a restrained color hierarchy

The supplied palette examples cluster around dark and muted greens, including #15502e, #14532d, #233f2a, #2c7a4a, and the lighter #799c92. Use them as roles rather than placing every green on the page:

• Deep green for the main action, selected plan, or important headings.
• Near-black green for body text or large blocks where a softer alternative to black is useful.
• Mid green for secondary actions, icons, or supporting labels.
• Pale green or gray-green for selected backgrounds, plan badges, and quiet sections.
• A neutral surface for most cards so the pricing information remains the focus.

Check text and button contrast at the actual size you plan to use. A color that works for a large heading may be too weak for small feature labels. Keep one clear action color across all cards, then use borders, spacing, and type weight to create the rest of the hierarchy.

Use a comparison scorecard

Give each reference a score from 1 to 5 for decision clarity, plan comparison, mobile adaptability, color restraint, and action visibility. Add a short note for each score. A strong reference is not necessarily the most decorative one. It is the one whose structure answers the visitor's pricing questions with the fewest extra steps.

A practical direction could be: spacious heading, short explanation, billing switch, three equal plan cards, one highlighted recommendation, concise feature rows, and a final comparison note below. Use deep green for the main action and selected state, then reserve lighter greens for supporting surfaces. This gives you a usable draft without copying a page wholesale.

Checklist before you borrow a pattern

• Can a visitor tell what changes between plans in ten seconds?
• Does the selected color still work for text, borders, and buttons?
• Does the recommended plan look distinct without hiding the alternatives?
• Do cards remain readable when the viewport becomes narrow?
• Are prices, billing terms, and actions aligned consistently?
• Have you recorded what you observed separately from your own proposed design system?

The examples below can help with visual direction, but they do not establish an official internal design system for your product. Record the observed colors and layout choices, then adapt them to your own content, accessibility checks, and product rules.

Use this in your AI agent

> Find pricing page references with muted or dark green palettes. Compare their plan-card layout, recommended-plan treatment, billing controls, feature rows, spacing, typography, and action hierarchy. Return a shortlist, a color-role map, a layout scorecard, and a concrete pricing-page direction without claiming that observed styles are an official design system.

Install Fudge for your AI agent to inspect the references while you work.

Choose three columns when visitors need to compare several distinct plans side by side and the feature differences can stay concise. Make the cards equal in width, align prices and actions, and give the recommended plan a modest visual lift rather than making the other plans look disabled.

Choose two columns when the real decision is simpler, such as individual versus team, starter versus business, or monthly versus annual. With fewer choices, you can give each option more room for explanation and make the difference between them clearer.

For either layout, test the narrowest likely viewport before finalizing it. A three-column desktop layout may need to stack into cards on mobile, while a two-column layout may remain readable longer. Compare the amount of copy, not only the number of plans. If a plan needs a long feature list to make sense, it may need a separate details section below the main choice.

Check the palette in context, not as isolated swatches. Use the deepest green for the action or selected state, then test it with white text, dark text, borders, and disabled-looking surfaces. The lighter green examples can support badges or backgrounds, but they may be too weak for small labels or critical controls.

Create a small test sheet with the page background, card background, heading, body text, primary button, secondary button, selected plan, error state, and focus state. Review each combination at its real font size. Also check whether links and buttons remain distinguishable without relying on color alone. A border, icon, label, or weight change can reinforce the selected plan.

Finally, view the page in grayscale and reduce the display brightness. The main price, recommended option, and next action should still form a clear reading order. If every card is equally dark or every action uses the same visual weight, adjust spacing and type hierarchy before adding more colors.

Related questions

• Find SaaS dashboard references by color and layout
• Find portfolio homepage references by color and layout
• SaaS Landing Page References by Color and Layout
• Find onboarding flow references by color and layout