Starter
For trying things out
$0/mo
- ✓ 1 project
- ✓ Community support
- ✓ Core features
Design breakdown · SaaS · Pricing
Anatomy of a SaaS pricing page
Not a list of opinions — a teardown. Here's every part of a high-converting pricing page, why it's there, why it works, and the exact tokens to rebuild it.
1 · Anatomy
The components, decoded.
01
Value headline
Why it exists Frames the page around outcome, not price.
Why it works A benefit-led H1 ("Plans that scale with you") sets the frame before any number, so cost reads as investment rather than expense.
02
Billing toggle
Why it exists Lets buyers self-select monthly vs annual.
Why it works Defaulting to annual with a "save 20%" cue anchors the lower effective price and nudges the higher-LTV choice.
03
Three tiers
Why it exists Gives a low, an obvious, and a high option.
Why it works Three is the sweet spot: the outer tiers exist to make the middle one feel right (the compromise effect).
04
The recommended tier
Why it exists Removes decision fatigue.
Why it works One visually elevated card — accent border, badge, slight scale — turns an open question into a default choice.
05
Feature lines
Why it exists Justifies the jump between tiers.
Why it works Short, scannable rows with checks; differences (not the full list) carry the weight. Density without clutter.
06
Per-tier CTA
Why it exists Every tier needs its own next step.
Why it works A repeated, high-contrast button per card means no scrolling back; the recommended tier gets the solid fill.
07
Trust layer
Why it exists Answers "is this safe?" at the decision point.
Why it works Logos, a one-line testimonial, and a money-back or "cancel anytime" note sit right under the cards to close doubt.
2 · Tokens
The design system this archetype runs on — pulled from the Midnight SaaS palette.
bg #0B1020
surface #1A2238
primary #4F7DF3
accent #9B6BFF
muted #8A93A6
text #E8EEF9
3 · Build kit
A live, palette-driven pricing section, then the code to recreate it.
Pro
For growing teams
$24/mo
- ✓ Unlimited projects
- ✓ Priority support
- ✓ Analytics & roles
Scale
For serious workloads
$79/mo
- ✓ SSO & audit logs
- ✓ SLA + onboarding
- ✓ Usage-based add-ons
CSS variables
:root {
--color-bg: #0B1020;
--color-surface: #1A2238;
--color-primary: #4F7DF3;
--color-accent: #9B6BFF;
--color-text: #E8EEF9;
--color-muted: #8A93A6;
}Pricing component
<div class="pricing">
<article class="tier">…</article>
<article class="tier tier--hot">…</article> <!-- recommended -->
<article class="tier">…</article>
</div>
<style>
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tier {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
border-radius: var(--radius);
padding: var(--space-6);
}
.tier--hot { /* the one choice you want them to make */
border-color: var(--color-accent);
box-shadow: 0 16px 40px color-mix(in srgb, var(--color-primary) 30%, transparent);
transform: translateY(-8px);
}
.tier .cta {
background: var(--color-primary);
color: #fff; border: 0; border-radius: var(--radius);
padding: 12px 18px; width: 100%; font-weight: 700;
}
</style>That's the whole machine: discover great pricing pages in the collection, decode the parts here, then build with the Midnight SaaS palette and a template. Same framework, any archetype — dashboards and landing heroes are next.