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 a powerful developer tool.">
  <title>Pricing | Build Better, Faster</title>
  <style>
    :root {
      color-scheme: light;
      --bg: #f7f8fb;
      --surface: #ffffff;
      --text: #111827;
      --muted: #64748b;
      --border: #dfe3ea;
      --accent: #5b5bd6;
      --accent-dark: #4848bd;
      --accent-soft: #f0f0ff;
      --success: #16835f;
      --shadow: 0 18px 50px rgba(30, 41, 59, 0.08);
      --shadow-strong: 0 24px 60px rgba(63, 63, 150, 0.16);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

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

    .site-header,
    main,
    .site-footer {
      width: min(1180px, calc(100% - 40px));
      margin-inline: auto;
    }

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

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

    .brand-mark {
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border-radius: 9px;
      background: var(--text);
      color: white;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.78rem;
      font-weight: 700;
      box-shadow: 0 6px 16px rgba(17, 24, 39, 0.15);
    }

    .header-link {
      color: #475569;
      font-size: 0.92rem;
      font-weight: 650;
      text-decoration: none;
    }

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

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

    .eyebrow {
      display: inline-block;
      margin: 0 0 18px;
      color: var(--accent-dark);
      font-size: 0.77rem;
      font-weight: 750;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 700px;
      margin: 0 auto;
      font-size: clamp(2.45rem, 6vw, 4.5rem);
      line-height: 1.04;
      letter-spacing: -0.055em;
    }

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

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

    .plan {
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 32px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow);
    }

    .plan--featured {
      z-index: 1;
      padding-top: 38px;
      border-color: rgba(91, 91, 214, 0.52);
      box-shadow: var(--shadow-strong);
      transform: translateY(-10px);
    }

    .plan--featured::before {
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: var(--accent);
      content: "";
    }

    .plan-name {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 750;
      letter-spacing: -0.02em;
    }

    .price {
      display: flex;
      min-height: 67px;
      align-items: baseline;
      gap: 6px;
      margin: 18px 0 9px;
    }

    .price strong {
      font-size: clamp(2.6rem, 4vw, 3.35rem);
      line-height: 1;
      letter-spacing: -0.055em;
    }

    .price span {
      max-width: 75px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.3;
    }

    .positioning {
      min-height: 48px;
      margin: 0 0 26px;
      color: var(--muted);
      font-size: 0.96rem;
    }

    .cta {
      display: inline-flex;
      width: 100%;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      border: 1px solid #cfd5df;
      border-radius: 11px;
      background: var(--surface);
      color: var(--text);
      font-size: 0.94rem;
      font-weight: 700;
      text-decoration: none;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .cta:hover {
      border-color: #9ca6b5;
      background: #f8fafc;
      transform: translateY(-1px);
    }

    .plan--featured .cta {
      border-color: var(--accent);
      background: var(--accent);
      color: white;
      box-shadow: 0 8px 20px rgba(91, 91, 214, 0.22);
    }

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

    .divider {
      height: 1px;
      margin: 30px 0 25px;
      background: #e8ebf0;
    }

    .included {
      margin: 0 0 15px;
      color: #475569;
      font-size: 0.77rem;
      font-weight: 750;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

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

    .features li {
      position: relative;
      padding-left: 27px;
      color: #334155;
      font-size: 0.93rem;
    }

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

    .site-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 27px 0 38px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.84rem;
    }

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

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

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

    a:focus-visible {
      outline: 3px solid rgba(91, 91, 214, 0.35);
      outline-offset: 3px;
    }

    @media (max-width: 850px) {
      .hero {
        margin-top: 55px;
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
        gap: 18px;
      }

      .plan--featured {
        order: -1;
        transform: none;
      }

      .positioning {
        min-height: 0;
      }
    }

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

      .site-header {
        min-height: 66px;
      }

      .header-link {
        display: none;
      }

      .hero {
        margin: 47px auto 38px;
      }

      .hero p {
        margin-top: 18px;
      }

      .pricing-grid {
        padding-bottom: 55px;
      }

      .plan {
        padding: 27px 24px;
        border-radius: 17px;
      }

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

      .site-footer {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @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="Stackforge home">
      <span class="brand-mark" aria-hidden="true">&lt;/&gt;</span>
      <span>Stackforge</span>
    </a>
    <a class="header-link" href="#pricing">View pricing</a>
  </header>

  <main>
    <section class="hero" aria-labelledby="page-title">
      <p class="eyebrow">Simple pricing</p>
      <h1 id="page-title">Ship more. Manage less.</h1>
      <p>Everything you need to build, test, and deploy reliable software—without unpredictable bills or complicated plans.</p>
    </section>

    <section class="pricing-grid" id="pricing" aria-label="Pricing plans">
      <article class="plan">
        <h2 class="plan-name">Hobby</h2>
        <div class="price">
          <strong>$0</strong>
          <span>forever</span>
        </div>
        <p class="positioning">For personal projects and exploring new ideas.</p>
        <a class="cta" href="#get-started">Start building free</a>
        <div class="divider" aria-hidden="true"></div>
        <p class="included">What's included</p>
        <ul class="features">
          <li>3 active projects</li>
          <li>5,000 build minutes per month</li>
          <li>Community support</li>
          <li>Automatic preview environments</li>
          <li>7-day log retention</li>
        </ul>
      </article>

      <article class="plan plan--featured">
        <h2 class="plan-name">Pro</h2>
        <div class="price">
          <strong>$20</strong>
          <span>per month</span>
        </div>
        <p class="positioning">For professional developers shipping production apps.</p>
        <a class="cta" href="#start-pro">Start with Pro</a>
        <div class="divider" aria-hidden="true"></div>
        <p class="included">Everything in Hobby, plus</p>
        <ul class="features">
          <li>Unlimited projects</li>
          <li>50,000 build minutes per month</li>
          <li>Advanced analytics and insights</li>
          <li>Custom domains and environments</li>
          <li>30-day log retention</li>
          <li>Priority email support</li>
        </ul>
      </article>

      <article class="plan">
        <h2 class="plan-name">Team</h2>
        <div class="price">
          <strong>$60</strong>
          <span>per seat / month</span>
        </div>
        <p class="positioning">For teams that need control, scale, and collaboration.</p>
        <a class="cta" href="#start-team">Create a team</a>
        <div class="divider" aria-hidden="true"></div>
        <p class="included">Everything in Pro, plus</p>
        <ul class="features">
          <li>Shared team workspaces</li>
          <li>Role-based access controls</li>
          <li>Single sign-on (SSO)</li>
          <li>Audit logs and deployment policies</li>
          <li>90-day log retention</li>
          <li>Dedicated technical support</li>
        </ul>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <span>© 2025 Stackforge, Inc.</span>
    <nav class="footer-links" aria-label="Footer">
      <a href="#terms">Terms</a>
      <a href="#privacy">Privacy</a>
      <a href="#contact">Contact</a>
    </nav>
  </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"
}