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" />
  <title>Pricing - Dev Tool</title>
  <style>
    :root{
      --bg: #0b1220;
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.08);
      --stroke: rgba(255,255,255,.12);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --muted2: rgba(255,255,255,.58);
      --shadow: 0 18px 45px rgba(0,0,0,.35);
      --shadow2: 0 10px 28px rgba(0,0,0,.28);
      --accent: #6ee7ff;
      --accent2: #7c3aed;
      --good: #34d399;
      --focus: rgba(110,231,255,.35);
      --radius: 18px;
    }

    *{ box-sizing: border-box; }
    html, body{ height: 100%; }
    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(900px 500px at 15% -10%, rgba(124,58,237,.35), transparent 60%),
        radial-gradient(800px 500px at 90% 0%, rgba(110,231,255,.28), transparent 55%),
        radial-gradient(600px 350px at 60% 80%, rgba(52,211,153,.18), transparent 55%),
        linear-gradient(180deg, #070b14 0%, #0b1220 55%, #070b14 100%);
      color: var(--text);
    }

    .wrap{
      width: min(1100px, calc(100% - 40px));
      margin: 0 auto;
      padding: 56px 0 64px;
    }

    header{
      display: grid;
      gap: 10px;
      margin-bottom: 22px;
      text-align: center;
    }

    .eyebrow{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      border-radius: 999px;
      color: var(--muted);
      width: fit-content;
      margin: 0 auto;
      font-size: 13px;
      letter-spacing: .2px;
    }
    .dot{
      width: 8px; height: 8px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      box-shadow: 0 0 0 4px rgba(110,231,255,.12);
    }

    h1{
      margin: 0;
      font-size: clamp(26px, 3.2vw, 40px);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .sub{
      margin: 0 auto;
      max-width: 64ch;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.6;
    }

    .grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 28px;
    }

    .card{
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      padding: 22px 20px 18px;
      box-shadow: var(--shadow2);
      display: grid;
      gap: 14px;
      overflow: hidden;
    }

    .card::before{
      content: "";
      position: absolute;
      inset: -2px;
      background:
        radial-gradient(500px 180px at 15% 0%, rgba(110,231,255,.16), transparent 55%),
        radial-gradient(420px 160px at 85% 20%, rgba(124,58,237,.13), transparent 55%);
      opacity: .8;
      pointer-events: none;
      transform: translateZ(0);
      z-index: 0;
    }
    .card > *{ position: relative; z-index: 1; }

    .tier{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 2px;
    }
    .tier h2{
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.01em;
    }
    .price{
      text-align: right;
      line-height: 1.05;
      min-width: 120px;
    }
    .price .amount{
      font-size: 28px;
      font-weight: 750;
      letter-spacing: -0.03em;
    }
    .price .per{
      display: block;
      margin-top: 6px;
      color: var(--muted2);
      font-size: 12.5px;
      letter-spacing: .15px;
    }

    .statement{
      margin: 0;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.5;
    }

    .features{
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .features li{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(255,255,255,.80);
      font-size: 13.5px;
      line-height: 1.35;
    }
    .check{
      width: 18px; height: 18px;
      border-radius: 6px;
      background: rgba(52,211,153,.14);
      border: 1px solid rgba(52,211,153,.35);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 18px;
      margin-top: 1px;
    }
    .check svg{ display:block; }
    .note{
      color: var(--muted2);
      font-size: 12.5px;
      margin-top: 2px;
    }

    .ctaRow{
      display: grid;
      gap: 10px;
      margin-top: 2px;
    }

    .btn{
      appearance: none;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: var(--text);
      padding: 12px 14px;
      border-radius: 12px;
      font-weight: 650;
      font-size: 14px;
      letter-spacing: .01em;
      cursor: pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
      text-align: center;
      user-select: none;
    }
    .btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.25);
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
    }
    .btn:active{
      transform: translateY(0);
      box-shadow: none;
    }
    .btn:focus-visible{
      outline: 3px solid var(--focus);
      outline-offset: 2px;
    }

    .btnPrimary{
      border-color: rgba(110,231,255,.35);
      background: linear-gradient(180deg, rgba(110,231,255,.22), rgba(124,58,237,.14));
      box-shadow: 0 18px 40px rgba(110,231,255,.12);
    }
    .btnPrimary:hover{
      border-color: rgba(110,231,255,.55);
      background: linear-gradient(180deg, rgba(110,231,255,.28), rgba(124,58,237,.18));
    }

    /* Emphasize middle tier subtly */
    .card.featured{
      border-color: rgba(110,231,255,.35);
      background: linear-gradient(180deg, rgba(110,231,255,.11), rgba(124,58,237,.06));
      box-shadow: var(--shadow);
      transform: translateY(-6px);
    }
    .card.featured::before{
      opacity: 1;
      background:
        radial-gradient(650px 220px at 20% 0%, rgba(110,231,255,.28), transparent 55%),
        radial-gradient(520px 210px at 85% 10%, rgba(124,58,237,.25), transparent 55%),
        radial-gradient(420px 200px at 50% 120%, rgba(52,211,153,.14), transparent 58%);
    }
    .card.featured .tier h2{
      letter-spacing: -0.015em;
    }
    .card.featured .statement{
      color: rgba(255,255,255,.84);
    }
    .card.featured .btn{
      border-color: rgba(110,231,255,.45);
    }

    footer{
      margin-top: 22px;
      text-align: center;
      color: var(--muted2);
      font-size: 12.8px;
      line-height: 1.55;
    }
    .divider{
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      margin: 22px auto 0;
      width: min(720px, 100%);
    }

    /* Mobile */
    @media (max-width: 880px){
      .grid{ grid-template-columns: 1fr; gap: 14px; }
      .card{ padding: 20px 18px 16px; }
      .card.featured{ transform: none; }
      .price .amount{ font-size: 26px; }
      .tier{ margin-bottom: 0; }
      header{ margin-bottom: 12px; }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <div class="eyebrow"><span class="dot" aria-hidden="true"></span> Built for shipping reliable code</div>
      <h1>Pricing that scales with your workflow</h1>
      <p class="sub">Choose the plan that fits your stage—from individual experiments to team-wide governance and performance.</p>
    </header>

    <section class="grid" aria-label="Pricing tiers">
      <!-- Hobby -->
      <article class="card" aria-label="Hobby plan">
        <div class="tier">
          <h2>Hobby</h2>
          <div class="price">
            <span class="amount">$0</span>
            <span class="per">forever</span>
          </div>
        </div>
        <p class="statement">For personal projects and quick trials.</p>

        <ul class="features">
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Core CLI + local dashboard
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Up to 3 projects
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Basic checks & summaries
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Community support
          </li>
        </ul>

        <div class="ctaRow">
          <a class="btn" href="#" aria-label="Get started with Hobby">Start with Hobby</a>
          <div class="note">No card required.</div>
        </div>
      </article>

      <!-- Pro -->
      <article class="card featured" aria-label="Pro plan">
        <div class="tier">
          <h2>Pro</h2>
          <div class="price">
            <span class="amount">$20</span>
            <span class="per">per month</span>
          </div>
        </div>
        <p class="statement">For developers who want faster feedback and deeper insights.</p>

        <ul class="features">
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Unlimited projects
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Advanced rule sets + configuration
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            CI-friendly output for pull requests
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Priority email support
          </li>
        </ul>

        <div class="ctaRow">
          <a class="btn btnPrimary" href="#" aria-label="Upgrade to Pro">Upgrade to Pro</a>
          <div class="note">Best value for power users.</div>
        </div>
      </article>

      <!-- Team -->
      <article class="card" aria-label="Team plan">
        <div class="tier">
          <h2>Team</h2>
          <div class="price">
            <span class="amount">$60</span>
            <span class="per">per seat per month</span>
          </div>
        </div>
        <p class="statement">For teams that need governance, collaboration, and controls.</p>

        <ul class="features">
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Team workspaces + roles
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Organization-wide policy templates
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Audit trails and usage insights
          </li>
          <li>
            <span class="check" aria-hidden="true">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2 3.2L5.1 8.3L1.8 5" stroke="rgba(52,211,153,.95)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            Dedicated onboarding & priority support
          </li>
        </ul>

        <div class="ctaRow">
          <a class="btn" href="#" aria-label="Contact sales for Team plan">Contact sales</a>
          <div class="note">Volume discounts available.</div>
        </div>
      </article>
    </section>

    <div class="divider" role="separator" aria-hidden="true"></div>
    <footer>
      Tip: Choose Pro if you want advanced checks today; choose Team when you need consistent standards across the organization.
    </footer>
  </div>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.4-nano",
  "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": "68b9ca2e-24f6-4b26-96f8-029a2a0acdf1"
}