Pricing Page Design: 3 Real Examples to Copy
How do you build a pricing page that helps people choose? Three real sites compared, the ideas to copy and a monthly/yearly switch with no JavaScript.
A good pricing page does the choosing with the reader: it points at one plan, shows the saving in real money, explains units in plain words and repeats the price on the button. Here are three real sites that do it well, a prompt for each idea and a monthly/yearly switch you can copy.
We found all three on Pricing Pages, a free gallery of pricing page designs, and recorded them on a laptop-size screen on 21 October 2026. We only describe what you can see: we do not know their sales numbers, so we will not guess which choice sells more.
1. Chronicle: Each Plan Lists Only What Is New
What it is: Chronicle is a tool for making presentations. Four white cards with the same layout: Free at $0, Pro at $15, Plus at $30, Max at $59, per user per month. The only thing that stands out is a tiny black "Popular" tag on Plus.
Why it matters: Pro starts with "Everything in Free, and:", Plus with "Everything in Pro, and:". Each card answers one question: what do I get one step up? And when you turn on annual billing, the old price stays on the card, crossed out, next to the new one: Pro from $15 to $12, Plus from $30 to $25, Max from $59 to $45.
How to do it: start each plan's list with "Everything in [the plan before], and:" and list only the new things. When the billing period changes, keep the old price crossed out next to the new one.
Rewrite my plan lists so that each one, from the second on, starts with "Everything in [previous plan], and:" and contains only the new features. If a feature appears in several plans, keep it only in the first. Then, when the user switches to annual billing, show the monthly price crossed out next to the new one, in the same spot on the card. Here are my plans: [paste names, prices and features].
2. Orshot: A Slider That Picks the Plan for You
What it is: Orshot creates images, PDFs and videos automatically from templates. The headline is the offer itself, in huge letters: "100 free credits. Every month." The free plan is a slim bar on top, then three cards: Launch at $39, Grow at $160, Scale at $349. Annual billing carries a small green "2 months free" label.
Why it matters:
- One strong push. Grow has a "POPULAR" tag and the only black, filled button among the plans.
- You describe your need, the page finds the plan. A slider asks how many images or PDFs you need a month. In our recording, at about 36,000 images the Grow card switched to 40,000 credits and $280, and its tag became "SUGGESTED PLAN". "How many images do I need?" is a far easier question than "which plan am I?".
- The unit is translated. Under "20,000 render credits / month" a small grey line says: about 20,000 images or PDFs, or about 333 minutes of video.
How to do it: if you price in a unit you invented (credits, tokens, seats, hour packs), add one short line under each number that says what it means in real life. "About 100 images a month" beats "100 credits". For a course, "8 one-hour lessons" beats "8 credits".
My service is priced in [unit: credits, hours, seats...]. For each plan, write one short line under the number that translates the unit into something concrete for a customer (e.g. "about 100 images a month"). Then suggest one simple question about the customer's need (e.g. "how many cases do you handle a month?") and build a slider that, based on the answer, highlights the right plan with a "Recommended for you" tag. Only one plan at a time may have the filled button.
3. Supernotes: Two Plans and the Price on the Button
What it is: Supernotes is a note-taking app. Only two plans: Starter, free and blue, and Unlimited, $8.03 a month and green. The first line says: "All essential features are free. Upgrade to our Unlimited plan once you decide Supernotes is right for you."
Why it matters: two plans means one question: free or not? The billing switch has three options (Monthly, Yearly "25% Off", 4-Year "50% Off") and starts on Yearly. The price goes from $11 to $8.03 to $5.35 a month. Above all, the button does not say "Get started": it says "Upgrade for $8.03 / month", and right under it in small text, "$96 billed annually". The last thing you read before you click is what you will pay, and how.
How to do it: write the price inside the button, "Upgrade for $8 / month" instead of "Get started", and put the real total right under it, like "$96 billed once a year". No surprises after the click.
Change the button text on my pricing page: instead of "Get started", write "Get [plan] for [price] / month". Under each button add, in small text, the real total and how often it is charged (e.g. "$96 billed once a year"). When the user changes the billing period, the button and the total must change together with the price.
Which Model to Pick
- Chronicle (four plans, quiet tag, crossed-out price): if your buyers compare features.
- Orshot (slider, one filled button, translated units): if they do not know how much they need.
- Supernotes (two plans, yearly pre-selected, price on the button): if you have one clear upgrade.
A Monthly/Yearly Switch With No JavaScript
What it is: a tiny demo we built for this article, with one idea from each site: a recommended plan, the saving in money, the price on the button. It uses no JavaScript at all.
Why it matters: beginners often build the switch from plain boxes that a keyboard cannot even reach. Two real radio buttons (the round form options where you pick only one) are already handled by the browser with a mouse, a keyboard and a screen reader.
How to do it:
- A fieldset (a group of form fields) with two radios, Monthly and Yearly, Yearly already selected with "save $36" next to it. The legend "Billing period" stays for screen readers but is hidden from view.
- Every piece of text that changes exists in two versions, one with class m (monthly) and one with class y (yearly): for example $15 and $12, or "Billed every month" and "$144 billed once a year".
- The group becomes a sand-colored pill. The real radio dots become invisible but stay in place, so they keep working.
- With the CSS :has() selector, the chosen option gets a white background and a soft shadow, and a blue ring when reached by keyboard.
- The key rule: if the section contains a checked Yearly option, it hides every monthly text, and the other way round. One click and the whole table updates.
In Chrome, with the keyboard alone, Tab reaches the switch and the arrow keys change option.
Notice the label says "save $36", not "save 20%". Money is easier to feel than a percentage, so do the math once for the reader: $3 a month, times 12.
Build a Monthly/Yearly switch for my pricing page with no JavaScript. Use a fieldset with two real radio inputs (Yearly pre-selected) and a "Billing period" legend visible only to screen readers. Every text that changes (price, billing note, button text) is written in two versions with classes .m and .y. With the CSS :has() selector: if the section contains the checked yearly radio, hide .m, otherwise hide .y. Pill style, chosen option with a white background, focus ring visible from the keyboard. Next to Yearly, write the saving in money, not as a percentage. My prices: monthly [X], yearly [Y per month].
Small Test
Ten minutes. Open your pricing page and answer three questions: is exactly one plan highlighted? Does the button say what the click costs? Can you switch from monthly to yearly using only Tab and the arrow keys? If any answer is no, paste the matching prompt above. It worked if someone who does not know your service can tell you in 30 seconds which plan they would pick and what they would pay.
Watch Out For
- We do not know what sells more. We describe what you can see, not the sales results of the three sites.
- Check :has(). It works in all major browsers today, but in a very old browser both prices would show side by side. Test in the browsers your customers use.
- Keep the total honest. If you say "$8 a month" but charge $96 a year, say so under the button.
Thanks to the teams behind Chronicle, Orshot and Supernotes for pricing pages worth studying, and to Pricing Pages for collecting them. This article is adapted from a comparison Alek published on Medium.
Next step: fix the checkout form too with Forms That Look Cheap: 5 Fixes. To rebuild the page from a real reference, use MagpUI and Design Prompts.
In short: A good pricing page does the choosing with you: it points at one plan, shows the saving in money, explains units in everyday words and repeats the price on the button.
Newsletter
AI that actually works, in your inbox.
New pills, the tools we use and what we learn on real projects. Few emails, only when there is something useful.
