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 Tiers — DevPulse</title>
  <style>
    /* System Font Stack & Reset */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg-dark: #090d16;
      --card-bg: #111827;
      --card-bg-hover: #162032;
      --border-color: #1f293d;
      --text-main: #f3f4f6;
      --text-muted: #9ca3af;
      --accent: #6366f1;
      --accent-hover: #4f46e5;
      --accent-glow: rgba(99, 102, 241, 0.15);
      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    body {
      background-color: var(--bg-dark);
      color: var(--text-main);
      font-family: var(--font-sans);
      line-height: 1.5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 4rem 1.5rem;
      -webkit-font-smoothing: antialiased;
    }

    /* Background Ambient Lights */
    .ambient-glow {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 300px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(9, 13, 22, 0) 70%);
      pointer-events: none;
      z-index: 0;
    }

    .container {
      max-width: 1140px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    /* Header Styling */
    .header {
      text-align: center;
      max-width: 650px;
      margin: 0 auto 3rem auto;
    }

    .pill-tag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.8125rem;
      color: var(--accent);
      background: rgba(99, 102, 241, 0.1);
      border: 1px solid rgba(99, 102, 241, 0.25);
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      margin-bottom: 1.25rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .header h1 {
      font-size: 2.75rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.15;
      margin-bottom: 1rem;
      color: #ffffff;
    }

    .header p {
      font-size: 1.125rem;
      color: var(--text-muted);
    }

    /* Billing Toggle Switch */
    .toggle-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 3.5rem;
      font-size: 0.9375rem;
      color: var(--text-muted);
    }

    .toggle-container .active {
      color: var(--text-main);
      font-weight: 600;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 26px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #1f293d;
      transition: .25s ease;
      border-radius: 9999px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: var(--text-main);
      transition: .25s ease;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: var(--accent);
    }

    input:checked + .slider:before {
      transform: translateX(22px);
    }

    .discount-badge {
      font-size: 0.75rem;
      font-family: var(--font-mono);
      color: #10b981;
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.2);
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      margin-left: 0.25rem;
    }

    /* Grid Layout */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
      align-items: stretch;
    }

    /* Base Pricing Card */
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 2.25rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
      border-color: #2e3d58;
    }

    /* Middle Tier Visual Distinction (Subtle, Elegant Refinement) */
    .card.pro-tier {
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(17, 24, 39, 1) 100%);
      border-color: rgba(99, 102, 241, 0.45);
      box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5), 0 0 20px 0 var(--accent-glow);
    }

    @media (min-width: 901px) {
      .card.pro-tier {
        transform: translateY(-8px);
      }
      .card.pro-tier:hover {
        transform: translateY(-12px);
      }
    }

    .card.pro-tier:hover {
      border-color: rgba(99, 102, 241, 0.7);
    }

    /* Top Subtle Accent Bar for Middle Tier */
    .card.pro-tier::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 15%;
      right: 15%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

    /* Card Content Formatting */
    .card-header {
      margin-bottom: 1.5rem;
    }

    .tier-name {
      font-size: 1.25rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .tier-positioning {
      font-size: 0.875rem;
      color: var(--text-muted);
      min-height: 2.625rem; /* Keeps layout alignment equal */
      line-height: 1.4;
    }

    .price-container {
      margin: 1.5rem 0 2rem 0;
      display: flex;
      align-items: baseline;
      gap: 0.35rem;
    }

    .price {
      font-size: 2.75rem;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .unit {
      font-size: 0.9375rem;
      color: var(--text-muted);
      font-weight: 500;
    }

    /* Feature List */
    .features-list {
      list-style: none;
      margin-bottom: 2.25rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 1.5rem;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.9375rem;
      color: #d1d5db;
    }

    .feature-icon {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: var(--accent);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      margin-top: 0.15rem;
    }

    .feature-item.muted {
      color: #6b7280;
    }

    .feature-item.muted .feature-icon {
      stroke: #4b5563;
    }

    /* CTAs */
    .cta-button {
      display: inline-block;
      width: 100%;
      text-align: center;
      padding: 0.875rem 1.25rem;
      border-radius: 8px;
      font-size: 0.9375rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
      cursor: pointer;
      border: 1px solid var(--border-color);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text-main);
    }

    .cta-button:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: #374151;
      color: #ffffff;
    }

    /* Middle Tier Primary Button */
    .pro-tier .cta-button {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    }

    .pro-tier .cta-button:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    }

    /* Responsive Design */
    @media (max-width: 900px) {
      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
      }
      .card.pro-tier {
        transform: none;
      }
      .tier-positioning {
        min-height: auto;
      }
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>

  <div class="ambient-glow"></div>

  <div class="container">
    <!-- Header -->
    <header class="header">
      <span class="pill-tag">Flexible Infrastructure</span>
      <h1>Predictable pricing for developers and teams</h1>
      <p>Deploy instant backend APIs, edge functions, and databases. Scale effortlessly as your traffic grows.</p>
    </header>

    <!-- Billing Cycle Toggle -->
    <div class="toggle-container">
      <span id="monthly-label" class="active">Monthly billing</span>
      <label class="switch" aria-label="Toggle annual billing">
        <input type="checkbox" id="billing-toggle" onclick="toggleBilling()">
        <span class="slider"></span>
      </label>
      <span id="annual-label">Annual billing <span class="discount-badge">Save 20%</span></span>
    </div>

    <!-- Pricing Grid -->
    <div class="pricing-grid">
      
      <!-- 1. Hobby Tier -->
      <div class="card">
        <div>
          <div class="card-header">
            <div class="tier-name">Hobby</div>
            <p class="tier-positioning">Essential developer environment for personal projects and prototyping.</p>
          </div>
          <div class="price-container">
            <span class="price" id="price-hobby">$0</span>
            <span class="unit">/ month</span>
          </div>
          <ul class="features-list">
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>1 concurrent build execution</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Up to 3 active projects</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>5,000 API requests / mo</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Community Discord support</span>
            </li>
            <li class="feature-item muted">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>7-day log retention</span>
            </li>
          </ul>
        </div>
        <a href="#start-hobby" class="cta-button">Deploy Free</a>
      </div>

      <!-- 2. Pro Tier (Visually Emphasized) -->
      <div class="card pro-tier">
        <div>
          <div class="card-header">
            <div class="tier-name">
              <span>Pro</span>
            </div>
            <p class="tier-positioning">High-performance production setup for independent builders and power users.</p>
          </div>
          <div class="price-container">
            <span class="price" id="price-pro">$20</span>
            <span class="unit" id="unit-pro">/ month</span>
          </div>
          <ul class="features-list">
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span><strong>5 concurrent</strong> build executions</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Unlimited active projects</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>100,000 API requests / mo</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Priority email support (4hr SLA)</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Custom domains & SSL certificates</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>30-day detailed log retention</span>
            </li>
          </ul>
        </div>
        <a href="#start-pro" class="cta-button">Start 14-Day Free Trial</a>
      </div>

      <!-- 3. Team Tier -->
      <div class="card">
        <div>
          <div class="card-header">
            <div class="tier-name">Team</div>
            <p class="tier-positioning">Advanced security, governance, and scale for engineering organizations.</p>
          </div>
          <div class="price-container">
            <span class="price" id="price-team">$60</span>
            <span class="unit" id="unit-team">/ seat / month</span>
          </div>
          <ul class="features-list">
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span><strong>Unlimited</strong> concurrent builds</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Everything in Pro tier included</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>5,000,000 API requests / mo</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>SAML / SSO & RBAC permissions</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>24/7 Slack channel support & SLA</span>
            </li>
            <li class="feature-item">
              <svg class="feature-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>1-year log retention & audit trails</span>
            </li>
          </ul>
        </div>
        <a href="#start-team" class="cta-button">Create Team Account</a>
      </div>

    </div>
  </div>

  <script>
    function toggleBilling() {
      const isAnnual = document.getElementById('billing-toggle').checked;
      const monthlyLabel = document.getElementById('monthly-label');
      const annualLabel = document.getElementById('annual-label');

      const pricePro = document.getElementById('price-pro');
      const priceTeam = document.getElementById('price-team');
      
      const unitPro = document.getElementById('unit-pro');
      const unitTeam = document.getElementById('unit-team');

      if (isAnnual) {
        monthlyLabel.classList.remove('active');
        annualLabel.classList.add('active');

        // Billed annually calculation (20% off)
        pricePro.textContent = '$16';
        priceTeam.textContent = '$48';
        
        unitPro.textContent = '/ month, billed annually';
        unitTeam.textContent = '/ seat / mo, billed annually';
      } else {
        annualLabel.classList.remove('active');
        monthlyLabel.classList.add('active');

        pricePro.textContent = '$20';
        priceTeam.textContent = '$60';

        unitPro.textContent = '/ month';
        unitTeam.textContent = '/ seat / month';
      }
    }
  </script>
</body>
</html>

request envelope — prompt redacted

{
  "model": "google/gemini-3.6-flash",
  "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": "9e39b87d-ae31-440f-8c37-8afce7ef7aba"
}