d2-relay-pricing--google-gemini-3-8-flash
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 | Gemini 3.8 Flash (Google) google/gemini-3.8-flash |
|---|---|
| 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:18:25.672Z (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.0">
<title>Relay — Pricing</title>
<style>
:root {
--bg: #090b10;
--bg-card: #11141c;
--bg-card-highlight: #141824;
--border: #1f2533;
--border-highlight: #4338ca;
--border-highlight-glow: rgba(99, 102, 241, 0.28);
--text: #f3f4f6;
--text-muted: #94a3b8;
--text-dim: #64748b;
--accent: #6366f1;
--accent-hover: #4f46e5;
--accent-soft: rgba(99, 102, 241, 0.12);
--accent-text: #818cf8;
--success: #10b981;
--badge-bg: rgba(99, 102, 241, 0.15);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding-bottom: 5rem;
}
/* Container */
.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 1.25rem;
}
/* Navigation */
header {
border-bottom: 1px solid var(--border);
background-color: rgba(9, 11, 16, 0.85);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 20;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.logo {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: var(--text);
font-weight: 700;
font-size: 1.1rem;
letter-spacing: -0.02em;
}
.logo-mark {
width: 26px;
height: 26px;
background: linear-gradient(135deg, var(--accent), #a855f7);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
color: #fff;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.nav-link {
color: var(--text-muted);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.15s ease;
}
.nav-link:hover {
color: var(--text);
}
.nav-cta {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.9rem;
border-radius: var(--radius-sm);
background: var(--border);
color: var(--text);
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
transition: background 0.15s ease;
}
.nav-cta:hover {
background: #2a3142;
}
/* Hero */
.hero {
text-align: center;
padding: 4.5rem 0 2.5rem;
}
.badge-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
background: var(--badge-bg);
border: 1px solid rgba(99, 102, 241, 0.25);
color: var(--accent-text);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 1rem;
color: #ffffff;
}
.hero p {
max-width: 580px;
margin: 0 auto;
color: var(--text-muted);
font-size: 1.05rem;
}
/* Billing Toggle */
.billing-toggle-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 2rem;
margin-bottom: 3.5rem;
}
.toggle-label {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 500;
cursor: pointer;
user-select: none;
}
.toggle-label.active {
color: var(--text);
}
.switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--border);
border-radius: 9999px;
transition: background-color 0.2s ease;
border: 1px solid #2f374a;
}
.slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #ffffff;
border-radius: 50%;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch input:checked + .slider {
background-color: var(--accent);
border-color: var(--accent-hover);
}
.switch input:checked + .slider::before {
transform: translateX(20px);
}
.switch input:focus-visible + .slider {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.discount-badge {
background: rgba(16, 185, 129, 0.12);
color: #34d399;
font-size: 0.75rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
border: 1px solid rgba(16, 185, 129, 0.3);
}
/* Pricing Grid */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: stretch;
margin-bottom: 4rem;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
border-color: #2e374b;
}
.card.highlighted {
background: var(--bg-card-highlight);
border-color: var(--border-highlight);
box-shadow: 0 0 32px var(--border-highlight-glow);
}
.popular-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2rem 0.75rem;
border-radius: 9999px;
white-space: nowrap;
}
.card-header {
margin-bottom: 1.5rem;
}
.tier-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 0.35rem;
}
.tier-desc {
font-size: 0.875rem;
color: var(--text-muted);
min-height: 2.6rem;
}
.price-wrap {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin: 1.25rem 0 0.5rem;
}
.currency {
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
}
.amount {
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: #ffffff;
font-variant-numeric: tabular-nums;
}
.period {
font-size: 0.875rem;
color: var(--text-muted);
}
.billing-note {
font-size: 0.75rem;
color: var(--text-dim);
font-family: var(--font-mono);
min-height: 1.2rem;
}
.btn {
display: block;
width: 100%;
padding: 0.75rem 1rem;
text-align: center;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.15s ease;
margin: 1.5rem 0 1.75rem;
}
.btn-secondary {
background: #181c28;
border-color: var(--border);
color: var(--text);
}
.btn-secondary:hover {
background: #202636;
border-color: #313a4f;
}
.btn-primary {
background: var(--accent);
color: #ffffff;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.btn-primary:hover {
background: var(--accent-hover);
}
.divider {
height: 1px;
background: var(--border);
margin-bottom: 1.5rem;
}
.feature-group-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-bottom: 0.85rem;
}
.feature-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex-grow: 1;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
font-size: 0.86rem;
color: var(--text-muted);
}
.feature-item strong {
color: var(--text);
font-weight: 600;
}
.check-icon {
flex-shrink: 0;
width: 17px;
height: 17px;
margin-top: 2px;
color: var(--success);
}
/* Enterprise / Callout Banner */
.enterprise-banner {
background: linear-gradient(180deg, #12151e 0%, #0d1017 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 4rem;
}
.enterprise-content h3 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.enterprise-content p {
font-size: 0.875rem;
color: var(--text-muted);
max-width: 650px;
}
.btn-outline {
display: inline-block;
white-space: nowrap;
padding: 0.65rem 1.25rem;
background: transparent;
border: 1px solid #333c52;
border-radius: var(--radius-sm);
color: var(--text);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-outline:hover {
background: #181c26;
border-color: #4b556f;
}
/* FAQ Section */
.faq-section {
max-width: 760px;
margin: 0 auto;
}
.faq-title {
font-size: 1.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
details {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.15s ease;
}
details[open] {
border-color: #2d3548;
}
summary {
padding: 1.1rem 1.25rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary .chevron {
width: 16px;
height: 16px;
color: var(--text-dim);
transition: transform 0.2s ease;
}
details[open] summary .chevron {
transform: rotate(180deg);
color: var(--text);
}
.faq-body {
padding: 0 1.25rem 1.25rem;
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
}
/* Responsive adjustments */
@media (max-width: 900px) {
.pricing-grid {
grid-template-columns: 1fr;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.card.highlighted {
order: -1;
}
.enterprise-banner {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 640px) {
.hero {
padding-top: 3rem;
}
.hero p {
font-size: 0.95rem;
}
.nav-links .nav-link {
display: none;
}
.card {
padding: 1.5rem 1.25rem;
}
.enterprise-banner {
padding: 1.5rem 1.25rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<header>
<div class="container">
<div class="nav-inner">
<a href="#" class="logo" aria-label="Relay Home">
<div class="logo-mark">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
Relay
</a>
<nav class="nav-links">
<a href="#features" class="nav-link">Features</a>
<a href="#faq" class="nav-link">FAQ</a>
<a href="#docs" class="nav-link">Documentation</a>
<a href="#login" class="nav-cta">Sign in</a>
</nav>
</div>
</div>
</header>
<main class="container">
<!-- Hero Section -->
<section class="hero">
<div class="badge-pill">
<span>Transparent Developer Pricing</span>
</div>
<h1>Workflows that run reliably at any scale</h1>
<p>Schedule crons, queue background tasks, and execute multi-step distributed sagas with sub-millisecond dispatch.</p>
<!-- Toggle -->
<div class="billing-toggle-wrap">
<span class="toggle-label active" id="monthly-label">Monthly</span>
<label class="switch" aria-label="Billing frequency toggle">
<input type="checkbox" id="billing-checkbox" aria-labelledby="monthly-label annual-label">
<span class="slider"></span>
</label>
<span class="toggle-label" id="annual-label">Annual</span>
<span class="discount-badge">Save 20%</span>
</div>
</section>
<!-- Pricing Cards Grid -->
<section class="pricing-grid" aria-label="Pricing plans">
<!-- Tier 1: Solo -->
<article class="card">
<div class="card-header">
<h2 class="tier-title">Solo</h2>
<p class="tier-desc">For indie hackers, hobbyists, and lightweight production microservices.</p>
<div class="price-wrap">
<span class="currency">$</span>
<span class="amount" data-monthly="19" data-annual="15">19</span>
<span class="period">/ month</span>
</div>
<div class="billing-note" data-monthly="Billed monthly" data-annual="Billed $180 annually">Billed monthly</div>
</div>
<a href="#start-solo" class="btn btn-secondary">Get started</a>
<div class="divider"></div>
<div class="feature-group-label">Includes</div>
<ul class="feature-list">
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>500,000</strong> executions / mo</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>5</strong> concurrent workers</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>3-day</strong> event & log retention</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Automatic retries with backoff</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Community Discord support</span>
</li>
</ul>
</article>
<!-- Tier 2: Team (Recommended) -->
<article class="card highlighted">
<span class="popular-tag">Recommended</span>
<div class="card-header">
<h2 class="tier-title">Team</h2>
<p class="tier-desc">Engineered for fast-shipping software companies running mission-critical workloads.</p>
<div class="price-wrap">
<span class="currency">$</span>
<span class="amount" data-monthly="79" data-annual="64">79</span>
<span class="period">/ month</span>
</div>
<div class="billing-note" data-monthly="Billed monthly" data-annual="Billed $768 annually">Billed monthly</div>
</div>
<a href="#start-team" class="btn btn-primary">Start 14-day free trial</a>
<div class="divider"></div>
<div class="feature-group-label">Everything in Solo, plus</div>
<ul class="feature-list">
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>5,000,000</strong> executions / mo</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>50</strong> concurrent workers</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>30-day</strong> audit log & trace retention</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>One-click replay & debug console</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Preview & branch environments</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Priority email & shared Slack support</span>
</li>
</ul>
</article>
<!-- Tier 3: Business -->
<article class="card">
<div class="card-header">
<h2 class="tier-title">Business</h2>
<p class="tier-desc">For organizations needing high throughput, strict security guarantees, and SLAs.</p>
<div class="price-wrap">
<span class="currency">$</span>
<span class="amount" data-monthly="299" data-annual="249">299</span>
<span class="period">/ month</span>
</div>
<div class="billing-note" data-monthly="Billed monthly" data-annual="Billed $2,988 annually">Billed monthly</div>
</div>
<a href="#start-business" class="btn btn-secondary">Upgrade to Business</a>
<div class="divider"></div>
<div class="feature-group-label">Everything in Team, plus</div>
<ul class="feature-list">
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>25,000,000</strong> executions / mo</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>Unlimited</strong> concurrency headroom</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span><strong>90-day</strong> retention + cold S3 export</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>SAML SSO, RBAC & custom scopes</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>99.99% uptime guarantee SLA</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>SOC2 Type II & HIPAA BAA ready</span>
</li>
</ul>
</article>
</section>
<!-- Enterprise Banner -->
<section class="enterprise-banner">
<div class="enterprise-content">
<h3>Self-hosted or dedicated private clusters?</h3>
<p>Deploy Relay in your own AWS, GCP, or Azure VPC with Bring-Your-Own-Database isolation, custom data residency, and 24/7 pager duty support.</p>
</div>
<a href="#contact" class="btn-outline">Talk to an Architect</a>
</section>
<!-- FAQ -->
<section class="faq-section" id="faq">
<h2 class="faq-title">Frequently asked questions</h2>
<div class="faq-list">
<details>
<summary>
<span>What counts as an execution?</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</summary>
<div class="faq-body">
An execution is recorded each time a scheduled job, background task, or workflow step is dispatched to your workers. Automatic retries triggered due to unhandled exceptions count as additional attempts, but scheduling delays or idling queues do not consume quota.
</div>
</details>
<details>
<summary>
<span>What happens if my usage exceeds tier limits?</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</summary>
<div class="faq-body">
We never drop your jobs or throttle worker traffic without warning. If you exceed your monthly execution limit, additional jobs are billed at a predictable flat rate ($1.50 per 100,000 executions). You can configure hard threshold alerts inside your workspace settings.
</div>
</details>
<details>
<summary>
<span>Do my job payloads travel through Relay servers?</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</summary>
<div class="faq-body">
Relay operates as a lightweight control plane and scheduler. You can configure payload end-to-end encryption via our SDKs, meaning Relay only manages execution state tokens and scheduling timestamps while sensitive payload data remains strictly inside your infrastructure.
</div>
</details>
<details>
<summary>
<span>Can I change plans or cancel at any time?</span>
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</summary>
<div class="faq-body">
Yes. Upgrades apply immediately with prorated billing. Downscaling or cancellation takes effect at the end of your current billing period, and all data can be exported via our REST API or CLI before account closure.
</div>
</details>
</div>
</section>
</main>
<script>
(function () {
const toggle = document.getElementById('billing-checkbox');
const monthlyLabel = document.getElementById('monthly-label');
const annualLabel = document.getElementById('annual-label');
const amounts = document.querySelectorAll('.amount');
const notes = document.querySelectorAll('.billing-note');
function updatePricing() {
const isAnnual = toggle.checked;
monthlyLabel.classList.toggle('active', !isAnnual);
annualLabel.classList.toggle('active', isAnnual);
amounts.forEach(el => {
const val = isAnnual ? el.getAttribute('data-annual') : el.getAttribute('data-monthly');
if (val) el.textContent = val;
});
notes.forEach(el => {
const note = isAnnual ? el.getAttribute('data-annual') : el.getAttribute('data-monthly');
if (note) el.textContent = note;
});
}
toggle.addEventListener('change', updatePricing);
monthlyLabel.addEventListener('click', () => {
if (toggle.checked) {
toggle.checked = false;
updatePricing();
}
});
annualLabel.addEventListener('click', () => {
if (!toggle.checked) {
toggle.checked = true;
updatePricing();
}
});
})();
</script>
</body>
</html>
Explanation
Relay is positioned as an infrastructure developer tool for distributed background jobs and workflows, so the visual identity balances technical restraint with high visual hierarchy. The design uses a dark slate palette inspired by modern developer ecosystems, pairing a clean system sans-serif font for copy with a monospaced font for machine metrics and limits (such as concurrency caps and execution counts). Key design decisions: - **Visual hierarchy & highlighting**: The Team tier is visually elevated using an indigo border, subtle ambient back-glow, and a dedicated "Recommended" badge, contrasting with the subdued dark slate surfaces of the Solo and Business tiers. - **Interactive billing switch**: An accessible annual/monthly billing toggle recalculates pricing dynamically with a 20% discount highlight, reinforcing cost savings without layout shift. - **Scannable feature architecture**: Each tier's features lead with the primary constraints developers care about most (monthly executions, retention window, and concurrency limits) followed by platform capabilities, marked with clean inline vector checkmarks. - **Native responsive layout**: Built using a modern CSS Grid layout that gracefully reflows from a three-column desktop matrix to a single-column layout on mobile viewports down to 360px width, utilizing compact touch targets and fluid type scaling. - **Self-contained components**: All icons are embedded SVGs, and interactive FAQ sections use semantic HTML `<details>` and `<summary>` elements to guarantee zero external runtime dependencies and smooth, accessible expansion behavior.
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.