Page type · 13 assets
SaaS pricing page
A pricing page is the highest-stakes layout in a product site: it is where interest becomes a decision. The design job is comparison — make the plans differ legibly, make one obviously recommended, and make the feature list scannable without a spreadsheet.
What to get right
- One plan visually elevated, never two competing for the same emphasis.
- The feature table readable at a glance; align on the row, not the column.
- Currency, billing period and the annual discount stated before the click, not after.
- A quiet, high-contrast CTA per column that does not shout over the price.
The archetype taken apart section by section, down to the tokens you rebuild it with.
Rendered layouts
Our own renders of the archetype, each wired to the palette, breakdown and template behind it.
Each is an installable shadcn/ui theme and a DESIGN.md for your agent.
npx shadcn@latest add https://csscreme.com/r/midnight-saas.json 7 free templates in this archetype, each installable as a theme too.
Real examples
Curated live sites doing this well, with an honest note on why each works.
Seen one in the wild?
Point the decoder at any live pricing and pull its real type scale, spacing rhythm, radii and shadows, plus an accessibility read — then copy the whole thing as a DESIGN.md. Or drop a screenshot into the extractor if you only need the colours.