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">
<title>Pricing — Forge CLI</title>
<style>
  :root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-raised: #1c2333;
    --border: #2d333f;
    --border-strong: #3d4452;
    --text: #e6edf3;
    --text-muted: #8b949e;
    --accent: #6ea8fe;
    --accent-strong: #4c8dfa;
    --accent-deep: #2f6fe0;
    --good: #56d364;
    --radius: 14px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* ---------- Header ---------- */
  header.site {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .01em;
    color: var(--text);
    text-decoration: none;
  }

  .logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent-strong), #8a63f4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    color: #fff;
  }

  nav.site-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
    margin-left: 1.5rem;
  }
  nav.site-nav a:hover { color: var(--text); }

  /* ---------- Hero ---------- */
  .hero {
    text-align: center;
    padding: 3.5rem 1.5rem 2.5rem;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: .75rem;
  }

  .hero p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 34rem;
    margin: 0 auto;
  }

  /* ---------- Billing toggle ---------- */
  .billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem;
  }

  .billing-toggle button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
  }

  .billing-toggle button[aria-pressed="true"] {
    background: var(--accent-deep);
    color: #fff;
  }

  .billing-toggle .save {
    font-size: .72rem;
    font-weight: 700;
    color: var(--good);
    margin-left: .35rem;
  }

  /* ---------- Grid ---------- */
  .plans {
    max-width: 1120px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }

  .plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, transform .15s;
  }

  .plan:hover { border-color: var(--border-strong); }

  /* Emphasised middle tier: raised surface, accent border, gentle lift + glow */
  .plan.featured {
    background: var(--surface-raised);
    border-color: var(--accent-strong);
    box-shadow:
      0 0 0 1px var(--accent-strong),
      0 18px 45px -18px rgba(76, 141, 250, 0.45);
    transform: translateY(-10px);
    position: relative;
  }

  .plan.featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, var(--accent-strong), #8a63f4);
  }

  .plan h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .tagline {
    color: var(--text-muted);
    font-size: .88rem;
    margin-top: .3rem;
    min-height: 2.6em;
  }

  .price {
    margin: 1.4rem 0 .25rem;
    display: flex;
    align-items: baseline;
    gap: .35rem;
  }

  .price .amount {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }

  .price .unit {
    color: var(--text-muted);
    font-size: .88rem;
  }

  .price-note {
    font-size: .78rem;
    color: var(--text-muted);
    min-height: 1.2em;
    margin-bottom: 1.4rem;
  }

  /* ---------- Feature lists ---------- */
  ul.features {
    list-style: none;
    display: grid;
    gap: .65rem;
    margin-bottom: 2rem;
    flex-grow: 1;
  }

  ul.features li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--text);
  }

  ul.features li svg {
    flex-shrink: 0;
    margin-top: .2rem;
  }

  ul.features li.muted { color: var(--text-muted); }

  .includes {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .9rem;
  }

  /* ---------- CTAs ---------- */
  .cta {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: .93rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    transition: background .15s, border-color .15s, color .15s;
  }

  .cta.secondary {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border-strong);
  }
  .cta.secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .cta.primary {
    color: #fff;
    background: var(--accent-deep);
    border: 1px solid transparent;
  }
  .cta.primary:hover { background: var(--accent-strong); }

  /* ---------- Footer notes ---------- */
  .fineprint {
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
    max-width: 42rem;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
  }
  .fineprint a { color: var(--accent); text-decoration: none; }
  .fineprint a:hover { text-decoration: underline; }

  .faq-line {
    text-align: center;
    margin: 2.25rem auto 4rem;
    color: var(--text-muted);
    font-size: .9rem;
  }
  .faq-line a { color: var(--accent); text-decoration: none; }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px) {
    .plans {
      grid-template-columns: 1fr;
      max-width: 480px;
    }
    /* On mobile the featured card leads with order + subtle lift removed */
    .plan.featured { transform: none; order: -1; }
    .tagline { min-height: 0; }
  }

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

