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 developer tool.">
  <title>Relay — Pricing</title>
  <style>
    :root {
      --bg: #0b0e14;
      --surface: #111620;
      --surface-raised: #171e2c;
      --surface-soft: #0f141d;
      --border: #273142;
      --border-strong: #3b4c67;
      --text: #f5f7fb;
      --muted: #9ba8bb;
      --muted-bright: #c3cddd;
      --accent: #75e0c2;
      --accent-deep: #1c9f84;
      --purple: #a89cff;
      --shadow: 0 24px 70px rgba(0, 0, 0, .34);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      color-scheme: dark;
      background: var(--bg);
    }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--text);
      background:
        radial-gradient(circle at 50% -15%, rgba(103, 91, 194, .2), transparent 34rem),
        radial-gradient(circle at 5% 45%, rgba(43, 126, 112, .08), transparent 28rem),
        var(--bg);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }

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

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 84px;
    }

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

    .brand-mark {
      display: grid;
      width: 29px;
      height: 29px;
      place-items: center;
      color: #08100e;
      background: var(--accent);
      border-radius: 8px;
      box-shadow: 0 0 0 5px rgba(117, 224, 194, .08);
      font-size: .9rem;
      font-weight: 900;
    }

    .topbar-link {
      color: var(--muted-bright);
      font-size: .9rem;
      text-decoration: none;
    }

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

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

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: var(--accent);
      font-size: .76rem;
      font-weight: 750;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 6px;
      height: 6px;
      content: "";
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 15px var(--accent);
    }

    h1 {
      margin: 0;
      font-size: clamp(2.45rem, 6vw, 4.7rem);
      line-height: 1.03;
      letter-spacing: -.065em;
    }

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

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

    .plan {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 30px;
      background: rgba(17, 22, 32, .86);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    .plan.featured {
      z-index: 1;
      margin-top: -14px;
      margin-bottom: -14px;
      padding: 44px 30px 30px;
      background:
        linear-gradient(145deg, rgba(32, 42, 61, .98), rgba(19, 29, 41, .98));
      border-color: var(--border-strong);
      box-shadow: var(--shadow), 0 0 0 1px rgba(168, 156, 255, .08);
    }

    .plan.featured::before {
      position: absolute;
      top: 0;
      right: 30px;
      left: 30px;
      height: 2px;
      content: "";
      background: linear-gradient(90deg, var(--accent), var(--purple));
      border-radius: 0 0 4px 4px;
    }

    .plan-label {
      min-height: 24px;
      margin-bottom: 14px;
      color: var(--muted-bright);
      font-size: .78rem;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .plan.featured .plan-label {
      color: var(--accent);
    }

    .plan h2 {
      margin: 0;
      font-size: 1.45rem;
      letter-spacing: -.03em;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 5px;
      min-height: 64px;
      margin: 20px 0 8px;
    }

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

    .price span {
      color: var(--muted);
      font-size: .88rem;
    }

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

    .features {
      display: grid;
      gap: 14px;
      margin: 0 0 30px;
      padding: 24px 0 0;
      border-top: 1px solid var(--border);
      list-style: none;
    }

    .features li {
      display: flex;
      gap: 11px;
      color: var(--muted-bright);
      font-size: .9rem;
    }

    .features li::before {
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      content: "✓";
      color: var(--accent);
      font-size: .76rem;
      font-weight: 800;
      line-height: 17px;
      text-align: center;
      background: rgba(117, 224, 194, .12);
      border-radius: 50%;
    }

    .cta {
      width: 100%;
      margin-top: auto;
      padding: 12px 18px;
      color: var(--text);
      background: transparent;
      border: 1px solid var(--border-strong);
      border-radius: 9px;
      font: inherit;
      font-size: .9rem;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .cta:hover {
      background: rgba(255, 255, 255, .06);
      border-color: var(--muted-bright);
      transform: translateY(-2px);
    }

    .featured .cta {
      color: #08100e;
      background: var(--accent);
      border-color: var(--accent);
    }

    .featured .cta:hover {
      background: #9aefd9;
      border-color: #9aefd9;
    }

    .footnote {
      margin: 38px 0 0;
      color: #758196;
      font-size: .8rem;
      text-align: center;
    }

    .footer {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 70px;
      color: #6f7b8f;
      font-size: .82rem;
    }

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

    .footer a:hover {
      color: var(--muted-bright);
    }

    @media (max-width: 820px) {
      .page-shell {
        padding-top: 22px;
      }

      .topbar {
        margin-bottom: 62px;
      }

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

      .plan.featured {
        order: -1;
        margin: 0;
        padding: 44px 30px 30px;
      }

      .plan {
        padding: 28px;
      }

      .positioning {
        min-height: auto;
      }
    }

    @media (max-width: 480px) {
      .page-shell {
        width: min(100% - 28px, 500px);
        padding-bottom: 48px;
      }

      .topbar {
        margin-bottom: 50px;
      }

      .topbar-link {
        font-size: .82rem;
      }

      .hero {
        margin-bottom: 40px;
      }

      .plan,
      .plan.featured {
        padding-right: 22px;
        padding-left: 22px;
      }

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

      .plan.featured::before {
        right: 22px;
        left: 22px;
      }

      .footer {
        margin-top: 48px;
      }
    }
  </style>
</head>
<body>
  <main class="page-shell">
    <header class="topbar">
      <a class="brand" href="#" aria-label="Relay home">
        <span class="brand-mark">&gt;_</span>
        <span>relay</span>
      </a>
      <a class="topbar-link" href="#">Sign in <span aria-hidden="true">↗</span></a>
    </header>

    <section class="hero" aria-labelledby="page-title">
      <div class="eyebrow">Plans that scale with your code</div>
      <h1 id="page-title">Ship better software, together.</h1>
      <p>Relay gives your team one calm, connected workspace for developing, reviewing, and delivering modern products.</p>
    </section>

    <section class="pricing-grid" aria-label="Pricing plans">
      <article class="plan">
        <div class="plan-label">For side projects</div>
        <h2>Hobby</h2>
        <div class="price">
          <strong>$0</strong>
          <span>forever</span>
        </div>
        <p class="positioning">The essentials for exploring ideas and building in public.</p>
        <ul class="features">
          <li>1 personal workspace</li>
          <li>Up to 3 collaborators</li>
          <li>5 active projects</li>
          <li>Community support</li>
          <li>7-day activity history</li>
        </ul>
        <a class="cta" href="#">Start for free</a>
      </article>

      <article class="plan featured">
        <div class="plan-label">Recommended for builders</div>
        <h2>Pro</h2>
        <div class="price">
          <strong>$20</strong>
          <span>/ month</span>
        </div>
        <p class="positioning">Everything you need to move from first commit to confident release.</p>
        <ul class="features">
          <li>Unlimited private projects</li>
          <li>Advanced code review tools</li>
          <li>Preview environments</li>
          <li>Priority support</li>
          <li>1-year activity history</li>
        </ul>
        <a class="cta" href="#">Start 14-day trial</a>
      </article>

      <article class="plan">
        <div class="plan-label">For growing teams</div>
        <h2>Team</h2>
        <div class="price">
          <strong>$60</strong>
          <span>/ seat / mo</span>
        </div>
        <p class="positioning">A shared command center for teams that ship critical work.</p>
        <ul class="features">
          <li>Everything in Pro</li>
          <li>Unlimited collaborators</li>
          <li>Roles and permissions</li>
          <li>Shared team analytics</li>
          <li>SSO and audit logs</li>
        </ul>
        <a class="cta" href="#">Talk to our team</a>
      </article>
    </section>

    <p class="footnote">All plans include secure cloud storage, encrypted data, and access to the latest Relay features.</p>

    <footer class="footer">
      <a href="#">Documentation</a>
      <a href="#">Security</a>
      <a href="#">Contact</a>
    </footer>
  </main>
</body>
</html>

request envelope — prompt redacted

{
  "model": "openai/gpt-5.6-luna",
  "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": "cb3bc47b-271f-4c9b-a222-cd70fff1d39b"
}