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>Forge Pricing</title>
  <style>
    :root {
      --bg: #0b1020;
      --surface: #131a2d;
      --surface-soft: #18213a;
      --border: #293451;
      --text: #f5f7ff;
      --muted: #aab5d0;
      --accent: #7c8cff;
      --accent-strong: #9d79ff;
      --success: #80e3b0;
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--bg);
    }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 50% -10%, rgba(124, 140, 255, 0.24), transparent 38rem),
        radial-gradient(circle at 2% 50%, rgba(157, 121, 255, 0.1), transparent 30rem),
        var(--bg);
    }

    .page {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      padding: 28px 0 72px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 88px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-size: 1.1rem;
      font-weight: 750;
      letter-spacing: -0.03em;
      text-decoration: none;
    }

    .brand-mark {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border: 1px solid rgba(162, 176, 255, 0.5);
      border-radius: 9px;
      background: linear-gradient(145deg, #8392ff, #7354d8);
      color: white;
      font-size: 1rem;
      box-shadow: 0 7px 18px rgba(88, 90, 214, 0.34);
    }

    .nav-link {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 600;
      text-decoration: none;
      transition: color 160ms ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--text);
    }

    .hero {
      max-width: 720px;
      margin: 0 auto 56px;
      text-align: center;
    }

    .eyebrow {
      display: inline-block;
      margin: 0 0 18px;
      color: #b8c2ff;
      font-size: 0.75rem;
      font-weight: 750;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(2.35rem, 5vw, 4.25rem);
      line-height: 1.02;
      letter-spacing: -0.065em;
    }

    .hero p {
      max-width: 575px;
      margin: 22px auto 0;
      color: var(--muted);
      font-size: clamp(1rem, 2vw, 1.15rem);
      line-height: 1.65;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
      gap: 18px;
    }

    .plan {
      display: flex;
      flex-direction: column;
      min-height: 540px;
      padding: 31px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(19, 26, 45, 0.9);
    }

    .plan.pro {
      position: relative;
      z-index: 1;
      margin: -12px 0;
      padding: 43px 31px;
      border-color: rgba(137, 150, 255, 0.76);
      background:
        linear-gradient(180deg, rgba(104, 118, 255, 0.15), rgba(20, 28, 49, 0.97) 30%),
        var(--surface);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .plan.pro::before {
      position: absolute;
      top: 0;
      right: 31px;
      left: 31px;
      height: 3px;
      border-radius: 0 0 3px 3px;
      background: linear-gradient(90deg, #8292ff, #b483ff);
      content: "";
    }

    .plan-name {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 720;
      letter-spacing: -0.025em;
    }

    .plan-note {
      min-height: 44px;
      margin: 12px 0 27px;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.5;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin: 0 0 7px;
      letter-spacing: -0.055em;
    }

    .price strong {
      font-size: 3.25rem;
      font-weight: 750;
      line-height: 1;
    }

    .price span {
      color: var(--muted);
      font-size: 0.94rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .billing {
      min-height: 22px;
      margin: 0 0 28px;
      color: #8390af;
      font-size: 0.83rem;
    }

    .divider {
      width: 100%;
      height: 1px;
      margin-bottom: 25px;
      background: var(--border);
    }

    .features-label {
      margin: 0 0 16px;
      color: var(--text);
      font-size: 0.86rem;
      font-weight: 680;
    }

    .features {
      display: grid;
      gap: 14px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .features li {
      display: flex;
      gap: 10px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.4;
    }

    .check {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      border-radius: 50%;
      background: rgba(128, 227, 176, 0.12);
      color: var(--success);
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 18px;
      text-align: center;
    }

    .cta {
      display: block;
      width: 100%;
      margin-top: auto;
      padding: 12px 16px;
      border: 1px solid #435173;
      border-radius: 9px;
      color: var(--text);
      background: transparent;
      font-size: 0.92rem;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .cta:hover,
    .cta:focus-visible {
      border-color: #7486c7;
      background: rgba(123, 140, 255, 0.1);
      transform: translateY(-1px);
    }

    .pro .cta {
      border-color: transparent;
      background: linear-gradient(135deg, #8291ff, #9168e6);
      box-shadow: 0 9px 22px rgba(94, 89, 220, 0.3);
    }

    .pro .cta:hover,
    .pro .cta:focus-visible {
      background: linear-gradient(135deg, #93a0ff, #a277ee);
    }

    .footnote {
      margin: 42px 0 0;
      color: #8390af;
      font-size: 0.83rem;
      line-height: 1.6;
      text-align: center;
    }

    .footnote a {
      color: #b9c4ff;
      text-decoration: none;
    }

    .footnote a:hover,
    .footnote a:focus-visible {
      text-decoration: underline;
    }

    @media (max-width: 820px) {
      .page {
        width: min(560px, calc(100% - 32px));
      }

      .nav {
        margin-bottom: 58px;
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .plan,
      .plan.pro {
        min-height: 0;
        margin: 0;
        padding: 29px;
      }

      .plan.pro {
        padding-top: 38px;
      }

      .plan-note {
        min-height: 0;
      }

      .cta {
        margin-top: 30px;
      }
    }

    @media (max-width: 450px) {
      .page {
        width: min(100% - 28px, 560px);
        padding-top: 20px;
      }

      .nav-link {
        font-size: 0.82rem;
      }

      .hero {
        margin-bottom: 40px;
      }

      .plan,
      .plan.pro {
        padding: 25px;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <nav class="nav" aria-label="Primary navigation">
      <a class="brand" href="#" aria-label="Forge home">
        <span class="brand-mark" aria-hidden="true">⌘</span>
        Forge
      </a>
      <a class="nav-link" href="#plans">Compare plans</a>
    </nav>

    <section class="hero" aria-labelledby="page-title">
      <p class="eyebrow">Simple, developer-friendly pricing</p>
      <h1 id="page-title">Spend less time shipping your tooling.</h1>
      <p>Choose the workspace that fits your team today. Upgrade when your build pipeline needs more room to grow.</p>
    </section>

    <section class="pricing-grid" id="plans" aria-label="Pricing plans">
      <article class="plan">
        <h2 class="plan-name">Hobby</h2>
        <p class="plan-note">For personal projects and experiments.</p>
        <p class="price"><strong>$0</strong><span>/ forever</span></p>
        <p class="billing">No credit card required</p>
        <div class="divider"></div>
        <p class="features-label">Everything you need to start:</p>
        <ul class="features">
          <li><span class="check">✓</span><span>3 private projects</span></li>
          <li><span class="check">✓</span><span>5,000 build minutes per month</span></li>
          <li><span class="check">✓</span><span>Community support</span></li>
          <li><span class="check">✓</span><span>Public API access</span></li>
        </ul>
        <a class="cta" href="#">Start building free</a>
      </article>

      <article class="plan pro">
        <h2 class="plan-name">Pro</h2>
        <p class="plan-note">For developers shipping production software.</p>
        <p class="price"><strong>$20</strong><span>/ month</span></p>
        <p class="billing">Per developer, billed monthly</p>
        <div class="divider"></div>
        <p class="features-label">Everything in Hobby, plus:</p>
        <ul class="features">
          <li><span class="check">✓</span><span>Unlimited private projects</span></li>
          <li><span class="check">✓</span><span>50,000 build minutes per month</span></li>
          <li><span class="check">✓</span><span>Preview environments</span></li>
          <li><span class="check">✓</span><span>Priority email support</span></li>
          <li><span class="check">✓</span><span>Advanced deployment analytics</span></li>
        </ul>
        <a class="cta" href="#">Start Pro trial</a>
      </article>

      <article class="plan">
        <h2 class="plan-name">Team</h2>
        <p class="plan-note">For teams that need control and collaboration.</p>
        <p class="price"><strong>$60</strong><span>/ seat / month</span></p>
        <p class="billing">Billed monthly, 3-seat minimum</p>
        <div class="divider"></div>
        <p class="features-label">Everything in Pro, plus:</p>
        <ul class="features">
          <li><span class="check">✓</span><span>Shared team workspaces</span></li>
          <li><span class="check">✓</span><span>250,000 build minutes per month</span></li>
          <li><span class="check">✓</span><span>Role-based access controls</span></li>
          <li><span class="check">✓</span><span>SSO and audit logs</span></li>
          <li><span class="check">✓</span><span>Dedicated success manager</span></li>
        </ul>
        <a class="cta" href="#">Talk to sales</a>
      </article>
    </section>

    <p class="footnote">
      All plans include secure Git integrations and global edge deployments.
      Need a custom agreement? <a href="#">Contact our team.</a>
    </p>
  </main>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-terra",
  "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": "9bd8bad1-4193-4e89-a67d-78fe58951673"
}