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</title>
  <style>
    :root{
      --bg: #0b1020;
      --panel: rgba(255,255,255,.06);
      --panel-2: rgba(255,255,255,.08);
      --stroke: rgba(255,255,255,.10);
      --stroke-2: rgba(255,255,255,.16);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --faint: rgba(255,255,255,.55);
      --brand: #7c5cff; /* calm indigo */
      --brand-2: #59d4ff; /* subtle cyan */
      --good: #35d07f;
      --shadow: 0 18px 50px rgba(0,0,0,.45);
      --shadow-2: 0 12px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-2: 14px;
    }

    *{ box-sizing: border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(1000px 600px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(89,212,255,.22), transparent 55%),
        radial-gradient(800px 600px at 70% 95%, rgba(124,92,255,.18), transparent 60%),
        linear-gradient(180deg, #0b1020 0%, #070a14 100%);
      min-height: 100vh;
    }

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

    .wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 56px 18px 64px;
    }

    .top{
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 26px;
    }

    .title h1{
      margin: 0;
      font-size: clamp(26px, 4vw, 40px);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .title p{
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 60ch;
      line-height: 1.5;
      font-size: 15.5px;
    }

    .note{
      color: var(--faint);
      font-size: 13.5px;
      line-height: 1.45;
      text-align: right;
    }

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

    .card{
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow-2);
      display: flex;
      flex-direction: column;
      min-height: 420px;
      overflow: hidden;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(600px 160px at 20% 0%, rgba(124,92,255,.28), transparent 60%),
        radial-gradient(420px 160px at 80% 0%, rgba(89,212,255,.22), transparent 55%);
      opacity: .0;
      transition: opacity .18s ease;
      pointer-events:none;
    }

    .card:hover{
      transform: translateY(-2px);
      border-color: var(--stroke-2);
      background: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.045) 100%);
      box-shadow: var(--shadow);
    }
    .card:hover::before{ opacity: .9; }

    .card-inner{ position: relative; z-index: 1; display:flex; flex-direction:column; height:100%; }

    .tier{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .tier-name{
      font-weight: 720;
      letter-spacing: .01em;
      font-size: 18px;
    }
    .pill{
      font-size: 12.5px;
      color: rgba(255,255,255,.82);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      padding: 7px 10px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .price{
      margin-top: 10px;
      display:flex;
      align-items: baseline;
      gap: 8px;
    }
    .amount{
      font-size: 38px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .per{
      color: var(--muted);
      font-size: 14.5px;
    }

    .statement{
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 15px;
    }

    .divider{
      margin: 18px 0 16px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
      border: 0;
    }

    ul.features{
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
      color: rgba(255,255,255,.86);
      font-size: 14.5px;
      line-height: 1.35;
    }
    li.feature{
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .check{
      width: 18px;
      height: 18px;
      border-radius: 6px;
      flex: 0 0 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(53,208,127,.12);
      border: 1px solid rgba(53,208,127,.25);
      margin-top: 1px;
    }
    .check svg{ display:block; }

    .cta-row{
      margin-top: auto;
      padding-top: 16px;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }

    .btn{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      width: 100%;
      border-radius: 12px;
      padding: 12px 14px;
      font-weight: 700;
      letter-spacing: .01em;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      box-shadow: 0 10px 22px rgba(0,0,0,.25);
      transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.26);
      background: rgba(255,255,255,.09);
      box-shadow: 0 14px 28px rgba(0,0,0,.32);
    }

    .btn-primary{
      border-color: rgba(124,92,255,.55);
      background: linear-gradient(180deg, rgba(124,92,255,.26) 0%, rgba(124,92,255,.16) 100%);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(240px 120px at 20% 10%, rgba(89,212,255,.30), transparent 55%),
        radial-gradient(240px 120px at 80% 0%, rgba(124,92,255,.55), transparent 55%);
      opacity: .9;
      pointer-events:none;
    }
    .btn-primary span{ position: relative; z-index: 1; }
    .btn-primary svg{ position: relative; z-index: 1; }

    .fineprint{
      color: var(--faint);
      font-size: 12.8px;
      line-height: 1.4;
      text-align: center;
    }

    /* Emphasize the middle tier without a garish badge */
    .card.featured{
      border-color: rgba(124,92,255,.52);
      background: linear-gradient(180deg, rgba(124,92,255,.16) 0%, rgba(255,255,255,.045) 100%);
      box-shadow: 0 22px 65px rgba(124,92,255,.16), 0 16px 45px rgba(0,0,0,.35);
      transform: translateY(-4px);
    }
    .card.featured::before{ opacity: .95; }
    .card.featured:hover{
      transform: translateY(-6px);
      border-color: rgba(124,92,255,.70);
      box-shadow: 0 28px 80px rgba(124,92,255,.22), 0 18px 55px rgba(0,0,0,.38);
    }

    .featured .tier-name{ color: rgba(255,255,255,.95); }
    .featured .pill{
      border-color: rgba(124,92,255,.55);
      background: rgba(124,92,255,.12);
      color: rgba(255,255,255,.90);
    }

    /* Mobile */
    @media (max-width: 900px){
      .grid{ grid-template-columns: 1fr; }
      .card{ min-height: 0; }
      .note{ text-align: left; }
      .top{ margin-bottom: 18px; }
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce){
      .card, .btn{ transition: none; }
    }
  </style>
</head>
<body>
  <main class="wrap">
    <section class="top" aria-label="Pricing header">
      <div class="title">
        <h1>Pricing built for every stage of development</h1>
        <p>Choose a plan that matches how you build. Upgrade anytime—your settings and projects move with you.</p>
      </div>
      <div class="note">
        Simple, transparent billing.<br/>
        Cancel whenever you want.
      </div>
    </section>

    <section class="grid" aria-label="Pricing tiers">
      <!-- Hobby -->
      <article class="card" aria-label="Hobby plan">
        <div class="card-inner">
          <div class="tier">
            <div class="tier-name">Hobby</div>
            <div class="pill">For learning</div>
          </div>

          <div class="price">
            <div class="amount">$0</div>
            <div class="per">/mo</div>
          </div>

          <p class="statement">Start building with the essentials and keep everything lightweight.</p>

          <hr class="divider" />

          <ul class="features">
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Core CLI + basic integration
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Public logs &amp; sample dashboards
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              1 workspace
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Community support
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Updates included
            </li>
          </ul>

          <div class="cta-row">
            <a class="btn" href="#" role="button" aria-label="Choose Hobby plan">
              <span>Get started</span>
            </a>
            <div class="fineprint">No credit card required.</div>
          </div>
        </div>
      </article>

      <!-- Pro (featured) -->
      <article class="card featured" aria-label="Pro plan">
        <div class="card-inner">
          <div class="tier">
            <div class="tier-name">Pro</div>
            <div class="pill">Most popular</div>
          </div>

          <div class="price">
            <div class="amount">$20</div>
            <div class="per">/mo</div>
          </div>

          <p class="statement">For serious builders who want faster feedback and deeper insights.</p>

          <hr class="divider" />

          <ul class="features">
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Advanced diagnostics &amp; smart suggestions
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Private dashboards
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Up to 5 workspaces
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Priority email support
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Team-ready exports (JSON/CSV)
            </li>
          </ul>

          <div class="cta-row">
            <a class="btn btn-primary" href="#" role="button" aria-label="Choose Pro plan">
              <span>Upgrade to Pro</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M6.2 3.2h6.6v6.6" stroke="rgba(255,255,255,.92)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12.8 3.2 3.2 12.8" stroke="rgba(255,255,255,.92)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
            <div class="fineprint">Best value for individual developers.</div>
          </div>
        </div>
      </article>

      <!-- Team -->
      <article class="card" aria-label="Team plan">
        <div class="card-inner">
          <div class="tier">
            <div class="tier-name">Team</div>
            <div class="pill">For collaboration</div>
          </div>

          <div class="price">
            <div class="amount">$60</div>
            <div class="per">/seat/mo</div>
          </div>

          <p class="statement">Bring standards to your org with governance, sharing, and advanced controls.</p>

          <hr class="divider" />

          <ul class="features">
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              SSO-ready access &amp; role-based permissions
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Centralized workspace management
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Shared dashboards &amp; alerts
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Audit logs &amp; usage reporting
            </li>
            <li class="feature">
              <span class="check" aria-hidden="true">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M10.2 3.2 4.9 8.5 1.8 5.4" stroke="#35d07f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              Dedicated support
            </li>
          </ul>

          <div class="cta-row">
            <a class="btn" href="#" role="button" aria-label="Choose Team plan">
              <span>Contact sales</span>
            </a>
            <div class="fineprint">Includes onboarding for your team.</div>
          </div>
        </div>
      </article>
    </section>
  </main>

  <script>
    // No external dependencies; intentionally left minimal (requirement: no JS frameworks).
  </script>
</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"
}