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 {
      --ink: #162025;
      --muted: #647179;
      --line: #dce4e1;
      --paper: #fbfcfa;
      --mint: #dff5eb;
      --green: #187654;
      --green-dark: #105c40;
      --navy: #142b36;
      --white: #ffffff;
      --soft: #f1f6f3;
      --shadow: 0 20px 45px rgba(20, 43, 54, 0.11);
    }

    * {
      box-sizing: border-box;
    }

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

    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 5%, rgba(203, 241, 222, 0.52), transparent 24rem),
        radial-gradient(circle at 92% 16%, rgba(221, 236, 245, 0.62), transparent 26rem),
        var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

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

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

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

    .brand-mark {
      display: grid;
      width: 29px;
      height: 29px;
      place-items: center;
      color: var(--white);
      background: var(--green);
      border-radius: 8px 8px 8px 2px;
      box-shadow: 4px 4px 0 #b9e5d0;
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
    }

    .header-link {
      color: #46545b;
      font-size: 0.9rem;
      font-weight: 650;
      text-decoration: none;
    }

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

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

    .eyebrow {
      margin: 0 0 15px;
      color: var(--green-dark);
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      color: var(--navy);
      font-size: clamp(2.35rem, 5vw, 4.25rem);
      font-weight: 780;
      letter-spacing: -0.065em;
      line-height: 0.99;
    }

    .intro-copy {
      max-width: 555px;
      margin: 21px auto 0;
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.6;
    }

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

    .plan {
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 31px 29px 28px;
      background: rgba(255, 255, 255, 0.84);
      border: 1px solid var(--line);
      border-radius: 18px;
    }

    .plan--pro {
      z-index: 1;
      margin: -12px 0;
      padding-top: 43px;
      padding-bottom: 40px;
      background: var(--white);
      border-color: #90cdb2;
      box-shadow: var(--shadow);
    }

    .plan--pro::before {
      position: absolute;
      top: 0;
      right: 28px;
      left: 28px;
      height: 4px;
      background: var(--green);
      border-radius: 0 0 5px 5px;
      content: "";
    }

    .plan-name {
      margin: 0;
      color: var(--navy);
      font-size: 1.25rem;
      font-weight: 760;
      letter-spacing: -0.035em;
    }

    .plan-description {
      min-height: 45px;
      margin: 10px 0 25px;
      color: var(--muted);
      font-size: 0.91rem;
      line-height: 1.5;
    }

    .price-row {
      display: flex;
      align-items: baseline;
      min-height: 50px;
      color: var(--navy);
    }

    .currency {
      align-self: flex-start;
      margin: 7px 3px 0 0;
      font-size: 1.1rem;
      font-weight: 740;
    }

    .price {
      font-size: 3rem;
      font-weight: 770;
      letter-spacing: -0.07em;
      line-height: 0.9;
    }

    .price-free {
      font-size: 2.6rem;
    }

    .period {
      margin-left: 7px;
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 600;
    }

    .billing-note {
      min-height: 22px;
      margin: 11px 0 23px;
      color: #78858a;
      font-size: 0.79rem;
      line-height: 1.35;
    }

    .feature-divider {
      width: 100%;
      height: 1px;
      margin-bottom: 21px;
      background: var(--line);
    }

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

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

    .features li::before {
      position: absolute;
      top: 0.1em;
      left: 0;
      display: grid;
      width: 16px;
      height: 16px;
      place-items: center;
      color: var(--green-dark);
      background: var(--mint);
      border-radius: 50%;
      content: "✓";
      font-size: 0.66rem;
      font-weight: 900;
    }

    .features strong {
      color: var(--navy);
      font-weight: 730;
    }

    .cta {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      padding: 11px 18px;
      border: 1px solid #b7c4bf;
      border-radius: 9px;
      color: var(--navy);
      background: var(--white);
      font-size: 0.9rem;
      font-weight: 740;
      text-decoration: none;
      transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
    }

    .cta:hover {
      border-color: var(--green);
      background: var(--soft);
      transform: translateY(-1px);
    }

    .plan--pro .cta {
      border-color: var(--green);
      color: var(--white);
      background: var(--green);
      box-shadow: 0 7px 14px rgba(24, 118, 84, 0.2);
    }

    .plan--pro .cta:hover {
      border-color: var(--green-dark);
      background: var(--green-dark);
    }

    .trust-line {
      margin: 48px auto 0;
      color: #78858a;
      font-size: 0.86rem;
      line-height: 1.5;
      text-align: center;
    }

    .trust-line span {
      margin: 0 8px;
      color: #bcc8c3;
    }

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

      .intro {
        margin: 64px auto 39px;
      }

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

      .plan--pro {
        margin: 0;
        padding-top: 37px;
        padding-bottom: 30px;
      }

      .plan-description {
        min-height: auto;
      }

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

    @media (max-width: 440px) {
      .page {
        width: min(100% - 24px, 560px);
      }

      .intro {
        margin-top: 52px;
      }

      .plan {
        padding: 27px 23px 24px;
      }

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

      .trust-line span {
        display: none;
      }

      .trust-line {
        display: grid;
        gap: 4px;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <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="#pricing">Sign in</a>
    </header>

    <section class="intro" aria-labelledby="page-title">
      <p class="eyebrow">Simple, honest pricing</p>
      <h1 id="page-title">Ship more. Manage less.</h1>
      <p class="intro-copy">
        Forge gives your team one calm workspace for builds, deploys, and the details in between.
      </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 first ideas.</p>
        <div class="price-row">
          <span class="price price-free">Free</span>
        </div>
        <p class="billing-note">No credit card required</p>
        <div class="feature-divider"></div>
        <ul class="features">
          <li><strong>3 projects</strong></li>
          <li>Public and private repositories</li>
          <li><strong>500 build minutes</strong> per month</li>
          <li>Automatic preview deployments</li>
          <li>Community support</li>
        </ul>
        <a class="cta" href="#get-started">Start building free</a>
      </article>

      <article class="plan plan--pro">
        <h2 class="plan-name">Pro</h2>
        <p class="plan-description">For independent developers shipping seriously.</p>
        <div class="price-row">
          <span class="currency">$</span>
          <span class="price">20</span>
          <span class="period">/ month</span>
        </div>
        <p class="billing-note">Per developer, billed monthly</p>
        <div class="feature-divider"></div>
        <ul class="features">
          <li><strong>Unlimited projects</strong></li>
          <li><strong>5,000 build minutes</strong> per month</li>
          <li>Custom domains and environments</li>
          <li>Deploy rollbacks and audit history</li>
          <li>Priority email support</li>
        </ul>
        <a class="cta" href="#start-pro">Start Pro trial</a>
      </article>

      <article class="plan">
        <h2 class="plan-name">Team</h2>
        <p class="plan-description">For teams that need control at scale.</p>
        <div class="price-row">
          <span class="currency">$</span>
          <span class="price">60</span>
          <span class="period">/ seat / month</span>
        </div>
        <p class="billing-note">Billed monthly, minimum 3 seats</p>
        <div class="feature-divider"></div>
        <ul class="features">
          <li>Everything in <strong>Pro</strong></li>
          <li><strong>25,000 build minutes</strong> per month</li>
          <li>Shared team workspaces</li>
          <li>SAML SSO and SCIM provisioning</li>
          <li>Role-based access and priority support</li>
        </ul>
        <a class="cta" href="#contact-sales">Talk to sales</a>
      </article>
    </section>

    <p class="trust-line">
      Change or cancel any time <span>•</span> Secure billing <span>•</span> 14-day Pro trial
    </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"
}