27 Pricing Pages, 143 Screenshots: What They Agree On

Pricing is the page where a design decision has the most direct effect on revenue, and it is also the page where conventions are strongest. The registry has 143 screenshots tagged pricing across 27 sites, each with a curator-written caption describing what is actually on screen. Counting what those captions mention gives a rough census of the conventions.

What is on almost every pricing page?

A row of tiered cards. 22 of the 27 sites show plan cards or a tier comparison, making it the one near-universal decision. 13 name an Enterprise tier and 11 name a Free tier, which together describe the standard shape: a free or low entry point, one or two paid tiers, and a contact-sales column on the right.

How common is the 'most popular' badge really?

Less common than its reputation. Only 5 of 27 sites show a ribbon, banner or badge marking a recommended plan. Coding agents add one to essentially every pricing page they generate, which makes it one of the clearest cases of a model over-applying a pattern it has seen in tutorials more often than in production.

The sites that do use it commit to it. Gamma lifts its Pro card with a pink ribbon and a gradient button. Grammarly runs a solid teal banner across the Pro column and borders the whole column to match. Canva outlines Business in purple with a 'Recommended' ribbon. In each case the marker is reinforced by fill, border and elevation rather than sitting on its own.

What do the toggles actually toggle?

Not always billing period. 11 sites show a toggle or switch, but only 5 of those are a monthly and annual switch. The rest segment the audience or the product before showing any price at all.

• Canva splits 'Individuals and business' from 'Education' with a pill toggle.
• Gamma runs two controls at once: an Individual and Business tab set above a monthly and annual pill switch.
• Cloudflare uses a tabbed Network, SASE and Compute selector to swap the entire tier set.
• One site in the registry toggles cloud against self-hosted.

This is the more interesting finding. The audience toggle is roughly as common as the billing toggle, and it solves a different problem: showing one coherent set of prices to a visitor who could belong to two very different segments.

How do these pages create hierarchy between tiers?

By weight rather than by size. The captions consistently describe the recommended column as lifted, filled, outlined or ribboned while staying the same width as its neighbours. Brex uses three white cards with solid orange CTAs. Cloudflare runs four tiers with an orange active state. One site is annotated tiered card hierarchy by fill weight, which names the technique directly.

Four tiers appears more often than the three that agents default to. Cloudflare, Canva and Gamma all show four, and four-tier pricing variants appear three times across the registry's keywords.

What should you specify when generating a pricing page?

The defaults an agent will pick are three tiers, a most-popular ribbon and a monthly-annual toggle. Two of those three are minority patterns in the registry. Worth stating explicitly:

1. 01How many tiers. Four is common in the registry and three is the agent default. Say which you want.
2. 02Whether there is a recommended plan at all. 22 of 27 sites do without a badge. If you do want one, say that it is reinforced with fill and border, not a floating label.
3. 03What the toggle switches. Billing period and audience segment are about equally common, and they are not interchangeable.
4. 04Whether the right-hand column is a price or a conversation. 13 of 27 end with contact sales, which changes the CTA and the card's whole content.

The short version

• Tiered cards are the one near-universal convention, on 22 of 27 sites.
• The 'most popular' ribbon is on 5 of 27, far rarer than agents assume.
• Toggles are on 11 of 27, and only 5 of those switch billing period.
• Four tiers is more common than the three most agents default to.
• Hierarchy comes from fill, border and elevation, not from a larger card.