d2-relay-pricing--anthropic-claude-fable-5-1
Build a single-file HTML pricing page for 'Relay', a fictional developer tool for running background jobs. Three tiers (Solo, Team, Business) with prices, feature lists, and one highlighted recommendation. Self-contained .html file (inline CSS/JS, no external dependencies, no build step). Restrained, legible design; responsive down to 360px. Deliver the complete file with no placeholders. Accompany the code with a brief explanation of your design choices.
| Model | Claude Fable 5.1 (Anthropic) anthropic/claude-fable-5.1 |
|---|---|
| Task | d2-relay-pricing · web-app · javascript · tests out of scope |
| Harness | openrouter-chat-completions openrouter-chat-2026-09-22 at temperature 0.3 |
| Generated | 2026-09-22T14:16:27.000Z (generated) |
| License | MIT · demo-eligible |
| Contamination | Not previously public · No viral exposure recorded |
Prompt
Build a single-file HTML pricing page for 'Relay', a fictional developer tool for running background jobs. Three tiers (Solo, Team, Business) with prices, feature lists, and one highlighted recommendation. Self-contained .html file (inline CSS/JS, no external dependencies, no build step). Restrained, legible design; responsive down to 360px. Deliver the complete file with no placeholders. Accompany the code with a brief explanation of your design choices. ## Output contract First, write a brief explanation of your design choices — plain prose, no code fences. Then emit exactly one fenced code block per file, and no other text between or after the blocks: - The FIRST line of every block is that file's marker line: - TypeScript or JavaScript: `// FILE: <path>` - Python: `# FILE: <path>` - A single-file web app is one file named `index.html`, so its marker line is `// FILE: index.html`. - Everything after the marker line is that file complete, from its first line to its last — no diffs, no omissions, no placeholders. - Tag each fence with the file's language, for example ```html, ```typescript, ```python.
Artifact
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relay — Pricing</title>
<meta name="description" content="Simple, predictable pricing for Relay, the background job runner for developers.">
<style>
:root {
--bg: #fafafa;
--surface: #ffffff;
--text: #1a1a1a;
--muted: #5c5f66;
--border: #e3e4e8;
--border-strong: #c9cbd2;
--accent: #4f5bd5;
--accent-hover: #4049b8;
--accent-soft: #eef0fb;
--check: #2f8f5b;
--radius: 10px;
--max: 1080px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121317;
--surface: #1a1c22;
--text: #ececef;
--muted: #9a9ca6;
--border: #2a2d36;
--border-strong: #3a3e4a;
--accent: #7d87ea;
--accent-hover: #929be9;
--accent-soft: #23263a;
--check: #5cbf88;
}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.5;
color: var(--text);
background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 24px;
}
/* Header */
header {
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
gap: 16px;
}
.logo {
font-family: var(--mono);
font-weight: 600;
font-size: 17px;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: -0.01em;
}
.logo:hover { text-decoration: none; }
.logo-mark {
width: 20px; height: 20px;
border-radius: 5px;
background: var(--accent);
position: relative;
flex: none;
}
.logo-mark::after {
content: "";
position: absolute;
left: 5px; top: 9px;
width: 10px; height: 2px;
background: #fff;
border-radius: 1px;
box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff;
}
.nav-links {
display: flex;
gap: 22px;
align-items: center;
font-size: 15px;
}
.nav-links a { color: var(--muted); }
.nav-links a[aria-current] { color: var(--text); font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-cta {
padding: 7px 14px;
border: 1px solid var(--border-strong);
border-radius: 7px;
color: var(--text) !important;
}
/* Hero */
.hero {
text-align: center;
padding: 64px 0 40px;
}
.hero h1 {
font-size: 40px;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 14px;
font-weight: 650;
}
.hero p {
margin: 0 auto;
max-width: 540px;
color: var(--muted);
font-size: 18px;
}
/* Toggle */
.toggle-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 32px;
flex-wrap: wrap;
}
.toggle {
display: inline-flex;
padding: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
}
.toggle button {
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--muted);
padding: 7px 16px;
border-radius: 999px;
cursor: pointer;
transition: background .15s, color .15s;
}
.toggle button[aria-pressed="true"] {
background: var(--text);
color: var(--bg);
}
.save-note {
font-size: 13px;
color: var(--check);
font-weight: 500;
}
/* Plans */
.plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 40px 0 64px;
align-items: stretch;
}
.plan {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 26px;
display: flex;
flex-direction: column;
position: relative;
}
.plan.recommended {
border: 2px solid var(--accent);
}
.badge {
position: absolute;
top: -12px;
left: 24px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
}
.plan h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}
.plan .audience {
margin: 6px 0 0;
color: var(--muted);
font-size: 14px;
min-height: 42px;
}
.price {
margin: 22px 0 4px;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.price .amount {
font-size: 40px;
font-weight: 650;
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.price .per {
color: var(--muted);
font-size: 15px;
}
.billing-note {
margin: 0 0 22px;
font-size: 13px;
color: var(--muted);
min-height: 20px;
}
.btn {
display: block;
width: 100%;
text-align: center;
font: inherit;
font-size: 15px;
font-weight: 500;
padding: 11px 16px;
border-radius: 8px;
border: 1px solid var(--border-strong);
background: transparent;
color: var(--text);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }
.btn.primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.features {
list-style: none;
margin: 26px 0 0;
padding: 26px 0 0;
border-top: 1px solid var(--border);
display: grid;
gap: 11px;
font-size: 15px;
}
.features li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.features svg {
flex: none;
width: 18px; height: 18px;
margin-top: 2px;
color: var(--check);
}
.features .mono {
font-family: var(--mono);
font-size: 14px;
}
.features-label {
font-size: 13px;
color: var(--muted);
margin: 0 0 -2px;
font-weight: 500;
}
/* Comparison table */
.section {
padding: 0 0 64px;
}
.section h2 {
font-size: 26px;
letter-spacing: -0.02em;
margin: 0 0 8px;
font-weight: 650;
}
.section > p {
color: var(--muted);
margin: 0 0 28px;
max-width: 600px;
}
.table-scroll {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 560px;
font-size: 15px;
}
th, td {
text-align: left;
padding: 13px 18px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
thead th {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
background: var(--bg);
}
thead th.rec { color: var(--accent); }
tbody tr:last-child td { border-bottom: 0; }
tbody th {
font-weight: 500;
color: var(--text);
width: 34%;
}
td { color: var(--muted); }
td.yes { color: var(--text); }
td .dash { color: var(--border-strong); }
td code {
font-family: var(--mono);
font-size: 13.5px;
color: var(--text);
}
/* FAQ */
.faq {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 40px;
}
.faq h3 {
font-size: 16px;
font-weight: 600;
margin: 0 0 6px;
}
.faq p {
margin: 0;
color: var(--muted);
font-size: 15px;
}
/* Footer */
footer {
border-top: 1px solid var(--border);
padding: 28px 0 40px;
font-size: 14px;
color: var(--muted);
}
footer .wrap {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--muted); }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Responsive */
@media (max-width: 860px) {
.plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.plan .audience { min-height: 0; }
.faq { grid-template-columns: 1fr; }
.nav-links a:not(.nav-cta) { display: none; }
}
@media (max-width: 420px) {
.wrap { padding: 0 16px; }
.hero { padding: 44px 0 28px; }
.hero h1 { font-size: 30px; }
.hero p { font-size: 16px; }
.plan { padding: 24px 20px; }
.price .amount { font-size: 36px; }
.section h2 { font-size: 22px; }
th, td { padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
</style>
</head>
<body>
<header>
<div class="wrap nav">
<a class="logo" href="#" aria-label="Relay home"><span class="logo-mark" aria-hidden="true"></span>relay</a>
<nav class="nav-links" aria-label="Primary">
<a href="#">Docs</a>
<a href="#">Changelog</a>
<a href="#" aria-current="page">Pricing</a>
<a class="nav-cta" href="#">Sign in</a>
</nav>
</div>
</header>
<main>
<section class="hero wrap">
<h1>Pricing that scales with your queue</h1>
<p>Run background jobs with retries, scheduling, and observability built in. Pay for what you enqueue — nothing else.</p>
<div class="toggle-wrap">
<div class="toggle" role="group" aria-label="Billing period">
<button type="button" id="bill-monthly" aria-pressed="true">Monthly</button>
<button type="button" id="bill-annual" aria-pressed="false">Annual</button>
</div>
<span class="save-note" id="save-note">Save 20% with annual billing</span>
</div>
</section>
<section class="plans wrap" aria-label="Plans">
<!-- Solo -->
<article class="plan" aria-labelledby="plan-solo">
<h2 id="plan-solo">Solo</h2>
<p class="audience">For side projects and single-developer apps.</p>
<div class="price">
<span class="amount" data-monthly="9" data-annual="7">$9</span>
<span class="per">/ month</span>
</div>
<p class="billing-note" data-monthly="Billed monthly." data-annual="Billed annually at $84.">Billed monthly.</p>
<a class="btn" href="#">Start with Solo</a>
<ul class="features">
<li><p class="features-label">Includes</p></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span><span class="mono">50k</span> job runs / month</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>1 project, 1 seat</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>3 concurrent workers</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Retries, delays, and cron schedules</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>7-day run history</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Community support</span></li>
</ul>
</article>
<!-- Team (recommended) -->
<article class="plan recommended" aria-labelledby="plan-team">
<span class="badge">Recommended</span>
<h2 id="plan-team">Team</h2>
<p class="audience">For production apps and small engineering teams.</p>
<div class="price">
<span class="amount" data-monthly="49" data-annual="39">$49</span>
<span class="per">/ month</span>
</div>
<p class="billing-note" data-monthly="Billed monthly." data-annual="Billed annually at $468.">Billed monthly.</p>
<a class="btn primary" href="#">Start 14-day free trial</a>
<ul class="features">
<li><p class="features-label">Everything in Solo, plus</p></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span><span class="mono">1M</span> job runs / month</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Unlimited projects, 5 seats included</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>25 concurrent workers</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Rate limiting and priority queues</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Slack and PagerDuty alerts</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>30-day run history</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Email support, 1 business day</span></li>
</ul>
</article>
<!-- Business -->
<article class="plan" aria-labelledby="plan-business">
<h2 id="plan-business">Business</h2>
<p class="audience">For high-volume workloads with compliance needs.</p>
<div class="price">
<span class="amount" data-monthly="199" data-annual="159">$199</span>
<span class="per">/ month</span>
</div>
<p class="billing-note" data-monthly="Billed monthly." data-annual="Billed annually at $1,908.">Billed monthly.</p>
<a class="btn" href="#">Talk to sales</a>
<ul class="features">
<li><p class="features-label">Everything in Team, plus</p></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span><span class="mono">10M</span> job runs / month</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Unlimited seats</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>200 concurrent workers</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>SSO / SAML and audit log</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>90-day run history</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>99.95% uptime SLA</span></li>
<li><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Dedicated support channel</span></li>
</ul>
</article>
</section>
<section class="section wrap" aria-labelledby="compare-heading">
<h2 id="compare-heading">Compare plans</h2>
<p>The details that don't fit on a card. Limits are soft — we'll email you before anything is throttled.</p>
<div class="table-scroll">
<table>
<thead>
<tr>
<th scope="col"><span class="sr-only">Feature</span></th>
<th scope="col">Solo</th>
<th scope="col" class="rec">Team</th>
<th scope="col">Business</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Job runs included</th>
<td class="yes"><code>50,000</code> / mo</td>
<td class="yes"><code>1,000,000</code> / mo</td>
<td class="yes"><code>10,000,000</code> / mo</td>
</tr>
<tr>
<th scope="row">Overage</th>
<td class="yes">$1.00 per 10k runs</td>
<td class="yes">$0.60 per 10k runs</td>
<td class="yes">$0.40 per 10k runs</td>
</tr>
<tr>
<th scope="row">Max job duration</th>
<td class="yes">5 minutes</td>
<td class="yes">30 minutes</td>
<td class="yes">4 hours</td>
</tr>
<tr>
<th scope="row">Max payload size</th>
<td class="yes"><code>256 KB</code></td>
<td class="yes"><code>1 MB</code></td>
<td class="yes"><code>4 MB</code></td>
</tr>
<tr>
<th scope="row">Concurrent workers</th>
<td class="yes">3</td>
<td class="yes">25</td>
<td class="yes">200</td>
</tr>
<tr>
<th scope="row">Run history retention</th>
<td class="yes">7 days</td>
<td class="yes">30 days</td>
<td class="yes">90 days</td>
</tr>
<tr>
<th scope="row">Regions</th>
<td class="yes">US East</td>
<td class="yes">US, EU</td>
<td class="yes">US, EU, AP + region pinning</td>
</tr>
<tr>
<th scope="row">Webhooks & REST API</th>
<td class="yes">Included</td>
<td class="yes">Included</td>
<td class="yes">Included</td>
</tr>
<tr>
<th scope="row">Alerting integrations</th>
<td><span class="dash">—</span></td>
<td class="yes">Slack, PagerDuty, email</td>
<td class="yes">Slack, PagerDuty, email, OpsGenie</td>
</tr>
<tr>
<th scope="row">SSO / SAML</th>
<td><span class="dash">—</span></td>
<td><span class="dash">—</span></td>
<td class="yes">Included</td>
</tr>
<tr>
<th scope="row">Uptime SLA</th>
<td><span class="dash">—</span></td>
<td class="yes">99.9%</td>
<td class="yes">99.95%, with credits</td>
</tr>
<tr>
<th scope="row">Support</th>
<td class="yes">Community forum</td>
<td class="yes">Email, 1 business day</td>
<td class="yes">Dedicated channel, 4-hour response</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="section wrap" aria-labelledby="faq-heading">
<h2 id="faq-heading">Common questions</h2>
<p>If yours isn't here, <a href="#">email us</a> — a human replies.</p>
<div class="faq">
<div>
<h3>What counts as a job run?</h3>
<p>One execution attempt of one job. A job that fails and retries twice counts as three runs. Scheduled jobs count each time they fire; enqueuing alone is free.</p>
</div>
<div>
<h3>What happens if I exceed my included runs?</h3>
<p>Nothing dramatic. Runs keep going and overage is billed at the rate above on your next invoice. You can set a hard monthly cap in settings if you'd rather jobs be paused instead.</p>
</div>
<div>
<h3>Can I switch plans later?</h3>
<p>Yes, at any time. Upgrades take effect immediately and are prorated. Downgrades apply at the start of your next billing cycle.</p>
</div>
<div>
<h3>Is there a free option?</h3>
<p>Every plan starts with a 14-day trial, no card required. Open-source projects can apply for a Team plan at no cost.</p>
</div>
<div>
<h3>Do you offer self-hosting?</h3>
<p>Business customers can run Relay workers in their own VPC with the control plane hosted by us. A fully self-hosted option is available on annual Business contracts.</p>
</div>
<div>
<h3>How do seats work?</h3>
<p>A seat is a person who can sign in to the dashboard. API keys and service accounts don't consume seats. Additional Team seats are $8 per month each.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<span>© 2024 Relay Systems, Inc. Prices in USD, excluding tax.</span>
<nav aria-label="Footer">
<a href="#">Status</a>
<a href="#">Security</a>
<a href="#">Terms</a>
<a href="#">Privacy</a>
</nav>
</div>
</footer>
<script>
(function () {
var monthlyBtn = document.getElementById('bill-monthly');
var annualBtn = document.getElementById('bill-annual');
var saveNote = document.getElementById('save-note');
var amounts = document.querySelectorAll('.price .amount');
var notes = document.querySelectorAll('.billing-note');
function setPeriod(period) {
var isAnnual = period === 'annual';
monthlyBtn.setAttribute('aria-pressed', String(!isAnnual));
annualBtn.setAttribute('aria-pressed', String(isAnnual));
for (var i = 0; i < amounts.length; i++) {
amounts[i].textContent = '$' + amounts[i].getAttribute(isAnnual ? 'data-annual' : 'data-monthly');
}
for (var j = 0; j < notes.length; j++) {
notes[j].textContent = notes[j].getAttribute(isAnnual ? 'data-annual' : 'data-monthly');
}
saveNote.textContent = isAnnual ? 'You\u2019re saving 20%' : 'Save 20% with annual billing';
try { localStorage.setItem('relay-billing', period); } catch (e) {}
}
monthlyBtn.addEventListener('click', function () { setPeriod('monthly'); });
annualBtn.addEventListener('click', function () { setPeriod('annual'); });
var saved = null;
try { saved = localStorage.getItem('relay-billing'); } catch (e) {}
if (saved === 'annual') setPeriod('annual');
})();
</script>
</body>
</html>
Explanation
Relay's pricing page is built around a single question a developer arrives with: "which one do I pick?" — so the layout does one thing clearly and gets out of the way. The three tiers sit in an equal-width grid with the same internal structure (name, one-line audience, price, primary action, then a feature list), so the eye can scan horizontally to compare. The Team tier is the recommendation: it gets a slightly stronger border, a small "Recommended" label, and the only filled button, which is enough emphasis without cartoonish scaling or gradients. Prices are the largest type on the page; a monthly/annual toggle is the only interactive element beyond links, implemented in a few lines of vanilla JS with `aria-pressed` and live-updated text. Typography uses the system font stack for legibility and zero network cost, with a monospace accent for the logo and per-unit figures to signal "developer tool." Color is a near-neutral palette with one accent (a muted indigo) used sparingly for the recommendation, links, and focus rings; a `prefers-color-scheme: dark` variant is provided via CSS custom properties since developer audiences skew dark-mode. The grid collapses to a single column below ~760px and the type scale tightens below 420px, so everything remains readable and tappable at 360px. A short comparison table covers the "fine print" that doesn't belong in the cards, and a compact FAQ answers the two or three questions people actually have about metering and overages.
Judge detail
No raw judge output is published for this item yet. When it is, it lands under results/raw/ and appears here verbatim; the rubric and protocol are already documented on the Methodology page.