pricing-page-saas
rendered
the brief, redacted

Build a complete three-tier pricing page as one self-contained HTML document. Tests layout, typographic hierarchy, and restraint under a familiar brief.

504 chars · 76 words · fingerprint a8a380793653

raw output — byte exact

<!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="Kiln pricing — free for side projects, powerful plans for professionals and teams.">
<title>Kiln — Pricing</title>
<style>
  :root {
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --bg: #090b0e;
    --panel: #10141a;
    --panel-2: #141922;
    --line: rgba(255,255,255,.08);
    --text: #e8edf2;
    --text-soft: #cfd6de;
    --muted: #8b95a1;
    --accent: #3ddc97;
    --accent-soft: rgba(61,220,151,.12);
    --accent-line: rgba(61,220,151,.45);
    --radius: 16px;
  }

  * { box-sizing: border-box; }

  html { color-scheme: dark; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Ambient backdrop: faint top glow + grid that fades out */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(900px 420px at 50% -80px, rgba(61,220,151,.09), transparent 65%),
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    -webkit-mask-image: radial-gradient(1200px 720px at 50% 0%, #000 25%, transparent 100%);
            mask-image: radial-gradient(1200px 720px at 50% 0%, #000 25%, transparent 100%);
  }

  ::selection { background: rgba(61,220,151,.32); }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Nav ---------- */
  .nav {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.01em;
  }

  .mark {
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 2.5px;
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(61,220,151,.65);
  }

  .nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
  }

  .nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
  }

  .nav-links a:hover { color: var(--text); }

  .signin {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text) !important;
  }

  .signin:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); }

  /* ---------- Hero ---------- */
  .hero {
    text-align: center;
    padding: 72px 0 0;
  }

  .eyebrow {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }

  .eyebrow b { color: var(--accent); font-weight: 400; }

  h1 {
    margin: 18px 0 0;
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    font-weight: 600;
  }

  h1 .dim { color: var(--muted); }

  .sub {
    color: var(--muted);
    max-width: 560px;
    margin: 20px auto 0;
    font-size: 17px;
  }

  /* ---------- Billing toggle ---------- */
  .billing-toggle {
    margin-top: 38px;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .billing-toggle button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s, background .2s;
  }

  .billing-toggle button:hover { color: var(--text); }

  .billing-toggle button.active {
    background: rgba(255,255,255,.08);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  }

  .save {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
  }

  /* ---------- Plan grid ---------- */
  .plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 58px;
    align-items: stretch;
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.17);
  }

  /* Emphasised middle tier: elevation, accent hairline, soft glow — no ribbon */
  .card.featured {
    background: linear-gradient(180deg, rgba(61,220,151,.07), rgba(61,220,151,.015) 45%), var(--panel-2);
    border-color: var(--accent-line);
    transform: translateY(-12px);
    box-shadow:
      0 28px 64px -24px rgba(0,0,0,.85),
      0 0 0 1px rgba(61,220,151,.08),
      0 0 48px -12px rgba(61,220,151,.22);
  }

  .card.featured:hover { transform: translateY(-15px); }

  .card.featured::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(61,220,151,.9), transparent);
  }

  .kicker {
    margin: 0 0 12px;
    min-height: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .plan {
    margin: 0;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #dfe6ee;
  }

  .price {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .amount {
    display: inline-block;
    font-family: var(--mono);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .amount.tick { animation: tick .28s ease; }

  @keyframes tick {
    from { opacity: .25; transform: translateY(5px); }
    to   { opacity: 1;   transform: none; }
  }

  .per { color: var(--muted); font-size: 14px; }

  .note {
    display: block;
    min-height: 19px;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
  }

  .tagline {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--text-soft);
  }

  .hr {
    height: 1px;
    background: var(--line);
    margin: 22px 0;
  }

  .featured .hr { background: rgba(61,220,151,.18); }

  .features {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 11px;
    font-size: 14.5px;
    color: var(--text-soft);
  }

  .features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
  }

  .features li::before {
    content: "";
    flex: none;
    width: 9px;
    height: 5px;
    margin-top: .5em;
    border-left: 1.6px solid var(--accent);
    border-bottom: 1.6px solid var(--accent);
    transform: rotate(-45deg);
  }

  .features li.group {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: -3px;
  }

  .features li.group::before { display: none; }

  /* ---------- Buttons ---------- */
  .btn {
    margin-top: auto;
    display: block;
    text-align: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
    transition: background .2s, border-color .2s, transform .2s;
  }

  .btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.24);
  }

  .btn-primary {
    background: var(--accent);
    border-color: transparent;
    color: #04150c;
    font-weight: 600;
    box-shadow: 0 10px 26px -10px rgba(61,220,151,.55);
  }

  .btn-primary:hover {
    background: #56e7a7;
    border-color: transparent;
    transform: translateY(-1px);
  }

  /* ---------- Trust row / enterprise ---------- */
  .trust {
    margin-top: 44px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 30px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--muted);
  }

  .trust b { color: var(--accent); font-weight: 400; margin-right: 2px; }

  .enterprise {
    text-align: center;
    margin-top: 26px;
    color: var(--muted);
    font-size: 14.5px;
  }

  .enterprise a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(61,220,151,.35);
    transition: border-color .2s;
  }

  .enterprise a:hover { border-bottom-color: var(--accent); }

  /* ---------- Footer ---------- */
  footer {
    margin-top: 96px;
    border-top: 1px solid var(--line);
  }

  .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 26px;
    padding-bottom: 26px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--muted);
  }

  .footer-inner a {
    color: var(--muted);
    text-decoration: none;
    margin-left: 22px;
    transition: color .2s;
  }

  .footer-inner a:hover { color: var(--text); }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .plans {
      grid-template-columns: 1fr;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .card.featured { transform: none; }
    .card.featured:hover { transform: translateY(-3px); }
    .hero { padding-top: 52px; }
  }

  @media (max-width: 560px) {
    .nav-links a:not(.signin) { display: none; }
    .card { padding: 24px 20px 22px; }
    footer { margin-top: 72px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
  }
</style>
</head>
<body>

  <header class="nav wrap">
    <a class="logo" href="#"><span class="mark" aria-hidden="true"></span>kiln</a>
    <nav class="nav-links" aria-label="Primary">
      <a href="#">Docs</a>
      <a href="#">Changelog</a>
      <a href="#">Status</a>
      <a href="#" class="signin">Sign in</a>
    </nav>
  </header>

  <main class="wrap">

    <section class="hero">
      <p class="eyebrow"><b>//</b> Pricing</p>
      <h1>Start free.<br><span class="dim">Scale when you do.</span></h1>
      <p class="sub">Kiln is CI that stays out of your way — free for side projects, with room to grow when the side project becomes the real thing.</p>

      <div class="billing-toggle" role="group" aria-label="Billing period">
        <button type="button" class="active" data-period="monthly" aria-pressed="true">Monthly</button>
        <button type="button" data-period="annual" aria-pressed="false">Annual <span class="save">−20%</span></button>
      </div>
    </section>

    <section class="plans" aria-label="Plans">

      <!-- Hobby -->
      <article class="card">
        <p class="kicker" aria-hidden="true"></p>
        <h3 class="plan">Hobby</h3>
        <div class="price">
          <span class="amount">$0</span>
        </div>
        <span class="note">free forever</span>
        <p class="tagline">For side projects and weekend experiments.</p>
        <div class="hr"></div>
        <ul class="features">
          <li>1 project</li>
          <li>100 builds / month</li>
          <li>Community plugins &amp; templates</li>
          <li>7-day log retention</li>
          <li>Community support</li>
        </ul>
        <a class="btn" href="#">Start for free</a>
      </article>

      <!-- Pro (emphasised) -->
      <article class="card featured">
        <p class="kicker">Most popular</p>
        <h3 class="plan">Pro</h3>
        <div class="price">
          <span class="amount" data-monthly="$20" data-annual="$16">$20</span>
          <span class="per">/ mo</span>
        </div>
        <span class="note" data-monthly="billed monthly" data-annual="billed annually · $192 / yr">billed monthly</span>
        <p class="tagline">For developers shipping production software.</p>
        <div class="hr"></div>
        <ul class="features">
          <li class="group">Everything in Hobby, plus</li>
          <li>Unlimited projects</li>
          <li>4 concurrent builds</li>
          <li>Preview environments</li>
          <li>30-day log retention</li>
          <li>Priority support · 12-hr response</li>
        </ul>
        <a class="btn btn-primary" href="#">Start 14-day trial</a>
      </article>

      <!-- Team -->
      <article class="card">
        <p class="kicker" aria-hidden="true"></p>
        <h3 class="plan">Team</h3>
        <div class="price">
          <span class="amount" data-monthly="$60" data-annual="$48">$60</span>
          <span class="per">/ seat / mo</span>
        </div>
        <span class="note" data-monthly="billed monthly" data-annual="billed annually · $576 / seat / yr">billed monthly</span>
        <p class="tagline">For organisations building together at scale.</p>
        <div class="hr"></div>
        <ul class="features">
          <li class="group">Everything in Pro, plus</li>
          <li>SSO / SAML &amp; SCIM</li>
          <li>Role-based access control</li>
          <li>Audit logs</li>
          <li>Self-hosted runners</li>
          <li>99.99% uptime SLA</li>
          <li>Dedicated support engineer</li>
        </ul>
        <a class="btn" href="#">Contact sales</a>
      </article>

    </section>

    <div class="trust">
      <span><b>✓</b> No credit card required</span>
      <span><b>✓</b> Cancel anytime</span>
      <span><b>✓</b> SOC 2 Type II</span>
      <span><b>✓</b> Free for open source</span>
    </div>

    <p class="enterprise">Need on-prem, custom limits, or invoicing? <a href="#">Talk to us about Enterprise&nbsp;↗</a></p>

  </main>

  <footer>
    <div class="footer-inner wrap">
      <span>© 2025 Kiln Systems, Inc. · Prices in USD</span>
      <span>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Security</a>
      </span>
    </div>
  </footer>

  <script>
    (function () {
      var toggle = document.querySelector('.billing-toggle');
      if (!toggle) return;
      var btns = toggle.querySelectorAll('button');

      toggle.addEventListener('click', function (e) {
        var btn = e.target.closest('button');
        if (!btn || btn.classList.contains('active')) return;

        btns.forEach(function (b) {
          var on = b === btn;
          b.classList.toggle('active', on);
          b.setAttribute('aria-pressed', on ? 'true' : 'false');
        });

        var annual = btn.dataset.period === 'annual';

        document.querySelectorAll('[data-monthly]').forEach(function (el) {
          el.textContent = annual ? el.dataset.annual : el.dataset.monthly;
          if (el.classList.contains('amount')) {
            el.classList.remove('tick');
            void el.offsetWidth; /* restart animation */
            el.classList.add('tick');
          }
        });
      });
    })();
  </script>

</body>
</html>

request envelope — prompt redacted

{
  "model": "moonshotai/kimi-k3",
  "system": "Respond with a single complete, self-contained HTML document and nothing else. No markdown fences, no explanation. Inline all CSS and JavaScript. Do not reference any external resource — no CDN scripts, no external stylesheets, no remote fonts or images. The document must render correctly offline.",
  "messages": [
    {
      "role": "user",
      "content": "«REDACTED — 81 words, 504 chars»"
    }
  ],
  "maxOutputTokens": 32000,
  "gatewayStringId": "1bfbb92f-8faa-4d8c-820a-3bc9a9aa46b6"
}