Pricing table design: an honest comparison people can act on
A pricing table has one job: help someone pick the right option and pay for it without surprises. That means clear tier names, the same rows compared across every plan, one honest recommendation, and the small print (billing period, tax, cancellation) visible before the button, not after.
What a visitor is trying to do
Someone looking at prices is close to deciding. They want to know three things fast: which option fits them, what it really costs over the time they care about, and what happens after they pay. Good pricing table design answers those questions in that order. Clever layouts, animated toggles and long feature lists come a distant second.
The structure that works
- Two to four options. One is a price list, five is a spreadsheet. Three is common because it gives a natural middle choice, but use the number your business actually has.
- Names that describe the buyer. “Solo”, “Studio”, “Agency” tell people where they fit. “Basic”, “Pro”, “Ultimate” only tell them how much they'd spend.
- One line on who each tier is for. “For one person selling a few products” saves people reading every row.
- The price, with its period. Show “per month” or “per session” right next to the number, and say whether tax is included.
- The same rows in the same order across every tier. A comparison only works when the reader can run their eye along one row.
- One button per tier, labelled with what happens. “Start the Studio plan”, “Book a session”, “Buy the pack”.
Recommending one plan, honestly
Highlighting one tier helps people decide, as long as the recommendation is genuine. Mark it with a border in the accent colour, a slightly different surface and a short label such as “Most chosen” only if that's true, or “Good for most studios” if it's a judgement. Avoid the tricks that erode trust: a decoy tier priced only to make another look cheap, a struck-through price that was never charged, or a countdown that resets.
Details people need before paying
| Detail | Why it matters |
|---|---|
| Billing period and renewal | Monthly or yearly, and whether it renews automatically |
| Tax | Whether prices include VAT or sales tax for the buyer's country |
| Cancellation and refunds | How to cancel, any notice period, what's refundable |
| Limits | Seats, sessions, projects, storage: whatever runs out |
| What happens after paying | An email, an account, a booking link, a download |
| Who to ask | A contact link for questions that the table doesn't answer |
If you offer monthly and annual billing, a toggle is fine, but default to the period most people choose and state the saving as an amount rather than a percentage of an invented higher price.
Pricing tables on phones
Three side-by-side columns don't fit on a 375px screen. The usual answer is to stack the tiers, recommended one first or in its natural order with its highlight kept. The cost is that row-by-row comparison disappears, so keep each tier's list short and lead with the differences. For a long feature comparison, add a separate table below with tiers as columns and allow it to scroll sideways inside its own container, with the first column fixed.
Accessibility
- Use real structure. Each tier as a list with a heading, or a true
tablewith header cells for a detailed comparison, so screen readers can announce which tier and which row they're in. - Don't use ticks and crosses alone. Give icons text alternatives such as “Included” and “Not included”.
- Don't rely on colour for the recommendation. Add the text label as well as the coloured border.
- Make toggles real controls. A monthly/annual switch should be a button or radio group that works with a keyboard and announces its state.
Pricing sections in Anticode
Pricing is one of Anticode's must-have sections, and it can also be its own Pricing page on a multi-page site. The design engine lays tiers out side by side on wide screens and stacks them on phones, with one plan marked by the accent colour. The words and prices come from your brief, so give the Architect your real tiers, periods and what each includes.
Buy buttons point at a payment link from your own provider: Stripe Payment Links, PayPal, Gumroad, Lemon Squeezy, Shopify or Whop. The checkout, receipts, tax and refunds then happen in that provider. There's one payment link per account, so every buy button opens the same checkout; for several tiers, point it at a product list or a multi-item checkout at your provider.
Questions people ask
How many pricing tiers should I show?
Two to four. Three is common because the middle option gives people an easy default, but show the number of options your business really has.
Should I highlight a recommended plan?
Yes, if it's an honest recommendation. Mark it with a label and a border, not colour alone, and don't build a decoy tier to push people towards it.
Should prices include tax?
Say clearly either way. For consumers, many countries expect prices shown with tax included; for business buyers, prices before tax are common.