<header class="site">
  <a class="logo" href="#"><span class="logo-mark">&gt;_</span>Forge&nbsp;CLI</a>
  <nav class="site-nav">
    <a href="#">Docs</a>
    <a href="#">Changelog</a>
    <a href="#">Sign in</a>
  </nav>
</header>

<section class="hero">
  <h1>Pricing that scales with your workflow</h1>
  <p>Ship faster with instant preview environments, zero-config deploys, and observability built for developers. Start free — upgrade when you need more.</p>

  <div class="billing-toggle" 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>
</section>

<main class="plans">

  <!-- Hobby -->
  <article class="plan" aria-label="Hobby plan">
    <h2>Hobby</h2>
    <p class="tagline">Everything you need for side projects and weekend experiments.</p>
    <div class="price">
      <span class="amount">$0</span>
      <span class="unit">forever</span>
    </div>
    <p class="price-note">No credit card required.</p>

    <p class="includes">Includes</p>
    <ul class="features">
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited local builds</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>3 cloud deploys per day</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>1 preview environment</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>7-day log retention</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Community support</li>
    </ul>

    <a class="cta secondary" href="#">Start for free</a>
  </article>

  <!-- Pro (featured) -->
  <article class="plan featured" aria-label="Pro plan (most popular)">
    <h2>Pro</h2>
    <p class="tagline">For professional developers shipping production software solo.</p>
    <div class="price">
      <span class="amount" data-monthly="$20" data-annual="$16">$20</span>
      <span class="unit">/ month</span>
    </div>
    <p class="price-note" data-monthly="Billed monthly. Cancel anytime." data-annual="Billed annually ($192/yr).">Billed monthly. Cancel anytime.</p>

    <p class="includes">Everything in Hobby, plus</p>
    <ul class="features">
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited cloud deploys</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>10 concurrent preview environments</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Custom domains &amp; SSL</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Remote build cache</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>90-day log retention</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Priority email support</li>
    </ul>

    <a class="cta primary" href="#">Start 14-day free trial</a>
  </article>

  <!-- Team -->
  <article class="plan" aria-label="Team plan">
    <h2>Team</h2>
    <p class="tagline">Collaboration, access control, and compliance for growing teams.</p>
    <div class="price">
      <span class="amount" data-monthly="$60" data-annual="$48">$60</span>
      <span class="unit">/ seat / month</span>
    </div>
    <p class="price-note" data-monthly="Minimum 3 seats. Billed monthly." data-annual="Minimum 3 seats. Billed annually.">Minimum 3 seats. Billed monthly.</p>

    <p class="includes">Everything in Pro, plus</p>
    <ul class="features">
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Shared projects &amp; role-based access</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>SSO / SAML &amp; SCIM provisioning</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Audit logs &amp; deploy approvals</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited preview environments</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>1-year log retention</li>
      <li><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3.2L13 4.9" stroke="#56d364" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Dedicated support with 4-hour SLA</li>
    </ul>

    <a class="cta secondary" href="#">Contact sales</a>
  </article>

</main>

<p class="fineprint">
  All plans include unlimited public projects, the full CLI, and access to the plugin registry.
  Prices exclude applicable taxes. Need something bigger? <a href="#">Talk to us about Enterprise.</a>
</p>

<p class="faq-line">Questions about limits or billing? Read the <a href="#">pricing FAQ</a>.</p>

<script>
  (function () {
    var monthlyBtn = document.getElementById('btn-monthly');
    var annualBtn = document.getElementById('btn-annual');

    function setBilling(mode) {
      monthlyBtn.setAttribute('aria-pressed', mode === 'monthly');
      annualBtn.setAttribute('aria-pressed', mode === 'annual');
      var els = document.querySelectorAll('[data-monthly]');
      for (var i = 0; i < els.length; i++) {
        els[i].textContent = els[i].getAttribute('data-' + mode);
      }
    }

    monthlyBtn.addEventListener('click', function () { setBilling('monthly'); });
    annualBtn.addEventListener('click', function () { setBilling('annual'); });
  })();
</script>

</body>
</html>

request envelope — prompt redacted

{
  "model": "anthropic/claude-fable-5",
  "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": "edf0793e-2e8b-4fa7-9a2c-3f5896800c71"
}