<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing — Relay</title>
<style>
:root{
--bg:#0a0c10;
--bg-soft:#0f1218;
--panel:#12161d;
--panel-2:#161b24;
--line:#232a35;
--line-soft:#1b212a;
--text:#e7ecf3;
--muted:#98a3b3;
--dim:#6d7889;
--accent:#7aa2ff;
--accent-2:#8be3d0;
--accent-ink:#0a0c10;
--radius:16px;
--maxw:1140px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
background-image:
radial-gradient(900px 500px at 50% -220px, rgba(122,162,255,.13), transparent 70%),
radial-gradient(700px 420px at 88% 8%, rgba(139,227,208,.06), transparent 70%);
background-repeat:no-repeat;
}
code,.mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,"Liberation Mono",monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* ---------- nav ---------- */
nav{
display:flex;align-items:center;justify-content:space-between;
padding:22px 0;border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em}
.mark{
width:22px;height:22px;border-radius:7px;
background:linear-gradient(140deg,var(--accent),var(--accent-2));
box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.navlinks{display:flex;gap:26px;font-size:14px;color:var(--muted)}
.navlinks a{color:inherit;text-decoration:none}
.navlinks a:hover{color:var(--text)}
@media (max-width:640px){ .navlinks{display:none} }
/* ---------- header ---------- */
header.hero{padding:72px 0 8px;text-align:center}
.eyebrow{
font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);font-weight:600;margin:0 0 14px;
}
h1{
font-size:clamp(34px,5.2vw,54px);line-height:1.05;letter-spacing:-.035em;
margin:0 0 16px;font-weight:680;
}
.lede{
max-width:560px;margin:0 auto;color:var(--muted);font-size:17px;
}
/* ---------- billing toggle ---------- */
.billing{
display:flex;justify-content:center;align-items:center;gap:14px;
margin:34px 0 8px;flex-wrap:wrap;
}
.switch{
display:inline-flex;padding:4px;gap:4px;
background:var(--panel);border:1px solid var(--line);border-radius:999px;
}
.switch button{
appearance:none;border:0;background:transparent;color:var(--muted);
font:inherit;font-size:14px;font-weight:550;
padding:8px 16px;border-radius:999px;cursor:pointer;
transition:background .18s ease,color .18s ease;
}
.switch button:hover{color:var(--text)}
.switch button[aria-pressed="true"]{background:var(--panel-2);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 2px rgba(0,0,0,.4)}
.switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.save{font-size:13px;color:var(--accent-2)}
/* ---------- grid ---------- */
.tiers{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
align-items:start;padding:44px 0 8px;
}
@media (max-width:900px){
.tiers{grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:18px}
}
.tier{
position:relative;
background:linear-gradient(180deg,var(--panel) 0%, #10141a 100%);
border:1px solid var(--line-soft);
border-radius:var(--radius);
padding:30px 26px 28px;
display:flex;flex-direction:column;
min-height:100%;
}
/* middle tier: quiet emphasis — elevation, lighter surface, hairline accent */
.tier.featured{
background:linear-gradient(180deg,#171d27 0%, #12161e 100%);
border-color:#2c3546;
box-shadow:
0 0 0 1px rgba(122,162,255,.16),
0 24px 60px -28px rgba(0,0,0,.9),
0 0 90px -40px rgba(122,162,255,.5);
padding-top:34px;padding-bottom:34px;
}
@media (min-width:901px){
.tier.featured{transform:translateY(-14px)}
}
.tier.featured::before{
content:"";position:absolute;left:22px;right:22px;top:-1px;height:1px;
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.85;
}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tier h2{
font-size:15px;font-weight:650;margin:0;letter-spacing:.02em;
}
.recommend{
font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent);font-weight:600;
}
.price{display:flex;align-items:baseline;gap:6px;margin:20px 0 4px;flex-wrap:wrap}
.amount{
font-size:44px;line-height:1;font-weight:660;letter-spacing:-.04em;
font-variant-numeric:tabular-nums;
transition:opacity .16s ease;
}
.amount.fade{opacity:.25}
.per{font-size:14px;color:var(--dim)}
.billed{font-size:13px;color:var(--dim);min-height:19px;margin:0 0 18px}
.pitch{
color:var(--muted);font-size:14.5px;margin:0 0 24px;
padding-bottom:22px;border-bottom:1px solid var(--line-soft);
}
.featured .pitch{border-bottom-color:#252d3a}
ul.features{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
ul.features li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#c9d2de}
ul.features li.off{color:var(--dim)}
.ico{flex:0 0 auto;margin-top:3px;width:15px;height:15px}
.ico path,.ico line{stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ico.check path{stroke:var(--accent-2)}
.featured .ico.check path{stroke:var(--accent)}
.ico.dash line{stroke:#4a5364}
.cap{font-size:12.5px;color:var(--dim);margin-left:4px}
.spacer{flex:1 1 auto}
.cta{
display:block;width:100%;text-align:center;text-decoration:none;
font:inherit;font-size:14.5px;font-weight:600;
padding:12px 18px;border-radius:10px;cursor:pointer;
border:1px solid var(--line);background:var(--panel-2);color:var(--text);
transition:background .18s ease,border-color .18s ease,transform .12s ease;
}
.cta:hover{background:#1d2430;border-color:#333d4d}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cta.primary{
background:linear-gradient(180deg,#9db9ff,#7aa2ff);
border-color:#9db9ff;color:var(--accent-ink);
}
.cta.primary:hover{background:linear-gradient(180deg,#b0c7ff,#8bb0ff)}
.subcta{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--dim)}
/* ---------- assurances ---------- */
.assure{
display:flex;gap:28px;justify-content:center;flex-wrap:wrap;
padding:46px 0 10px;color:var(--dim);font-size:13.5px;
}
.assure span{display:inline-flex;align-items:center;gap:8px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent-2);opacity:.8}
/* ---------- faq ---------- */
section.faq{padding:70px 0 90px;border-top:1px solid var(--line-soft);margin-top:60px}
section.faq h3{
font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);
font-weight:600;margin:0 0 30px;text-align:center;
}
.qs{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 44px;max-width:900px;margin:0 auto}
@media (max-width:760px){ .qs{grid-template-columns:1fr;gap:26px} }
.q h4{margin:0 0 7px;font-size:15px;font-weight:620;letter-spacing:-.01em}
.q p{margin:0;color:var(--muted);font-size:14.5px}
footer{border-top:1px solid var(--line-soft);padding:26px 0 46px;color:var(--dim);font-size:13px;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){
*{transition:none !important}
}
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand"><span class="mark" aria-hidden="true"></span> Relay</div>
<div class="navlinks">
<a href="#">Docs</a><a href="#">Changelog</a><a href="#">Pricing</a><a href="#">Sign in</a>
</div>
</nav>
</div>
<header class="hero wrap">
<p class="eyebrow">Pricing</p>
<h1>Ship preview environments<br>on every pull request.</h1>
<p class="lede">Start free on your side projects. Upgrade when your builds — or your teammates — start piling up.</p>
<div class="billing">
<div class="switch" role="group" aria-label="Billing period">
<button id="btn-monthly" type="button" aria-pressed="true">Monthly</button>
<button id="btn-yearly" type="button" aria-pressed="false">Yearly</button>
</div>
<span class="save" id="save-note" hidden>Two months free on yearly</span>
</div>
</header>
<main class="wrap">
<div class="tiers">
<!-- Hobby -->
<article class="tier">
<div class="tier-head"><h2>Hobby</h2></div>
<div class="price">
<span class="amount" data-m="$0" data-y="$0">$0</span>
<span class="per">forever</span>
</div>
<p class="billed" data-m="No card required" data-y="No card required">No card required</p>
<p class="pitch">For solo experiments, prototypes, and the weekend project you swear you'll finish.</p>
<ul class="features">
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>1 developer</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>500 build minutes<span class="cap">/mo</span></li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Unlimited public repositories</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>CLI, local dev server, and API</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>7-day log & artifact retention</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Community support</li>
<li class="off"><svg class="ico dash" viewBox="0 0 16 16" aria-hidden="true"><line x1="4" y1="8" x2="12" y2="8"/></svg>Private projects</li>
</ul>
<div class="spacer"></div>
<a class="cta" href="#">Start building</a>
<p class="subcta">Deploy in about two minutes</p>
</article>
<!-- Pro (emphasised) -->
<article class="tier featured" aria-labelledby="tier-pro">
<div class="tier-head">
<h2 id="tier-pro">Pro</h2>
<span class="recommend">Most teams start here</span>
</div>
<div class="price">
<span class="amount" data-m="$20" data-y="$16">$20</span>
<span class="per">/month</span>
</div>
<p class="billed" data-m="Billed monthly, cancel anytime" data-y="$192 billed yearly">Billed monthly, cancel anytime</p>
<p class="pitch">For the professional developer whose side project became a product with real users.</p>
<ul class="features">
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Everything in Hobby, plus:</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Unlimited private projects</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>10,000 build minutes<span class="cap">/mo</span></li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Preview environment per pull request</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Custom domains & edge caching</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>30-day logs, metrics, and traces</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Email support, next business day</li>
</ul>
<div class="spacer"></div>
<a class="cta primary" href="#">Start 14-day trial</a>
<p class="subcta">No card for the trial</p>
</article>
<!-- Team -->
<article class="tier">
<div class="tier-head"><h2>Team</h2></div>
<div class="price">
<span class="amount" data-m="$60" data-y="$48">$60</span>
<span class="per">/seat/month</span>
</div>
<p class="billed" data-m="Minimum 3 seats, prorated" data-y="$576 per seat, billed yearly">Minimum 3 seats, prorated</p>
<p class="pitch">For engineering teams that need shared infrastructure, access control, and an audit trail.</p>
<ul class="features">
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Everything in Pro, plus:</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Pooled build minutes across seats</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>SSO via SAML & SCIM provisioning</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Role-based access & audit log</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Shared secrets & environment groups</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>90-day retention with export</li>
<li><svg class="ico check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3.2L13 4.8"/></svg>Priority support, 4-hour response</li>
</ul>
<div class="spacer"></div>
<a class="cta" href="#">Create a team</a>
<p class="subcta">Or <a href="#" style="color:var(--muted)">talk to us</a> about enterprise</p>
</article>
</div>
<div class="assure">
<span><i class="dot"></i>Usage-based overage at $0.008/build minute</span>
<span><i class="dot"></i>Upgrade, downgrade, or cancel anytime</span>
<span><i class="dot"></i>Free for students and OSS maintainers</span>
</div>
<section class="faq">
<h3>Common questions</h3>
<div class="qs">
<div class="q">
<h4>What counts as a build minute?</h4>
<p>Wall-clock time your containers spend building or running a preview environment, rounded to the nearest second. Idle previews are suspended automatically and cost nothing.</p>
</div>
<div class="q">
<h4>What happens if I run out?</h4>
<p>On Hobby, builds queue until the next cycle. On Pro and Team, additional minutes bill at $0.008 each — and you can set a hard spend cap in your dashboard.</p>
</div>
<div class="q">
<h4>Who needs a Team seat?</h4>
<p>Anyone who can trigger a build or open a preview. Read-only reviewers, stakeholders, and CI bots are free and unlimited.</p>
</div>
<div class="q">
<h4>Can I self-host?</h4>
<p>Yes. Team plans include the self-hosted runner agent, so builds can execute inside your own VPC while the control plane stays managed.</p>
</div>
<div class="q">
<h4>Do you offer refunds?</h4>
<p>If Relay isn't a fit within 30 days of your first payment, email us and we'll refund it in full. No forms, no exit interview.</p>
</div>
<div class="q">
<h4>Is there a discount for annual billing?</h4>
<p>Yes — pay yearly and you get two months free on both Pro and Team. Switch at any time; we prorate the difference.</p>
</div>
</div>
</section>
</main>
<div class="wrap">
<footer>
<span>© 2025 Relay Labs, Inc.</span>
<span><a href="#">Status</a> · <a href="#">Security</a> · <a href="#">Terms</a> · <a href="#">Privacy</a></span>
</footer>
</div>
<script>
(function(){
var m = document.getElementById('btn-monthly');
var y = document.getElementById('btn-yearly');
var note = document.getElementById('save-note');
var amounts = document.querySelectorAll('.amount');
var billed = document.querySelectorAll('.billed');
function set(period){
var isY = period === 'y';
m.setAttribute('aria-pressed', String(!isY));
y.setAttribute('aria-pressed', String(isY));
note.hidden = !isY;
amounts.forEach(function(el){
el.classList.add('fade');
setTimeout(function(){
el.textContent = el.getAttribute(isY ? 'data-y' : 'data-m');
el.classList.remove('fade');
}, 130);
});
billed.forEach(function(el){
el.textContent = el.getAttribute(isY ? 'data-y' : 'data-m');
});
}
m.addEventListener('click', function(){ set('m'); });
y.addEventListener('click', function(){ set('y'); });
})();
</script>
</body>
</html>