d2-relay-pricing--x-ai-grok-4-7
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 | Grok 4.7 (xAI) x-ai/grok-4.7 |
|---|---|
| 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:17:18.856Z (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>
<style>
:root {
--bg: #f3efe7;
--ink: #1c1915;
--muted: #6d655c;
--line: #e2d9cc;
--card: #fffcf8;
--accent: #b5522a;
--accent-ink: #8c3d1c;
--shadow: 0 18px 40px rgba(48, 36, 22, 0.08);
--radius: 16px;
--max: 1040px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(900px 420px at 80% -10%, rgba(181, 82, 42, 0.08), transparent 60%),
var(--bg);
font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
}
a { color: inherit; }
.wrap {
width: min(var(--max), calc(100% - 32px));
margin: 0 auto;
}
header {
padding: 28px 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 650;
letter-spacing: -0.03em;
font-size: 1.05rem;
}
.mark {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--ink);
color: #f6f1ea;
display: grid;
place-items: center;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.85rem;
}
.nav-note {
color: var(--muted);
font-size: 0.875rem;
}
.hero {
padding: 36px 0 8px;
max-width: 640px;
}
h1 {
margin: 0 0 12px;
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.05;
letter-spacing: -0.045em;
font-weight: 650;
}
.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
max-width: 38rem;
}
.billing {
display: flex;
align-items: center;
gap: 12px;
margin: 28px 0 22px;
flex-wrap: wrap;
}
.toggle {
display: inline-flex;
padding: 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 252, 248, 0.7);
}
.toggle button {
appearance: none;
border: 0;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 0.9rem;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
}
.toggle button[aria-pressed="true"] {
background: var(--ink);
color: #f7f3ec;
}
.toggle button:focus-visible,
.cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.save {
font-size: 0.85rem;
color: var(--accent-ink);
background: rgba(181, 82, 42, 0.1);
border-radius: 999px;
padding: 4px 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
padding-bottom: 28px;
}
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 20px 20px;
display: flex;
flex-direction: column;
min-width: 0;
}
.card.featured {
border-color: #1c1915;
box-shadow: var(--shadow);
position: relative;
}
.badge {
position: absolute;
top: 14px;
right: 14px;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--ink);
color: #f6f1ea;
border-radius: 999px;
padding: 4px 8px;
}
.tier {
margin: 0;
font-size: 1.05rem;
letter-spacing: -0.02em;
}
.blurb {
margin: 6px 0 16px;
color: var(--muted);
font-size: 0.92rem;
min-height: 2.8em;
}
.price {
display: flex;
align-items: baseline;
gap: 6px;
margin: 0 0 4px;
}
.amount {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 2.35rem;
letter-spacing: -0.04em;
font-weight: 600;
}
.period {
color: var(--muted);
font-size: 0.9rem;
}
.billed {
margin: 0 0 18px;
color: var(--muted);
font-size: 0.82rem;
min-height: 1.2em;
}
ul {
list-style: none;
margin: 0 0 20px;
padding: 0;
flex: 1;
}
li {
position: relative;
padding: 7px 0 7px 22px;
border-top: 1px solid #f0e9df;
font-size: 0.94rem;
}
li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #d7cfc3;
}
.featured li::before { background: var(--accent); }
.cta {
display: block;
text-align: center;
text-decoration: none;
border-radius: 10px;
padding: 11px 14px;
font-weight: 600;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
}
.featured .cta {
background: var(--ink);
color: #f7f3ec;
}
.cta:hover { opacity: 0.88; }
.note {
border-top: 1px solid var(--line);
padding: 22px 0 48px;
color: var(--muted);
font-size: 0.92rem;
display: grid;
gap: 8px;
}
.note strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
.grid { grid-template-columns: 1fr; }
.blurb { min-height: 0; }
.badge { position: static; display: inline-block; margin-bottom: 10px; }
header { padding-top: 20px; }
.hero { padding-top: 22px; }
}
@media (max-width: 360px) {
.wrap { width: calc(100% - 24px); }
.amount { font-size: 2rem; }
.toggle button { padding: 8px 10px; }
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="brand"><span class="mark" aria-hidden="true">R</span> Relay</div>
<div class="nav-note">Background jobs for developers</div>
</header>
<section class="hero">
<h1>Pricing that stays out of the queue.</h1>
<p class="lede">Relay runs retries, schedules, and worker pools so your app can return a response and move on. Pick a tier by concurrency, not by seat theater.</p>
</section>
<div class="billing">
<div class="toggle" role="group" aria-label="Billing period">
<button type="button" id="monthly" aria-pressed="true">Monthly</button>
<button type="button" id="annual" aria-pressed="false">Annual</button>
</div>
<span class="save">2 months free on annual</span>
</div>
<div class="grid">
<article class="card">
<h2 class="tier">Solo</h2>
<p class="blurb">Side projects and the first production queue.</p>
<p class="price"><span class="amount" data-monthly="19" data-annual="15">$19</span><span class="period">/mo</span></p>
<p class="billed" data-note="monthly">Billed monthly. Cancel anytime.</p>
<ul>
<li>2 concurrent workers</li>
<li>50,000 job runs / month</li>
<li>Retries, delays, and cron</li>
<li>7-day job history</li>
<li>Email support</li>
</ul>
<a class="cta" href="#solo">Start Solo</a>
</article>
<article class="card featured">
<span class="badge">Recommended</span>
<h2 class="tier">Team</h2>
<p class="blurb">Shared queues for a product team that ships weekly.</p>
<p class="price"><span class="amount" data-monthly="49" data-annual="39">$49</span><span class="period">/mo</span></p>
<p class="billed" data-note="monthly">Billed monthly. Cancel anytime.</p>
<ul>
<li>10 concurrent workers</li>
<li>500,000 job runs / month</li>
<li>Priority lanes and dead-letter queues</li>
<li>30-day history and export</li>
<li>Shared dashboards for 10 people</li>
<li>Chat support on business days</li>
</ul>
<a class="cta" href="#team">Choose Team</a>
</article>
<article class="card">
<h2 class="tier">Business</h2>
<p class="blurb">Isolation, retention, and a named on-call path.</p>
<p class="price"><span class="amount" data-monthly="149" data-annual="119">$149</span><span class="period">/mo</span></p>
<p class="billed" data-note="monthly">Billed monthly. Cancel anytime.</p>
<ul>
<li>40 concurrent workers</li>
<li>3 million job runs / month</li>
<li>Dedicated queue isolation</li>
<li>1-year retention and audit log</li>
<li>SSO and role controls</li>
<li>99.9% uptime target, 4-hour response</li>
</ul>
<a class="cta" href="#business">Talk to Relay</a>
</article>
</div>
<footer class="note">
<div><strong>Overages.</strong> Extra runs are $2 per 10,000 on Solo, $1.20 on Team, and $0.80 on Business. Workers can be added without changing tier.</div>
<div><strong>What you are buying.</strong> A hosted scheduler, retry policy, and worker runtime. Your job code stays in your repo; Relay only receives the payload you enqueue.</div>
</footer>
</div>
<script>
(function () {
var monthly = document.getElementById("monthly");
var annual = document.getElementById("annual");
var amounts = document.querySelectorAll(".amount");
var notes = document.querySelectorAll("[data-note]");
function setPeriod(period) {
var isAnnual = period === "annual";
monthly.setAttribute("aria-pressed", String(!isAnnual));
annual.setAttribute("aria-pressed", String(isAnnual));
amounts.forEach(function (el) {
var value = isAnnual ? el.getAttribute("data-annual") : el.getAttribute("data-monthly");
el.textContent = "$" + value;
});
notes.forEach(function (el) {
el.textContent = isAnnual
? "Billed annually. Same features, two months free."
: "Billed monthly. Cancel anytime.";
});
}
monthly.addEventListener("click", function () { setPeriod("monthly"); });
annual.addEventListener("click", function () { setPeriod("annual"); });
})();
</script>
</body>
</html>
Explanation
Relay is framed as quiet infrastructure, not a marketing splash: warm paper background, charcoal type, and one burnt-orange accent so the page stays legible without webfonts or decoration. Team is the highlighted recommendation—the point where shared queues and real concurrency start to matter—marked with a badge, a stronger border, and a filled button rather than color alone. Solo stays light and approachable; Business lists operational controls without competing for attention. Cards sit in a three-column grid that collapses to a single column under 760px, with side padding and wrapping controls so the layout holds at 360px. The only script is a monthly/annual toggle that updates prices in place and keeps the selected period exposed to assistive tech.
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.