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: #f7f8fc;
      --surface: #ffffff;
      --text: #182033;
      --muted: #667085;
      --line: #e5e8f0;
      --accent: #5b4df5;
      --accent-dark: #4638d7;
      --accent-soft: #f0efff;
      --success: #23845d;
      --shadow: 0 18px 48px rgba(29, 38, 67, 0.09);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 50% -25%, #e7e4ff 0, rgba(231, 228, 255, 0) 38%),
        var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

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

    header {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

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

    .brand-mark {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      color: white;
      background: var(--accent);
      border-radius: 8px;
      box-shadow: 0 5px 13px rgba(91, 77, 245, 0.28);
    }

    .brand-mark svg {
      width: 17px;
      height: 17px;
    }

    .nav-link {
      color: var(--muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: color 0.2s ease;
    }

    .nav-link:hover {
      color: var(--accent);
    }

    .hero {
      max-width: 730px;
      text-align: center;
      margin: 68px auto 52px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid #e5e2ff;
      border-radius: 999px;
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 700;
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      background: #7b70ff;
      border-radius: 50%;
      box-shadow: 0 0 0 3px #e8e6ff;
    }

    h1 {
      margin: 19px 0 15px;
      font-size: clamp(38px, 5vw, 57px);
      line-height: 1.06;
      letter-spacing: -2.3px;
    }

    .hero p {
      max-width: 570px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.6;
    }

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

    .plan {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 530px;
      padding: 30px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .plan.featured {
      z-index: 1;
      margin: -12px 0;
      padding: 41px 30px;
      border-color: #c9c4ff;
      box-shadow: var(--shadow);
    }

    .plan.featured::before {
      content: "";
      position: absolute;
      top: 0;
      left: 27px;
      right: 27px;
      height: 3px;
      background: linear-gradient(90deg, #7367f8, #5143ec);
      border-radius: 0 0 5px 5px;
    }

    .plan-name {
      margin: 0;
      font-size: 20px;
      font-weight: 750;
      letter-spacing: -0.5px;
    }

    .plan-description {
      min-height: 42px;
      margin: 10px 0 22px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 26px;
      letter-spacing: -1.7px;
    }

    .price strong {
      font-size: 45px;
      line-height: 1;
    }

    .price span {
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .divider {
      height: 1px;
      margin-bottom: 23px;
      background: var(--line);
    }

    .feature-heading {
      margin: 0 0 14px;
      color: #454d60;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

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

    .features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #414a5e;
      font-size: 14px;
      line-height: 1.42;
    }

    .check {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      margin-top: 1px;
      color: var(--success);
      background: #eaf8f1;
      border-radius: 50%;
    }

    .check svg {
      width: 11px;
      height: 11px;
      stroke-width: 3;
    }

    .cta {
      width: 100%;
      margin-top: auto;
      padding: 12px 16px;
      border: 1px solid #d9ddea;
      border-radius: 10px;
      background: white;
      color: #30394e;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    .cta:hover {
      border-color: #b6bde0;
      background: #fafbff;
      transform: translateY(-1px);
    }

    .featured .cta {
      border-color: var(--accent);
      background: var(--accent);
      color: white;
      box-shadow: 0 7px 15px rgba(91, 77, 245, 0.2);
    }

    .featured .cta:hover {
      background: var(--accent-dark);
      border-color: var(--accent-dark);
      box-shadow: 0 9px 20px rgba(91, 77, 245, 0.28);
    }

    .billing-note {
      margin: 27px 0 78px;
      color: #7a8498;
      font-size: 13px;
      text-align: center;
    }

    .billing-note strong {
      color: #535d72;
    }

    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 0 31px;
      border-top: 1px solid var(--line);
      color: #7a8498;
      font-size: 13px;
    }

    .footer-links {
      display: flex;
      gap: 20px;
    }

    .footer-links a {
      color: inherit;
      text-decoration: none;
    }

    .footer-links a:hover {
      color: var(--accent);
    }

    @media (max-width: 780px) {
      .hero {
        margin: 45px auto 40px;
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
      }

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

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

      .features {
        margin-bottom: 28px;
      }

      .billing-note {
        margin-bottom: 55px;
      }
    }

    @media (max-width: 480px) {
      .page {
        width: min(100% - 28px, 1180px);
      }

      header {
        height: 68px;
      }

      .nav-link {
        font-size: 13px;
      }

      .hero p {
        font-size: 16px;
      }

      .plan,
      .plan.featured {
        padding-left: 23px;
        padding-right: 23px;
      }

      footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
      }
    }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <a class="brand" href="#" aria-label="Forge home">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3 4.5 7.3v9.4L12 21l7.5-4.3V7.3L12 3Z"></path>
            <path d="m4.7 7.4 7.3 4.2 7.3-4.2M12 11.6V21"></path>
          </svg>
        </span>
        Forge
      </a>
      <a class="nav-link" href="#pricing">Contact sales</a>
    </header>

    <main>
      <section class="hero" aria-labelledby="page-title">
        <div class="eyebrow"><span class="eyebrow-dot"></span>Simple, transparent pricing</div>
        <h1 id="page-title">Build faster. Scale when ready.</h1>
        <p>Everything you need to ship reliable developer infrastructure, from your first project to your entire organization.</p>
      </section>

      <section class="pricing-grid" id="pricing" aria-label="Pricing plans">
        <article class="plan">
          <h2 class="plan-name">Hobby</h2>
          <p class="plan-description">For personal projects and early experiments.</p>
          <div class="price">
            <strong>$0</strong>
            <span>/ month</span>
          </div>
          <div class="divider"></div>
          <p class="feature-heading">Start building with</p>
          <ul class="features">
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>3 active projects</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>100,000 monthly requests</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Community support</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>7-day log retention</li>
          </ul>
          <a class="cta" href="#">Get started free</a>
        </article>

        <article class="plan featured">
          <h2 class="plan-name">Pro</h2>
          <p class="plan-description">For independent developers shipping production apps.</p>
          <div class="price">
            <strong>$20</strong>
            <span>/ month</span>
          </div>
          <div class="divider"></div>
          <p class="feature-heading">Everything in Hobby, plus</p>
          <ul class="features">
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Unlimited active projects</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>2 million monthly requests</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Priority email support</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>90-day log retention</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Custom domains and analytics</li>
          </ul>
          <a class="cta" href="#">Start Pro trial</a>
        </article>

        <article class="plan">
          <h2 class="plan-name">Team</h2>
          <p class="plan-description">For teams that need control, visibility, and scale.</p>
          <div class="price">
            <strong>$60</strong>
            <span>/ seat / month</span>
          </div>
          <div class="divider"></div>
          <p class="feature-heading">Everything in Pro, plus</p>
          <ul class="features">
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Unlimited monthly requests</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Role-based access controls</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Shared team workspaces</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>1-year log retention</li>
            <li><span class="check"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3 3 7-7"></path></svg></span>Dedicated success manager</li>
          </ul>
          <a class="cta" href="#">Talk to sales</a>
        </article>
      </section>

      <p class="billing-note"><strong>No credit card required</strong> for Hobby. Cancel paid plans any time.</p>
    </main>

    <footer>
      <span>© 2025 Forge, Inc.</span>
      <div class="footer-links">
        <a href="#">Documentation</a>
        <a href="#">Status</a>
        <a href="#">Terms</a>
      </div>
    </footer>
  </div>
</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"
}