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 - DevTool</title>
<style>
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: #f9fafb;
        color: #111827;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .header {
        text-align: center;
        padding: 5rem 1rem 3rem;
    }

    .header h1 {
        font-size: 2.5rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        margin-bottom: 1rem;
        color: #111827;
    }

    .header p {
        font-size: 1.125rem;
        color: #4b5563;
        max-width: 600px;
        margin: 0 auto;
    }

    .pricing-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 1.5rem 5rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        align-items: stretch;
    }

    .card {
        background: #ffffff;
        border-radius: 1rem;
        padding: 2.5rem;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card.pro {
        border: 2px solid #2563eb;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: scale(1.05);
        z-index: 10;
    }

    .tier-name {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #4b5563;
    }

    .card.pro .tier-name {
        color: #2563eb;
    }

    .price {
        font-size: 3rem;
        font-weight: 800;
        color: #111827;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: baseline;
        letter-spacing: -0.025em;
    }

    .price span {
        font-size: 1rem;
        font-weight: 500;
        color: #6b7280;
        margin-left: 0.25rem;
    }

    .statement {
        font-size: 0.95rem;
        color: #4b5563;
        margin-bottom: 2rem;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 2rem;
        min-height: 5rem;
    }

    .features {
        list-style: none;
        margin-bottom: 2.5rem;
        flex-grow: 1;
    }

    .features li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        font-size: 0.95rem;
        color: #374151;
    }

    .features li svg {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.75rem;
        flex-shrink: 0;
        color: #9ca3af;
        margin-top: 0.125rem;
    }

    .card.pro .features li svg {
        color: #2563eb;
    }

    .btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 0.5rem;
        text-decoration: none;
        transition: all 0.2s;
        cursor: pointer;
        text-align: center;
    }

    .btn-outline {
        background-color: transparent;
        color: #111827;
        border: 1px solid #d1d5db;
    }

    .btn-outline:hover {
        background-color: #f3f4f6;
    }

    .btn-primary {
        background-color: #2563eb;
        color: #ffffff;
        border: 1px solid transparent;
    }

    .btn-primary:hover {
        background-color: #1d4ed8;
    }

    @media (max-width: 900px) {
        .pricing-container {
            grid-template-columns: 1fr;
            max-width: 500px;
            gap: 2rem;
        }
        .card.pro {
            transform: none;
        }
        .statement {
            min-height: auto;
        }
    }
</style>
</head>
<body>

<header class="header">
    <h1>Simple, transparent pricing</h1>
    <p>Choose the right plan for your development workflow. No hidden fees.</p>
</header>

<main class="pricing-container">
    <div class="card">
        <h2 class="tier-name">Hobby</h2>
        <div class="price">$0<span>/mo</span></div>
        <p class="statement">For individuals exploring the platform and working on side projects.</p>
        
        <ul class="features">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                1 user
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Up to 3 projects
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Community support
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Basic analytics
            </li>
        </ul>
        
        <a href="#" class="btn btn-outline">Get Started</a>
    </div>

    <div class="card pro">
        <h2 class="tier-name">Pro</h2>
        <div class="price">$20<span>/mo</span></div>
        <p class="statement">For professional developers who need to ship fast and scale.</p>
        
        <ul class="features">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                1 user
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Unlimited projects
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Priority email support
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Advanced analytics
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Custom domains
            </li>
        </ul>
        
        <a href="#" class="btn btn-primary">Start Free Trial</a>
    </div>

    <div class="card">
        <h2 class="tier-name">Team</h2>
        <div class="price">$60<span>/seat/mo</span></div>
        <p class="statement">For growing teams requiring enhanced collaboration and security.</p>
        
        <ul class="features">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Unlimited users
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Unlimited projects
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                24/7 dedicated support
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                SSO & SAML integration
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
                Comprehensive audit logs
            </li>
        </ul>
        
        <a href="#" class="btn btn-outline">Contact Sales</a>
    </div>
</main>

</body>
</html>

request envelope — prompt redacted

{
  "model": "google/gemini-3.1-pro-preview",
  "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": "46969d2a-0148-4454-b6aa-023c181af8a7"
}