<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing — Loopback</title>
<style>
:root{
--bg:#0a0c10;
--bg-2:#0e1116;
--surface:#111520;
--surface-2:#151a26;
--line:#212836;
--line-soft:#1a1f2b;
--text:#e8ecf4;
--muted:#98a1b3;
--dim:#6d7788;
--accent:#7aa2ff;
--accent-2:#b18cff;
--ok:#63d8a4;
--radius:16px;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--text);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
line-height:1.55;
min-height:100%;
}
/* soft ambient light behind the pricing grid */
body::before{
content:"";
position:fixed;
inset:-20% -10% auto -10%;
height:70vh;
background:
radial-gradient(60% 60% at 50% 0%, rgba(122,162,255,.14), transparent 70%),
radial-gradient(40% 50% at 78% 10%, rgba(177,140,255,.10), transparent 70%);
pointer-events:none;
z-index:0;
}
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px 96px}
/* ---------- header ---------- */
header.site{
display:flex;align-items:center;justify-content:space-between;
padding:26px 0 0;
}
.brand{
display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:15px;letter-spacing:-.01em;
}
.brand .mark{
width:24px;height:24px;border-radius:7px;
background:linear-gradient(140deg,var(--accent),var(--accent-2));
box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.brand b{font-weight:600}
nav.top{display:flex;gap:22px;font-size:14px}
nav.top a{color:var(--muted);text-decoration:none}
nav.top a:hover{color:var(--text)}
/* ---------- hero ---------- */
.hero{text-align:center;padding:72px 0 40px;max-width:660px;margin:0 auto}
.eyebrow{
font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--dim);margin:0 0 18px;
}
h1{
font-size:clamp(2rem,4.6vw,3.1rem);
line-height:1.08;letter-spacing:-.03em;margin:0 0 16px;font-weight:650;
}
.hero p{color:var(--muted);font-size:17px;margin:0 auto;max-width:520px}
/* ---------- billing toggle ---------- */
.billing{
display:flex;justify-content:center;margin:34px 0 8px;
}
.switch{
display:inline-flex;align-items:center;gap:2px;padding:4px;
background:var(--surface);border:1px solid var(--line);border-radius:999px;
}
.switch button{
appearance:none;border:0;background:transparent;color:var(--muted);
font:inherit;font-size:14px;padding:7px 16px;border-radius:999px;cursor:pointer;
transition:color .18s ease, background .18s ease;
}
.switch button:hover{color:var(--text)}
.switch button[aria-pressed="true"]{
background:var(--surface-2);color:var(--text);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 1px 3px rgba(0,0,0,.4);
}
.switch .save{
font-family:var(--mono);font-size:11px;color:var(--ok);margin-left:7px;
}
/* ---------- grid ---------- */
.tiers{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
align-items:start;
margin-top:44px;
}
.tier{
position:relative;
background:var(--surface);
border:1px solid var(--line-soft);
border-radius:var(--radius);
padding:30px 26px 28px;
display:flex;flex-direction:column;
min-height:100%;
}
/* featured tier: lifted, lighter surface, gradient hairline, soft glow */
.tier.featured{
background:linear-gradient(180deg,#171d2b 0%, var(--surface-2) 60%);
border-color:transparent;
padding:38px 28px 32px;
margin-top:-18px;
box-shadow:
0 0 0 1px rgba(122,162,255,.28),
0 24px 60px -24px rgba(94,124,255,.45),
0 2px 0 rgba(255,255,255,.04) inset;
}
.tier.featured::before{
content:"";position:absolute;inset:0;border-radius:var(--radius);
padding:1px;
background:linear-gradient(180deg, rgba(122,162,255,.75), rgba(177,140,255,.28) 45%, rgba(122,162,255,0) 85%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
pointer-events:none;
}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tier h2{
font-size:15px;font-weight:600;margin:0;letter-spacing:.01em;
}
.note{
font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--accent);opacity:.85;
}
.price{
display:flex;align-items:flex-start;gap:4px;margin:22px 0 2px;
font-variant-numeric:tabular-nums;
}
.price .amount{
font-size:46px;line-height:1;letter-spacing:-.035em;font-weight:640;
}
.price .cur{font-size:22px;line-height:1.2;font-weight:520;color:var(--muted);margin-top:4px}
.price .per{
align-self:flex-end;font-size:13.5px;color:var(--muted);padding-bottom:5px;margin-left:3px;
}
.sub{font-size:12.5px;color:var(--dim);min-height:19px;margin:6px 0 0;font-family:var(--mono)}
.pitch{
color:var(--muted);font-size:14.5px;margin:18px 0 0;
padding-bottom:24px;border-bottom:1px solid var(--line-soft);
}
.tier.featured .pitch{border-bottom-color:rgba(122,162,255,.18)}
ul.features{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:11px}
ul.features li{
display:grid;grid-template-columns:18px 1fr;gap:11px;
font-size:14.2px;color:#cdd4e1;align-items:start;
}
ul.features .tick{
width:18px;height:18px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:10.5px;line-height:1;margin-top:2px;
background:rgba(99,216,164,.10);color:var(--ok);
box-shadow:0 0 0 1px rgba(99,216,164,.22) inset;
}
.tier.featured ul.features .tick{
background:rgba(122,162,255,.12);color:#9dbaff;
box-shadow:0 0 0 1px rgba(122,162,255,.28) inset;
}
ul.features em{font-style:normal;color:var(--dim)}
.cta{
margin-top:auto;
display:block;width:100%;text-align:center;text-decoration:none;
font:inherit;font-size:14.5px;font-weight:550;
padding:12px 18px;border-radius:10px;
border:1px solid var(--line);color:var(--text);background:#161b26;
transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.cta:hover{background:#1c2231;border-color:#2c3546}
.cta:active{transform:translateY(1px)}
.cta.primary{
border-color:transparent;color:#0a0e18;
background:linear-gradient(180deg,#a9c2ff,#7aa2ff);
box-shadow:0 8px 22px -10px rgba(122,162,255,.85), 0 1px 0 rgba(255,255,255,.4) inset;
}
.cta.primary:hover{background:linear-gradient(180deg,#b8ccff,#8bafff)}
.cta-sub{
text-align:center;font-size:12px;color:var(--dim);margin:11px 0 0;
}
a:focus-visible, button:focus-visible{
outline:2px solid var(--accent);outline-offset:3px;border-radius:10px;
}
/* ---------- shared line ---------- */
.allplans{
margin-top:56px;padding:26px 28px;border:1px solid var(--line-soft);border-radius:var(--radius);
background:linear-gradient(180deg, rgba(255,255,255,.018), transparent);
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 28px;
}
.allplans h3{
grid-column:1/-1;margin:0 0 2px;font-size:12px;font-family:var(--mono);
letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:500;
}
.allplans div{font-size:14px;color:var(--muted)}
.allplans strong{display:block;color:var(--text);font-weight:550;font-size:14.2px;margin-bottom:2px}
/* ---------- faq ---------- */
.faq{margin-top:64px}
.faq h3{font-size:20px;letter-spacing:-.02em;margin:0 0 22px;font-weight:600}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.faq-grid h4{margin:0 0 6px;font-size:14.5px;font-weight:600}
.faq-grid p{margin:0;color:var(--muted);font-size:14px}
footer.site{
margin-top:72px;padding-top:24px;border-top:1px solid var(--line-soft);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
color:var(--dim);font-size:13px;
}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--text)}
/* ---------- responsive ---------- */
@media (max-width: 940px){
.tiers{grid-template-columns:1fr;gap:18px;max-width:520px;margin-left:auto;margin-right:auto}
.tier.featured{margin-top:0;padding:32px 26px 28px}
.faq-grid{grid-template-columns:1fr}
.hero{padding:54px 0 28px}
nav.top{display:none}
}
@media (prefers-reduced-motion: reduce){
*{transition:none !important}
}
</style>
</head>
<body>
<div class="wrap">
<header class="site">
<div class="brand"><span class="mark" aria-hidden="true"></span><span>loopback<b>.dev</b></span></div>
<nav class="top" aria-label="Primary">
<a href="#">Docs</a>
<a href="#">Changelog</a>
<a href="#">Sign in</a>
</nav>
</header>
<section class="hero">
<p class="eyebrow">Pricing</p>
<h1>Ship faster, debug less.</h1>
<p>Local-first request tracing, replayable environments, and CI insights. Start free — upgrade when your team does.</p>
<div class="billing">
<div class="switch" role="group" aria-label="Billing period">
<button type="button" id="btn-monthly" aria-pressed="true">Monthly</button>
<button type="button" id="btn-annual" aria-pressed="false">Annual<span class="save">−20%</span></button>
</div>
</div>
</section>
<section class="tiers" aria-label="Plans">
<!-- Hobby -->
<article class="tier">
<div class="tier-head"><h2>Hobby</h2></div>
<p class="price">
<span class="cur">$</span><span class="amount">0</span><span class="per">forever</span>
</p>
<p class="sub">No card required</p>
<p class="pitch">For side projects and weekend experiments that still deserve real tooling.</p>
<ul class="features">
<li><span class="tick" aria-hidden="true">✓</span><span>1 developer, 3 active projects</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>10k traced requests / month</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>7-day trace retention</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>CLI, local proxy & VS Code extension</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Community Discord support</span></li>
</ul>
<a class="cta" href="#">Start building</a>
<p class="cta-sub">Free while your project is small</p>
</article>
<!-- Pro (emphasised) -->
<article class="tier featured">
<div class="tier-head">
<h2>Pro</h2>
<span class="note">Most chosen</span>
</div>
<p class="price">
<span class="cur">$</span><span class="amount" data-monthly="20" data-annual="16">20</span><span class="per">/ month</span>
</p>
<p class="sub" data-sub-monthly="Billed monthly · cancel anytime" data-sub-annual="$192 billed yearly · save $48">Billed monthly · cancel anytime</p>
<p class="pitch">For the professional developer who lives in the terminal all day, every day.</p>
<ul class="features">
<li><span class="tick" aria-hidden="true">✓</span><span>Everything in Hobby, plus:</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Unlimited projects & 2M traced requests</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>90-day retention with full request replay</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Time-travel debugger & flame graphs</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>GitHub & GitLab CI checks</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Private environments and secret redaction</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Email support, next business day</span></li>
</ul>
<a class="cta primary" href="#">Start 14-day trial</a>
<p class="cta-sub">No card required for the trial</p>
</article>
<!-- Team -->
<article class="tier">
<div class="tier-head"><h2>Team</h2></div>
<p class="price">
<span class="cur">$</span><span class="amount" data-monthly="60" data-annual="48">60</span><span class="per">/ seat / month</span>
</p>
<p class="sub" data-sub-monthly="Minimum 3 seats · billed monthly" data-sub-annual="Minimum 3 seats · billed yearly">Minimum 3 seats · billed monthly</p>
<p class="pitch">For teams that need shared context, shared history, and a paper trail.</p>
<ul class="features">
<li><span class="tick" aria-hidden="true">✓</span><span>Everything in Pro, plus:</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Shared workspaces & trace annotations</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Unlimited requests, 1-year retention</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>SSO (SAML / OIDC) & SCIM provisioning</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Role-based access & audit log</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Self-hosted collector option</span></li>
<li><span class="tick" aria-hidden="true">✓</span><span>Priority support, 4-hour first response</span></li>
</ul>
<a class="cta" href="#">Talk to us</a>
<p class="cta-sub">Or start a team trial instantly</p>
</article>
</section>
<section class="allplans" aria-label="Included in every plan">
<h3>Included in every plan</h3>
<div><strong>Open-source core</strong>The collector and CLI are MIT-licensed.</div>
<div><strong>Your data stays yours</strong>Export everything as JSON or OTLP, any time.</div>
<div><strong>No seat-count surprises</strong>Overages are throttled, never auto-billed.</div>
<div><strong>Works offline</strong>The local proxy runs with no network access.</div>
</section>
<section class="faq">
<h3>Questions, answered</h3>
<div class="faq-grid">
<div>
<h4>What counts as a traced request?</h4>
<p>Any HTTP, gRPC, or queue message captured by the collector. Local development traces are never counted.</p>
</div>
<div>
<h4>Can I switch plans mid-cycle?</h4>
<p>Yes. Upgrades apply immediately and are prorated; downgrades take effect at the end of the current period.</p>
</div>
<div>
<h4>Do you offer open-source discounts?</h4>
<p>Pro is free for maintainers of public repositories with 500+ stars, and we discount Team by 50% for non-profits.</p>
</div>
<div>
<h4>What happens when a trial ends?</h4>
<p>Your workspace drops back to Hobby limits. Nothing is deleted — historic traces stay readable for 30 days.</p>
</div>
</div>
</section>
<footer class="site">
<span>© 2024 Loopback Labs. Prices in USD, excluding tax.</span>
<span><a href="#">Status</a> · <a href="#">Security</a> · <a href="#">Terms</a></span>
</footer>
</div>
<script>
(function () {
var monthlyBtn = document.getElementById('btn-monthly');
var annualBtn = document.getElementById('btn-annual');
var amounts = document.querySelectorAll('.amount[data-monthly]');
var subs = document.querySelectorAll('.sub[data-sub-monthly]');
function setPeriod(period) {
var annual = period === 'annual';
monthlyBtn.setAttribute('aria-pressed', String(!annual));
annualBtn.setAttribute('aria-pressed', String(annual));
amounts.forEach(function (el) {
el.textContent = annual ? el.dataset.annual : el.dataset.monthly;
});
subs.forEach(function (el) {
el.textContent = annual ? el.dataset.subAnnual : el.dataset.subMonthly;
});
}
monthlyBtn.addEventListener('click', function () { setPeriod('monthly'); });
annualBtn.addEventListener('click', function () { setPeriod('annual'); });
})();
</script>
</body>
</html>