Below is a pricing page for a fictional build-cache / CI product called Forge. A few of the trade-offs I made, since they're not obvious from the markup:
- **Palette is burnt sienna on warm paper**, not the default indigo→violet. Developer-tool pricing pages almost universally go cold-blue; the warm cream + oxblood accent reads as "rate card pinned to a wall" rather than "SaaS landing page", which fits a product whose audience reads spec sheets.
- **Three type families, all system**: a serif (Georgia / `ui-serif`) for headline, prices, and positioning lines; `system-ui` for body and CTAs; `ui-monospace` for the plan tags, technical sub-labels, and version stamp. The serif price at 64px next to a mono "linux/arm64 · 8 vCPU · 16 GB" sub-label is the whole visual idea — money and machine spec, side by side.
- **Pro is emphasised without a badge**: a tinted panel, a 2px accent rule across the top, one degree of size on the price, an italic marginal note ("— what most people pick") in the accent color, and the only solid CTA on the page. No "MOST POPULAR" pill, no scale transform, no shadow.
- **Feature markers are a 10px accent dash**, not green checkmarks. Reads more like a printed invoice than a marketing comparison.
- **Footnotes section is half the page weight**, because real developer pricing pages live or die by overage definitions, seat accounting, and refund policy — and the absence of those is the loudest AI tell on a pricing page.
- **No hover scale, no fade-in stagger, no count-up.** The only motion is a 150ms color shift on CTA hover, and it's killed under `prefers-reduced-motion`.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forge — Pricing</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #efe9dc;
--bg-deep: #e6dcc6;
--ink: #18160f;
--ink-soft: #5d5546;
--ink-faint: #8a8170;
--rule: rgba(24, 22, 15, 0.13);
--accent: #9c3f1d;
--accent-soft: #b85537;
}
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--ink);
font-family: ui-serif, Georgia, "Times New Roman", Cambria, serif;
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
/* Top bar */
.top { border-bottom: 1px solid var(--rule); }
.top-inner {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 18px 32px;
max-width: 1180px;
margin: 0 auto;
flex-wrap: wrap;
gap: 12px;
}
.wordmark {
font-family: ui-serif, Georgia, serif;
font-size: 22px;
font-style: italic;
letter-spacing: -0.01em;
}
.wordmark::after {
content: "·";
margin-left: 4px;
color: var(--accent);
}
.top nav { display: flex; gap: 26px; align-items: baseline; }
.top nav a {
color: var(--ink-soft);
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 14px;
}
.top nav a:hover { color: var(--ink); }
.top nav a.current {
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 1px;
}
/* Intro */
.intro { padding: 80px 0 56px; }
.intro-inner {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 56px;
align-items: end;
}
.intro .label {
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 24px;
}
.intro h1 {
font-family: ui-serif, Georgia, serif;
font-weight: 400;
font-size: clamp(34px, 4.8vw, 60px);
line-height: 1.04;
letter-spacing: -0.022em;
max-width: 18ch;
}
.intro h1 em {
font-style: italic;
color: var(--accent);
}
.intro aside {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 15px;
color: var(--ink-soft);
max-width: 38ch;
padding-bottom: 10px;
line-height: 1.5;
}
.intro aside p + p { margin-top: 14px; }
.intro aside strong { color: var(--ink); font-weight: 600; }
/* Tiers */
.tiers { border-top: 1px solid var(--rule); padding: 0 0 88px; }
.tier-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.tier {
padding: 44px 32px 40px;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
position: relative;
}
.tier:last-child { border-right: none; }
.tier .tag {
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 10px;
}
.tier .tag .num { color: var(--accent); }
.tier .price {
font-family: ui-serif, Georgia, serif;
font-weight: 400;
font-size: 56px;
line-height: 1;
letter-spacing: -0.03em;
display: flex;
align-items: baseline;
gap: 3px;
}
.tier .price .currency {
font-size: 24px;
color: var(--ink-soft);
align-self: flex-start;
margin-top: 10px;
}
.tier .price .unit {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 13px;
color: var(--ink-soft);
margin-left: 8px;
font-weight: 400;
}
.tier .positioning {
font-family: ui-serif, Georgia, serif;
font-style: italic;
font-size: 17px;
color: var(--ink-soft);
margin-top: 20px;
max-width: 30ch;
line-height: 1.4;
}
.tier hr {
border: none;
border-top: 1px solid var(--rule);
margin: 28px 0 22px;
}
.tier ul {
list-style: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 14.5px;
color: var(--ink);
flex: 1;
}
.tier ul li {
padding: 10px 0 10px 20px;
position: relative;
line-height: 1.45;
border-bottom: 1px dotted var(--rule);
}
.tier ul li:last-child { border-bottom: none; }
.tier ul li::before {
content: "";
position: absolute;
left: 0;
top: 18px;
width: 10px;
height: 1px;
background: var(--accent);
}
.tier ul li b { font-weight: 600; }
.tier ul li .meta {
color: var(--ink-faint);
font-size: 12px;
display: block;
margin-top: 3px;
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.01em;
}
.tier .cta {
margin-top: 28px;
display: inline-block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 14.5px;
text-decoration: none;
padding: 13px 20px;
border: 1px solid var(--ink);
color: var(--ink);
text-align: center;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
cursor: pointer;
}
.tier .cta:hover { background: var(--ink); color: var(--bg); }
.tier .cta.solid { background: var(--ink); color: var(--bg); }
.tier .cta.solid:hover { background: var(--accent); border-color: var(--accent); }
.tier .cta.text {
border: none;
padding: 14px 0;
text-align: left;
border-bottom: 1px solid var(--ink);
}
.tier .cta.text:hover {
color: var(--accent);
border-color: var(--accent);
background: transparent;
}
/* Pro emphasis — no badge, just structure */
.tier.pro {
background: var(--bg-deep);
border-top: 2px solid var(--accent);
padding-top: 42px;
}
.tier.pro .quiet-note {
font-family: ui-serif, Georgia, serif;
font-style: italic;
font-size: 13.5px;
color: var(--accent);
margin: -14px 0 24px;
}
.tier.pro .price { font-size: 64px; }
/* Footnotes */
.notes { border-top: 1px solid var(--rule); padding: 64px 0 88px; }
.notes-inner {
display: grid;
grid-template-columns: 4fr 7fr;
gap: 56px;
}
.notes h2 {
font-family: ui-serif, Georgia, serif;
font-weight: 400;
font-size: 28px;
letter-spacing: -0.012em;
line-height: 1.18;
}
.notes h2 small {
display: block;
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 14px;
font-style: normal;
font-weight: 400;
}
.notes dl {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 14.5px;
color: var(--ink);
}
.notes dt { font-weight: 600; margin-top: 22px; }
.notes dt:first-child { margin-top: 0; }
.notes dd {
color: var(--ink-soft);
margin-top: 6px;
line-height: 1.55;
max-width: 58ch;
}
.notes dd a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid var(--accent);
}
/* Footer */
footer { border-top: 1px solid var(--rule); }
.foot-inner {
padding: 26px 32px;
max-width: 1180px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 13px;
color: var(--ink-faint);
}
.foot-inner .sig {
font-family: ui-serif, Georgia, serif;
font-style: italic;
color: var(--ink-soft);
}
/* Mobile */
@media (max-width: 880px) {
.wrap { padding: 0 22px; }
.top-inner { padding: 16px 22px; }
.top nav { gap: 18px; }
.top nav a { font-size: 13px; }
.intro { padding: 52px 0 36px; }
.intro-inner {
grid-template-columns: 1fr;
gap: 28px;
align-items: start;
}
.intro aside { padding-bottom: 0; }
.tier-grid { grid-template-columns: 1fr; }
.tier {
border-right: none;
border-bottom: 1px solid var(--rule);
padding: 36px 22px;
}
.tier:last-child { border-bottom: none; }
.tier.pro {
padding: 38px 22px 36px;
border-top: 2px solid var(--accent);
}
.notes { padding: 48px 0 64px; }
.notes-inner {
grid-template-columns: 1fr;
gap: 24px;
}
.foot-inner { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
</style>
</head>
<body>
<header class="top">
<div class="top-inner">
<div class="wordmark">Forge</div>
<nav>
<a href="#">Docs</a>
<a href="#">Changelog</a>
<a href="#" class="current">Pricing</a>
<a href="#">Sign in</a>
</nav>
</div>
</header>
<section class="intro">
<div class="wrap intro-inner">
<div>
<div class="label">Pricing — v3.2, revised Oct 2024</div>
<h1>Three plans, sized for how teams <em>actually</em> grow into Forge.</h1>
</div>
<aside>
<p>Billed monthly. Cancel any time. Build minutes roll over for 30 days, then expire.</p>
<p><strong>No card required</strong> for Hobby. No sales call required for Pro. We’ll talk to you on Team if you want — but we won’t make you.</p>
</aside>
</div>
</section>
<section class="tiers">
<div class="wrap">
<div class="tier-grid">
<article class="tier">
<div class="tag"><span class="num">01</span> Hobby</div>
<div class="price"><span class="currency">$</span>0</div>
<p class="positioning">For side projects and the occasional weekend spike.</p>
<hr>
<ul>
<li><b>500 build minutes</b>/mo<span class="meta">linux/amd64 · 4 vCPU · 8 GB</span></li>
<li><b>2 GB cache</b> per project</li>
<li>Public projects only</li>
<li>Unlimited viewers, read-only</li>
<li>Support via GitHub issues</li>
</ul>
<a href="#" class="cta">Start with GitHub</a>
</article>
<article class="tier pro">
<div class="tag"><span class="num">02</span> Pro</div>
<div class="quiet-note">— what most people pick</div>
<div class="price"><span class="currency">$</span>20<span class="unit">/mo</span></div>
<p class="positioning">For the working developer who ships to production most days.</p>
<hr>
<ul>
<li><b>8,000 build minutes</b>/mo<span class="meta">linux/arm64 · 8 vCPU · 16 GB</span></li>
<li><b>50 GB cache</b> per project, deduplicated</li>
<li>Private projects, unlimited viewers</li>
<li>5 seats included, then $12/seat</li>
<li>Email support, 24h SLA</li>
<li>Cancel any time, prorated refund</li>
</ul>
<a href="#" class="cta solid">Start at $20/mo</a>
</article>
<article class="tier">
<div class="tag"><span class="num">03</span> Team</div>
<div class="price"><span class="currency">$</span>60<span class="unit">/seat · mo</span></div>
<p class="positioning">For teams that need audit trails, shared state, and someone to call.</p>
<hr>
<ul>
<li><b>Unlimited build minutes</b><span class="meta">fair use · we email at 10× your average</span></li>
<li><b>500 GB shared cache</b>, deduplicated across projects</li>
<li>SAML SSO, SCIM, role-based access</li>
<li>Audit log export, 90-day retention</li>
<li>Priority support, 4h SLA, dedicated Slack</li>
<li>SOC 2 Type II on request</li>
</ul>
<a href="#" class="cta text">Talk to us →</a>
</article>
</div>
</div>
</section>
<section class="notes">
<div class="wrap notes-inner">
<h2><small>Footnotes</small>Things worth knowing before you sign up.</h2>
<dl>
<dt>What counts as a seat?</dt>
<dd>A seat is a named human with write access to at least one private project. Bots, deploy keys, CI runners, and read-only viewers don’t count. If someone leaves, you can reassign their seat the same day from team settings.</dd>
<dt>Build-minute overages</dt>
<dd>$0.008 per minute past your plan’s allowance, billed in arrears on the 1st of the month. We email the billing owner at 80% and 100% of the monthly quota — we don’t surprise-bill.</dd>
<dt>Student & OSS discounts</dt>
<dd>100% off Pro for verified students and for maintainers of qualifying open-source projects (MIT, Apache-2.0, BSD, MPL, ISC). Email <a href="#">oss@forge.dev</a> with your repo URL and we’ll turn it around in a day.</dd>
<dt>Self-hosted?</dt>
<dd>The runner is open source (AGPL-3.0) and runs anywhere — your laptop, your k8s cluster, an air-gapped VPC. The control plane is hosted only. If you need fully air-gapped, that’s an Enterprise contract; <a href="#">write to us</a>.</dd>
<dt>Refunds</dt>
<dd>Within 14 days of your first paid charge, no questions. After that, prorated for unused time when you downgrade or close the account.</dd>
</dl>
</div>
</section>
<footer>
<div class="foot-inner">
<span>Forge Labs, Inc. · Build cache, CI runners, observability for software teams.</span>
<span class="sig">— written by Anna & the eng team, Oct ’24</span>
</div>
</footer>
</body>
</html>
```
A couple of specifics worth flagging in case you want to tune them:
- The Pro tier's price sits at 64px while the other two are 56px — one step of the modular scale, not two. Anything more and the column stops feeling like a sibling; anything less and the emphasis disappears against the background tint.
- The "— what most people pick" note is italic serif in the accent color rather than a labeled pill. If you ever need to A/B this against a real badge, the rest of the page is deliberately restrained so the badge would actually read as the louder variant.
- Build minutes and cache sizes are real-feeling numbers, not rounded marketing figures ("8,000" not "unlimited*", "50 GB" not "lots"). If you swap in your actual product, keep the specificity — it's doing more work than the visual design is.