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">
  <meta name="description" content="Simple, transparent pricing for every stage of development.">
  <title>Pricing — Forge</title>
  <style>
    :root {
      --background: #f7f8fb;
      --surface: #ffffff;
      --surface-dark: #111827;
      --text: #172033;
      --muted: #667085;
      --border: #dfe3ea;
      --accent: #5b5ce2;
      --accent-dark: #4849c8;
      --accent-soft: #eeeeff;
      --success: #17845b;
      --shadow: 0 18px 48px rgba(24, 32, 51, 0.08);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      color-scheme: light;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      background:
        radial-gradient(circle at 50% 0%, rgba(91, 92, 226, 0.09), transparent 31rem),
        var(--background);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
    }

    .site-header {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      padding: 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

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

    .brand-mark {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: var(--surface-dark);
      color: #fff;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 5px 14px rgba(17, 24, 39, 0.18);
    }

    .header-link {
      color: var(--muted);
      font-size: 14px;
      font-weight: 650;
      text-decoration: none;
    }

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

    main {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      padding: 62px 0 84px;
    }

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

    .eyebrow {
      margin: 0 0 14px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(38px, 6vw, 64px);
      line-height: 1.06;
      letter-spacing: -0.055em;
    }

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

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

    .plan {
      position: relative;
      display: flex;
      min-height: 500px;
      flex-direction: column;
      padding: 31px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.93);
      box-shadow: 0 6px 22px rgba(24, 32, 51, 0.035);
    }

    .plan--featured {
      border-color: rgba(91, 92, 226, 0.62);
      background: var(--surface);
      box-shadow: var(--shadow), 0 0 0 1px rgba(91, 92, 226, 0.08);
      transform: translateY(-12px);
    }

    .plan--featured::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), #8b5cf6);
    }

    .plan-name {
      margin: 0 0 18px;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: -0.025em;
    }

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

    .price-value {
      font-size: 46px;
      font-weight: 760;
      line-height: 1;
      letter-spacing: -0.055em;
    }

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

    .positioning {
      min-height: 52px;
      margin: 0 0 25px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
    }

    .divider {
      height: 1px;
      margin: 0 0 25px;
      border: 0;
      background: var(--border);
    }

    .feature-heading {
      margin: 0 0 16px;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }

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

    .features li {
      position: relative;
      padding-left: 26px;
      color: #465168;
      font-size: 14px;
      line-height: 1.45;
    }

    .features li::before {
      content: "✓";
      position: absolute;
      top: 0;
      left: 0;
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eaf8f2;
      color: var(--success);
      font-size: 11px;
      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 #cfd5df;
      border-radius: 10px;
      background: var(--surface);
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
    }

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

    .cta:focus-visible,
    .brand:focus-visible,
    .header-link:focus-visible {
      outline: 3px solid rgba(91, 92, 226, 0.35);
      outline-offset: 3px;
    }

    .plan--featured .cta {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
      box-shadow: 0 8px 20px rgba(91, 92, 226, 0.23);
    }

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

    .fine-print {
      margin: 26px auto 0;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    footer {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      padding: 24px 0 36px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    @media (max-width: 860px) {
      main {
        padding-top: 40px;
      }

      .hero {
        margin-bottom: 42px;
      }

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

      .plan {
        min-height: auto;
      }

      .plan--featured {
        transform: none;
      }

      .positioning {
        min-height: 0;
      }
    }

    @media (max-width: 520px) {
      .site-header,
      main,
      footer {
        width: min(100% - 28px, 1120px);
      }

      .site-header {
        padding-top: 18px;
      }

      main {
        padding-bottom: 60px;
      }

      .hero {
        margin-bottom: 34px;
      }

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

      .plan {
        padding: 26px 23px;
      }

      .price-value {
        font-size: 42px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .cta {
        transition: none;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <a class="brand" href="#" aria-label="Forge home">
      <span class="brand-mark" aria-hidden="true">&gt;_</span>
      <span>Forge</span>
    </a>
    <a class="header-link" href="#">Sign in</a>
  </header>

  <main>
    <section class="hero" aria-labelledby="pricing-title">
      <p class="eyebrow">Simple pricing</p>
      <h1 id="pricing-title">Ship better software, faster.</h1>
      <p class="hero-copy">
        Start free, then scale as your projects and team grow. Every plan includes the core developer workflow.
      </p>
    </section>

    <section class="pricing-grid" aria-label="Pricing plans">
      <article class="plan">
        <h2 class="plan-name">Hobby</h2>
        <div class="price">
          <span class="price-value">$0</span>
          <span class="price-period">forever</span>
        </div>
        <p class="positioning">For personal projects, prototypes, and learning.</p>
        <hr class="divider">
        <p class="feature-heading">What’s included</p>
        <ul class="features">
          <li>3 active projects</li>
          <li>5,000 build minutes per month</li>
          <li>Community integrations</li>
          <li>7-day log retention</li>
          <li>Community support</li>
        </ul>
        <a class="cta" href="#">Start for free</a>
      </article>

      <article class="plan plan--featured">
        <h2 class="plan-name">Pro</h2>
        <div class="price">
          <span class="price-value">$20</span>
          <span class="price-period">/ month</span>
        </div>
        <p class="positioning">For professional developers shipping production apps.</p>
        <hr class="divider">
        <p class="feature-heading">Everything in Hobby, plus</p>
        <ul class="features">
          <li>Unlimited projects</li>
          <li>50,000 build minutes per month</li>
          <li>Preview environments</li>
          <li>30-day log retention</li>
          <li>Priority email support</li>
        </ul>
        <a class="cta" href="#">Start Pro trial</a>
      </article>

      <article class="plan">
        <h2 class="plan-name">Team</h2>
        <div class="price">
          <span class="price-value">$60</span>
          <span class="price-period">/ seat / month</span>
        </div>
        <p class="positioning">For teams that need control, scale, and collaboration.</p>
        <hr class="divider">
        <p class="feature-heading">Everything in Pro, plus</p>
        <ul class="features">
          <li>Shared team workspaces</li>
          <li>Role-based access controls</li>
          <li>SSO and audit logs</li>
          <li>90-day log retention</li>
          <li>Dedicated onboarding</li>
        </ul>
        <a class="cta" href="#">Start with Team</a>
      </article>
    </section>

    <p class="fine-print">All paid plans include a 14-day free trial. No credit card required.</p>
  </main>

  <footer>
    Prices shown in USD. Cancel or change plans at any time.
  </footer>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-sol",
  "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": "90a83792-ef53-41af-8207-229c287092e6"
}