<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Simple, transparent pricing for a modern developer platform.">
<title>Pricing — Stackline</title>
<style>
:root {
color-scheme: light;
--page: #f7f8fb;
--surface: #ffffff;
--surface-soft: #f4f5f8;
--text: #17181c;
--muted: #626773;
--line: #dfe2e8;
--accent: #6254e7;
--accent-dark: #5042cc;
--accent-soft: #efedff;
--success: #23855b;
--shadow: 0 20px 55px rgba(35, 31, 66, 0.13);
}
* {
box-sizing: border-box;
}
html {
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
background: var(--page);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background:
radial-gradient(circle at 50% 0%, rgba(98, 84, 231, 0.09), transparent 34rem),
var(--page);
}
button,
a {
font: inherit;
}
.site-header {
width: min(1160px, calc(100% - 40px));
margin: 0 auto;
padding: 26px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
display: inline-flex;
align-items: center;
gap: 11px;
color: var(--text);
text-decoration: none;
font-size: 18px;
font-weight: 750;
letter-spacing: -0.02em;
}
.brand-mark {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--text);
color: white;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 14px;
font-weight: 700;
box-shadow: 0 5px 15px rgba(23, 24, 28, 0.16);
}
.header-link {
color: var(--muted);
text-decoration: none;
font-size: 14px;
font-weight: 650;
transition: color 160ms ease;
}
.header-link:hover {
color: var(--text);
}
main {
width: min(1160px, calc(100% - 40px));
margin: 0 auto;
padding: 64px 0 88px;
}
.hero {
max-width: 720px;
margin: 0 auto 66px;
text-align: center;
}
.eyebrow {
margin: 0 0 16px;
color: var(--accent-dark);
font-size: 13px;
font-weight: 750;
letter-spacing: 0.09em;
text-transform: uppercase;
}
h1 {
margin: 0;
font-size: clamp(40px, 6vw, 64px);
line-height: 1.04;
letter-spacing: -0.055em;
}
.hero-copy {
max-width: 590px;
margin: 22px auto 0;
color: var(--muted);
font-size: 18px;
line-height: 1.65;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}
.plan {
position: relative;
display: flex;
flex-direction: column;
min-height: 560px;
padding: 34px 32px 30px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 5px 18px rgba(30, 32, 40, 0.035);
}
.plan.featured {
z-index: 1;
border-color: rgba(98, 84, 231, 0.62);
box-shadow: var(--shadow);
transform: translateY(-14px);
}
.plan.featured::before {
position: absolute;
inset: 0 0 auto;
height: 4px;
background: var(--accent);
content: "";
}
.plan-name {
margin: 0;
font-size: 19px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.plan.featured .plan-name {
color: var(--accent-dark);
}
.price {
display: flex;
align-items: baseline;
min-height: 58px;
margin: 22px 0 17px;
gap: 5px;
}
.price-amount {
font-size: 46px;
font-weight: 760;
line-height: 1;
letter-spacing: -0.055em;
}
.price-period {
max-width: 70px;
color: var(--muted);
font-size: 14px;
line-height: 1.25;
}
.positioning {
min-height: 50px;
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.6;
}
.divider {
width: 100%;
height: 1px;
margin: 27px 0 23px;
border: 0;
background: var(--line);
}
.feature-heading {
margin: 0 0 16px;
color: var(--text);
font-size: 13px;
font-weight: 720;
}
.features {
display: grid;
gap: 13px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.features li {
position: relative;
padding-left: 26px;
color: #434751;
font-size: 14px;
line-height: 1.5;
}
.features li::before {
position: absolute;
top: 1px;
left: 0;
width: 17px;
height: 17px;
display: grid;
place-items: center;
border-radius: 50%;
background: #e7f5ef;
color: var(--success);
content: "✓";
font-size: 11px;
font-weight: 800;
}
.cta {
width: 100%;
margin-top: auto;
padding: 13px 18px;
border: 1px solid #cfd2da;
border-radius: 10px;
background: var(--surface);
color: var(--text);
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: 730;
line-height: 1.4;
transition:
border-color 160ms ease,
background 160ms ease,
color 160ms ease,
transform 160ms ease,
box-shadow 160ms ease;
}
.cta:hover {
border-color: #aeb2bc;
background: var(--surface-soft);
transform: translateY(-1px);
}
.featured .cta {
border-color: var(--accent);
background: var(--accent);
color: #ffffff;
box-shadow: 0 8px 20px rgba(98, 84, 231, 0.22);
}
.featured .cta:hover {
border-color: var(--accent-dark);
background: var(--accent-dark);
box-shadow: 0 10px 24px rgba(98, 84, 231, 0.28);
}
.cta:focus-visible,
.brand:focus-visible,
.header-link:focus-visible {
outline: 3px solid rgba(98, 84, 231, 0.32);
outline-offset: 3px;
}
.fine-print {
margin: 36px 0 0;
color: var(--muted);
text-align: center;
font-size: 13px;
line-height: 1.6;
}
@media (max-width: 860px) {
main {
padding-top: 44px;
}
.hero {
margin-bottom: 48px;
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 560px;
margin: 0 auto;
gap: 20px;
}
.plan,
.plan.featured {
min-height: auto;
transform: none;
}
.positioning {
min-height: 0;
}
}
@media (max-width: 520px) {
.site-header,
main {
width: min(100% - 28px, 1160px);
}
.site-header {
padding-top: 20px;
}
main {
padding: 38px 0 64px;
}
.hero {
margin-bottom: 38px;
}
.hero-copy {
font-size: 16px;
}
.plan {
padding: 30px 24px 25px;
border-radius: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition: none !important;
}
}
</style>
</head>
<body>
<header class="site-header">
<a class="brand" href="#" aria-label="Stackline home">
<span class="brand-mark" aria-hidden="true">>_</span>
<span>Stackline</span>
</a>
<a class="header-link" href="mailto:sales@stackline.example">Talk to sales</a>
</header>
<main>
<section class="hero" aria-labelledby="pricing-title">
<p class="eyebrow">Simple pricing</p>
<h1 id="pricing-title">Build more. Manage less.</h1>
<p class="hero-copy">
Start free, then scale as your projects and team grow. Every plan includes
secure deployments, instant rollbacks, and a first-class developer experience.
</p>
</section>
<section class="pricing-grid" aria-label="Pricing plans">
<article class="plan">
<h2 class="plan-name">Hobby</h2>
<div class="price" aria-label="Free forever">
<span class="price-amount">$0</span>
<span class="price-period">forever</span>
</div>
<p class="positioning">Everything you need for side projects and experiments.</p>
<hr class="divider">
<p class="feature-heading">Includes:</p>
<ul class="features">
<li>3 active projects</li>
<li>100 build minutes per month</li>
<li>Community support</li>
<li>Preview deployments</li>
<li>7-day log retention</li>
</ul>
<a class="cta" href="#">Start building free</a>
</article>
<article class="plan featured">
<h2 class="plan-name">Pro</h2>
<div class="price" aria-label="20 dollars per month">
<span class="price-amount">$20</span>
<span class="price-period">per month</span>
</div>
<p class="positioning">For developers shipping serious production applications.</p>
<hr class="divider">
<p class="feature-heading">Everything in Hobby, plus:</p>
<ul class="features">
<li>Unlimited projects</li>
<li>1,000 build minutes per month</li>
<li>Custom domains and redirects</li>
<li>Advanced analytics</li>
<li>30-day log retention</li>
<li>Priority email support</li>
</ul>
<a class="cta" href="#">Start with Pro</a>
</article>
<article class="plan">
<h2 class="plan-name">Team</h2>
<div class="price" aria-label="60 dollars per seat per month">
<span class="price-amount">$60</span>
<span class="price-period">per seat / month</span>
</div>
<p class="positioning">Collaboration, control, and support for growing teams.</p>
<hr class="divider">
<p class="feature-heading">Everything in Pro, plus:</p>
<ul class="features">
<li>Shared team workspaces</li>
<li>Role-based access controls</li>
<li>Audit logs and SSO</li>
<li>Concurrent builds</li>
<li>90-day log retention</li>
<li>Dedicated onboarding</li>
</ul>
<a class="cta" href="mailto:sales@stackline.example">Contact sales</a>
</article>
</section>
<p class="fine-print">
Prices exclude applicable taxes. Upgrade, downgrade, or cancel at any time.
</p>
</main>
</body>
</html>