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">
<title>Pricing — Forge CLI</title>
<style>
  :root {
    --bg: #0e1116;
    --surface: #161b22;
    --surface-raised: #1c2330;
    --border: #2a3240;
    --border-strong: #3b4657;
    --text: #e6ebf2;
    --text-muted: #9aa7b8;
    --accent: #5b8def;
    --accent-strong: #7aa5ff;
    --green: #4cc38a;
    --radius: 14px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 96px;
  }

  header.site {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
    max-width: 1080px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }

  .logo .mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), #8b5bef);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
  }

  nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-left: 22px;
  }
  nav a:hover { color: var(--text); }

  .hero {
    text-align: center;
    padding: 56px 0 48px;
  }

  .hero h1 {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 14px;
  }

  .hero p {
    color: var(--text-muted);
    font-size: 1.08rem;
    max-width: 34em;
    margin: 0 auto;
  }

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

  .tier {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
  }

  .tier h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    min-height: 2.7em;
    margin-bottom: 18px;
  }

  .price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 22px;
  }

  .price .amount {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  .price .unit {
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .cta {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 11px 16px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    color: var(--text);
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-bottom: 26px;
  }
  .cta:hover { background: var(--surface-raised); border-color: #4a5668; }

  .features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 0.92rem;
    color: var(--text-muted);
  }

  .features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }

  .features li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    background:
      linear-gradient(var(--green), var(--green)) no-repeat 50% 50% / 8px 8px;
    -webkit-mask: none;
    background-color: rgba(76, 195, 138, 0.14);
    background-image: none;
    display: inline-block;
    position: relative;
  }
  /* checkmark via inline SVG-free glyph */
  .features li::before {
    content: "✓";
    background: rgba(76, 195, 138, 0.14);
    color: var(--green);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }

  .features .group {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b788c;
    font-weight: 600;
  }
  .features .group::before { content: none; }

  /* --- Emphasised middle tier --- */
  .tier.featured {
    background: linear-gradient(180deg, #1a2233, #161c29);
    border: 1px solid rgba(91, 141, 239, 0.55);
    box-shadow:
      0 0 0 1px rgba(91, 141, 239, 0.18),
      0 18px 48px -18px rgba(91, 141, 239, 0.35);
    position: relative;
  }

  @media (min-width: 861px) {
    .tier.featured {
      transform: translateY(-14px);
      padding-top: 40px;
      padding-bottom: 40px;
    }
  }

  .tier.featured .cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .tier.featured .cta:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }

  .tier.featured .price .amount { color: var(--accent-strong); }

  .footnote {
    text-align: center;
    color: #6b788c;
    font-size: 0.85rem;
    margin-top: 44px;
  }
  .footnote a { color: var(--text-muted); }

  .faq-strip {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .faq-strip div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
  }

  .faq-strip h3 {
    font-size: 0.95rem;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }

  .faq-strip p {
    font-size: 0.88rem;
    color: var(--text-muted);
  }

  @media (max-width: 860px) {
    .tiers, .faq-strip { grid-template-columns: 1fr; }
    .tier.featured { order: -1; }
    .hero { padding: 36px 0 36px; }
    .tagline { min-height: 0; }
  }
</style>
</head>
<body>

<header class="site">
  <div class="logo"><span class="mark">F</span>Forge CLI</div>
  <nav>
    <a href="#">Docs</a>
    <a href="#">Changelog</a>
    <a href="#">Pricing</a>
    <a href="#">Sign in</a>
  </nav>
</header>

<main class="wrap">
  <section class="hero">
    <h1>Simple pricing that scales with you</h1>
    <p>Ship faster with reproducible builds, remote caching, and preview deploys. Start free — upgrade when your pipeline does.</p>
  </section>

  <section class="tiers" aria-label="Pricing tiers">

    <article class="tier">
      <h2>Hobby</h2>
      <p class="tagline">For side projects and getting a feel for the workflow.</p>
      <div class="price">
        <span class="amount">$0</span>
        <span class="unit">forever</span>
      </div>
      <a class="cta" href="#">Start for free</a>
      <ul class="features">
        <li>Unlimited local builds</li>
        <li>1 remote cache (500&nbsp;MB)</li>
        <li>Up to 3 projects</li>
        <li>Community support</li>
        <li class="group">Includes</li>
        <li>Preview deploys (10/mo)</li>
        <li>Basic build analytics</li>
      </ul>
    </article>

    <article class="tier featured" aria-label="Pro plan, most popular">
      <h2>Pro</h2>
      <p class="tagline">For professionals who want their toolchain out of the way.</p>
      <div class="price">
        <span class="amount">$20</span>
        <span class="unit">/ month</span>
      </div>
      <a class="cta" href="#">Upgrade to Pro</a>
      <ul class="features">
        <li>Everything in Hobby</li>
        <li>Unlimited projects</li>
        <li>50&nbsp;GB remote cache</li>
        <li>Unlimited preview deploys</li>
        <li>Concurrent CI runners (×4)</li>
        <li class="group">Plus</li>
        <li>Flaky-test detection</li>
        <li>Build insights &amp; tracing</li>
        <li>Email support, 1-day response</li>
      </ul>
    </article>

    <article class="tier">
      <h2>Team</h2>
      <p class="tagline">For teams that need shared caches, access control, and audit trails.</p>
      <div class="price">
        <span class="amount">$60</span>
        <span class="unit">/ seat / month</span>
      </div>
      <a class="cta" href="#">Start a team trial</a>
      <ul class="features">
        <li>Everything in Pro</li>
        <li>Shared org-wide cache (500&nbsp;GB)</li>
        <li>Concurrent CI runners (×16)</li>
        <li>Role-based access control</li>
        <li class="group">Plus</li>
        <li>SSO / SAML</li>
        <li>Audit logs &amp; usage reports</li>
        <li>Priority support with SLA</li>
      </ul>
    </article>

  </section>

  <p class="footnote">Prices in USD, billed monthly. Annual billing saves 20%. Need more than 50 seats? <a href="#">Talk to sales</a>.</p>

  <section class="faq-strip" aria-label="Common questions">
    <div>
      <h3>Can I try Pro before paying?</h3>
      <p>Yes — every account gets a 14-day Pro trial, no credit card required.</p>
    </div>
    <div>
      <h3>What counts as a seat?</h3>
      <p>Anyone who pushes builds through your org's cache in a billing period. Read-only viewers are free.</p>
    </div>
    <div>
      <h3>Can I cancel anytime?</h3>
      <p>Downgrade or cancel from your dashboard whenever you like. Your projects keep working on the Hobby tier.</p>
    </div>
  </section>
</main>

</body>
</html>

request envelope — prompt redacted

{
  "model": "anthropic/claude-fable-5",
  "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": "edf0793e-2e8b-4fa7-9a2c-3f5896800c71"
}