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 — Simple pricing for modern teams</title>
  <style>
    :root {
      --ink: #172033;
      --muted: #667085;
      --soft: #f6f8fb;
      --line: #e4e8ef;
      --white: #ffffff;
      --accent: #3155d9;
      --accent-dark: #2443b2;
      --accent-soft: #eef2ff;
      --green: #147a55;
      --shadow: 0 18px 50px rgba(28, 43, 76, 0.12);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-width: 320px;
      background: var(--soft);
    }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% -10%, rgba(225, 231, 255, 0.9), transparent 36rem),
        var(--soft);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

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

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 18px;
      font-weight: 750;
      letter-spacing: -0.03em;
    }

    .brand-mark {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      color: white;
      background: var(--accent);
      border-radius: 9px;
      font-size: 15px;
      font-weight: 800;
      box-shadow: 0 5px 12px rgba(49, 85, 217, 0.24);
    }

    .header-link {
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }

    .header-link:hover {
      color: var(--ink);
    }

    main {
      padding: 72px 0 100px;
    }

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

    .eyebrow {
      display: inline-block;
      margin-bottom: 18px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.04;
      letter-spacing: -0.055em;
      font-weight: 800;
    }

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

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

    .card {
      display: flex;
      flex-direction: column;
      min-height: 555px;
      padding: 30px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .card.featured {
      position: relative;
      z-index: 1;
      margin-top: -14px;
      margin-bottom: -14px;
      padding: 44px 30px 30px;
      background: var(--white);
      border: 1px solid #aebcf1;
      box-shadow: var(--shadow);
    }

    .featured-label {
      position: absolute;
      top: 0;
      left: 30px;
      transform: translateY(-50%);
      padding: 7px 12px;
      color: var(--accent-dark);
      background: var(--accent-soft);
      border: 1px solid #d6defc;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tier-name {
      margin: 0 0 13px;
      font-size: 19px;
      font-weight: 750;
      letter-spacing: -0.02em;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      min-height: 58px;
      margin-bottom: 10px;
    }

    .price-amount {
      font-size: 46px;
      line-height: 1;
      letter-spacing: -0.06em;
      font-weight: 800;
    }

    .price-period {
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }

    .positioning {
      min-height: 48px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .divider {
      height: 1px;
      margin: 26px 0 24px;
      background: var(--line);
    }

    .feature-heading {
      margin: 0 0 17px;
      font-size: 12px;
      color: var(--ink);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

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

    .features li {
      position: relative;
      padding-left: 25px;
      color: #475467;
      font-size: 14px;
      line-height: 1.4;
    }

    .features li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: -1px;
      color: var(--green);
      font-size: 15px;
      font-weight: 800;
    }

    .cta {
      width: 100%;
      min-height: 47px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      padding: 12px 18px;
      border: 1px solid #cbd2de;
      border-radius: 10px;
      background: var(--white);
      color: var(--ink);
      font-size: 14px;
      font-weight: 750;
      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

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

    .featured .cta {
      color: white;
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 7px 16px rgba(49, 85, 217, 0.2);
    }

    .featured .cta:hover {
      background: var(--accent-dark);
      border-color: var(--accent-dark);
    }

    .fine-print {
      margin: 42px 0 0;
      color: #8490a3;
      text-align: center;
      font-size: 13px;
    }

    @media (max-width: 800px) {
      main {
        padding-top: 48px;
      }

      .intro {
        margin-bottom: 44px;
      }

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

      .card,
      .card.featured {
        min-height: auto;
        margin: 0;
        padding: 30px;
      }

      .card.featured {
        padding-top: 44px;
      }

      .positioning {
        min-height: auto;
      }

      .divider {
        margin-top: 24px;
      }

      .features {
        margin-bottom: 34px;
      }
    }

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

      .site-header {
        height: 66px;
      }

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

      main {
        padding-bottom: 65px;
      }

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

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

      .featured-label {
        left: 23px;
      }
    }
  </style>
</head>
<body>
  <div class="page">
    <header class="site-header">
      <a class="brand" href="#" aria-label="Forge home">
        <span class="brand-mark" aria-hidden="true">F</span>
        <span>forge</span>
      </a>
      <a class="header-link" href="#">Sign in</a>
    </header>

    <main>
      <section class="intro" aria-labelledby="page-title">
        <span class="eyebrow">Pricing that scales with you</span>
        <h1 id="page-title">Ship better software, together.</h1>
        <p>Everything your team needs to build, review, and release with confidence — without the enterprise complexity.</p>
      </section>

      <section class="pricing-grid" aria-label="Pricing plans">
        <article class="card">
          <h2 class="tier-name">Hobby</h2>
          <div class="price">
            <span class="price-amount">$0</span>
            <span class="price-period">forever</span>
          </div>
          <p class="positioning">A focused workspace for personal projects and experiments.</p>
          <div class="divider"></div>
          <h3 class="feature-heading">Includes</h3>
          <ul class="features">
            <li>1 private project</li>
            <li>Up to 3 collaborators</li>
            <li>Basic issue tracking</li>
            <li>Community support</li>
          </ul>
          <a class="cta" href="#">Start for free</a>
        </article>

        <article class="card featured">
          <span class="featured-label">Recommended</span>
          <h2 class="tier-name">Pro</h2>
          <div class="price">
            <span class="price-amount">$20</span>
            <span class="price-period">/ month</span>
          </div>
          <p class="positioning">The complete toolkit for independent developers and small teams.</p>
          <div class="divider"></div>
          <h3 class="feature-heading">Everything in Hobby, plus</h3>
          <ul class="features">
            <li>Unlimited private projects</li>
            <li>Advanced code review</li>
            <li>Automated CI checks</li>
            <li>Priority email support</li>
          </ul>
          <a class="cta" href="#">Choose Pro</a>
        </article>

        <article class="card">
          <h2 class="tier-name">Team</h2>
          <div class="price">
            <span class="price-amount">$60</span>
            <span class="price-period">/ seat / month</span>
          </div>
          <p class="positioning">A shared command center for growing engineering teams.</p>
          <div class="divider"></div>
          <h3 class="feature-heading">Everything in Pro, plus</h3>
          <ul class="features">
            <li>Unlimited team members</li>
            <li>Roles and permissions</li>
            <li>Team analytics and insights</li>
            <li>Dedicated success support</li>
          </ul>
          <a class="cta" href="#">Talk to our team</a>
        </article>
      </section>

      <p class="fine-print">All plans include secure cloud hosting and a 14-day Pro trial. No credit card required.</p>
    </main>
  </div>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-luna",
  "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": "cb3bc47b-271f-4c9b-a222-cd70fff1d39b"
}