Indie SaaS Pricing — Live CSS Playground

{CF} CodeFronts Back to CSS Brutalist Indie SaaS Pricing Pure CSS

HTML

<section class="br-isp" aria-label="Indie SaaS hero and pricing demo">
  <div class="card">
    <div class="page">

      <div class="hero">
        <div class="watermark" aria-hidden="true">ship</div>

        <div class="hero-body">
          <div class="live-badge">
            <div class="live-dot" aria-hidden="true"></div>
            Live — 847 signups this week
          </div>

          <h1 class="hero-h">
            Stop rebuilding<br />
            <em>auth</em> for every<br />
            side project.<span class="accent">seriously.</span>
          </h1>

          <p class="hero-sub">
            Drop-in auth for indie hackers. Works in 4 lines of code.<br />
            No Stripe webhooks. No AWS config hell. No SLA anxiety.<br />
            Just ship the damn thing.
          </p>

          <div class="metrics">
            <div class="metric">
              <div class="m-val">12<span class="unit">k</span></div>
              <div class="m-label">Users</div>
              <div class="m-delta up">↑ +340 this week</div>
            </div>
            <div class="metric">
              <div class="m-val">4<span class="unit">ms</span></div>
              <div class="m-label">P95 Latency</div>
              <div class="m-delta up">↑ faster</div>
            </div>
            <div class="metric">
              <div class="m-val">99<span class="unit">%</span></div>
              <div class="m-label">Uptime</div>
              <div class="m-delta up">30d avg</div>
            </div>
          </div>

          <div class="cta-row">
            <button class="btn-main" type="button">Start free → no card</button>
            <button class="btn-sec" type="button">see the code on GitHub</button>
          </div>

          <div class="trust">
            <span class="trust-item">No credit card</span>
            <span class="trust-item">Open source core</span>
            <span class="trust-item">Self-host option</span>
          </div>
        </div>

        <div class="hero-foot">
          BUILT IN PUBLIC · MRR $4,240 · STARTED JAN 2025
        </div>
      </div>

      <div class="pricing-col">

        <div class="billing-toggle">
          <span class="toggle-label">Billing</span>
          <div class="toggle-row">
            <div class="toggle-wrap" role="tablist">
              <button class="toggle-opt" type="button" role="tab">Monthly</button>
              <button class="toggle-opt active" type="button" role="tab" aria-selected="true">Annual</button>
            </div>
            <span class="save-tag">-20%</span>
          </div>
        </div>

        <div class="plans">

          <div class="plan">
            <div class="plan-top">
              <span class="plan-name">Hobby</span>
            </div>
            <div class="plan-price">
              <span class="p-currency">$</span>
              <span class="p-amount">0</span>
              <span class="p-period">/mo forever</span>
            </div>
            <ul class="plan-features">
              <li class="on">Up to 1,000 MAU</li>
              <li class="on">Email + OAuth</li>
              <li class="on">Community support</li>
              <li>Custom domains</li>
              <li>Webhooks</li>
            </ul>
            <button class="plan-btn" type="button">Get started →</button>
          </div>

          <div class="plan featured">
            <div class="plan-top">
              <span class="plan-name">Pro</span>
              <span class="popular-tag">Most picked</span>
            </div>
            <div class="plan-price">
              <span class="p-currency dim">$</span>
              <span class="p-amount">19</span>
              <span class="p-period dim">/mo</span>
            </div>
            <ul class="plan-features">
              <li>50k MAU included</li>
              <li>Custom domains</li>
              <li>Full webhook control</li>
              <li>Team seats (5)</li>
              <li>Priority email support</li>
            </ul>
            <button class="plan-btn" type="button">Start 14-day trial →</button>
          </div>

          <div class="plan">
            <div class="plan-top">
              <span class="plan-name">Team</span>
            </div>
            <div class="plan-price">
              <span class="p-currency">$</span>
              <span class="p-amount">79</span>
              <span class="p-period">/mo</span>
            </div>
            <ul class="plan-features">
              <li class="on">500k MAU</li>
              <li class="on">Unlimited seats</li>
              <li class="on">SOC 2 reports</li>
              <li class="on">SLA + Slack support</li>
              <li class="on">SSO / SAML</li>
            </ul>
            <button class="plan-btn" type="button">Contact us →</button>
          </div>

        </div>

      </div>

    </div>
  </div>
</section>

CSS

/* ─── 05 Indie SaaS Pricing — auth-as-a-service hero+pricing ──── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;0,800;1,400&family=Instrument+Serif:ital@0;1&display=swap');

.br-isp {
  --br-isp-bg: #fafaf8;
  --br-isp-black: #111;
  --br-isp-muted: #888;
  --br-isp-rule: #ddd;
  --br-isp-green: #00b341;
  --br-isp-yellow: #ffd000;
  --br-isp-red: #e63000;
  --br-isp-blue: #1a5eff;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--br-isp-bg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--br-isp-black);
  overflow: hidden;
  box-sizing: border-box;
}

.br-isp *,
.br-isp *::before,
.br-isp *::after { box-sizing: border-box; margin: 0; padding: 0; }

.br-isp .card { position: relative; width: 100%; min-height: 760px; }

.br-isp .page {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: 1fr;
  min-height: 760px;
  border-top: 4px solid var(--br-isp-black);
}

/* Hero */
.br-isp .hero {
  padding: 44px 52px;
  border-right: 2px solid var(--br-isp-rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  gap: 32px;
}

.br-isp .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fff4;
  border: 1.5px solid var(--br-isp-green);
  color: var(--br-isp-green);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  margin-bottom: 28px;
  width: fit-content;
}
.br-isp .live-dot {
  width: 7px; height: 7px;
  background: var(--br-isp-green);
  border-radius: 50%;
  animation: br-isp-blink 1.4s ease-in-out infinite;
}
@keyframes br-isp-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.br-isp .hero-h {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.06;
  color: var(--br-isp-black);
  letter-spacing: -0.02em;
  font-weight: 400;
}
.br-isp .hero-h em {
  font-style: italic;
  color: var(--br-isp-muted);
}
.br-isp .hero-h .accent {
  font-style: normal;
  background: var(--br-isp-yellow);
  padding: 0 6px;
  margin: 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: -1px;
  vertical-align: 2px;
}

.br-isp .hero-sub {
  font-size: 12px;
  line-height: 1.9;
  color: var(--br-isp-muted);
  margin-top: 24px;
  max-width: 480px;
  border-left: 3px solid var(--br-isp-rule);
  padding-left: 16px;
}

.br-isp .metrics {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--br-isp-rule);
  margin-top: 36px;
}
.br-isp .metric {
  flex: 1;
  padding: 16px 20px;
  border-right: 1.5px solid var(--br-isp-rule);
}
.br-isp .metric:last-child { border-right: none; }
.br-isp .m-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--br-isp-black);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -1px;
}
.br-isp .m-val .unit { font-size: 14px; font-weight: 400; color: var(--br-isp-muted); }
.br-isp .m-label { font-size: 9px; color: var(--br-isp-muted); letter-spacing: 2px; text-transform: uppercase; }
.br-isp .m-delta { font-size: 9px; margin-top: 4px; }
.br-isp .m-delta.up { color: var(--br-isp-green); }
.br-isp .m-delta.dn { color: var(--br-isp-red); }

.br-isp .cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.br-isp .btn-main {
  background: var(--br-isp-black);
  color: var(--br-isp-bg);
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.br-isp .btn-main:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--br-isp-black);
  background: var(--br-isp-blue);
}
.br-isp .btn-sec {
  background: transparent;
  color: var(--br-isp-muted);
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-decoration: underline;
  text-decoration-color: var(--br-isp-rule);
  text-underline-offset: 4px;
}
.br-isp .btn-sec:hover { color: var(--br-isp-black); text-decoration-color: var(--br-isp-black); }

.br-isp .trust {
  margin-top: 18px;
  font-size: 9px;
  color: var(--br-isp-muted);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.br-isp .trust-item::before {
  content: '✓ ';
  color: var(--br-isp-green);
  font-weight: 700;
}

.br-isp .watermark {
  position: absolute;
  bottom: -20px;
  right: -20px;
  font-family: 'Instrument Serif', serif;
  font-size: 200px;
  color: rgba(0,0,0,0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-style: italic;
}

.br-isp .hero-foot {
  font-size: 9px;
  color: #ccc;
  letter-spacing: 2px;
}

/* Pricing column */
.br-isp .pricing-col {
  display: flex;
  flex-direction: column;
}

.br-isp .billing-toggle {
  padding: 16px 24px;
  border-bottom: 1.5px solid var(--br-isp-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.br-isp .toggle-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--br-isp-muted); }
.br-isp .toggle-row { display: flex; align-items: center; gap: 8px; }
.br-isp .toggle-wrap {
  display: flex;
  border: 1.5px solid var(--br-isp-rule);
  overflow: hidden;
}
.br-isp .toggle-opt {
  padding: 5px 12px;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--br-isp-muted);
  transition: background 0.1s, color 0.1s;
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', monospace;
}
.br-isp .toggle-opt.active { background: var(--br-isp-black); color: var(--br-isp-bg); }
.br-isp .save-tag {
  font-size: 9px;
  background: var(--br-isp-yellow);
  color: var(--br-isp-black);
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 1px;
}

.br-isp .plans { flex: 1; }

.br-isp .plan {
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--br-isp-rule);
  position: relative;
  transition: background 0.15s;
}
.br-isp .plan:last-child { border-bottom: none; }
.br-isp .plan:hover { background: #f5f5f2; }
.br-isp .plan.featured { background: var(--br-isp-black); }
.br-isp .plan.featured:hover { background: #1a1a1a; }

.br-isp .plan-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.br-isp .plan-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.br-isp .featured .plan-name { color: var(--br-isp-yellow); }
.br-isp .popular-tag {
  font-size: 8px;
  background: var(--br-isp-blue);
  color: white;
  padding: 3px 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.br-isp .plan-price {
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.br-isp .p-currency { font-size: 16px; font-weight: 700; color: var(--br-isp-muted); margin-top: 4px; }
.br-isp .p-currency.dim { color: #666; }
.br-isp .p-amount {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
}
.br-isp .featured .p-amount { color: var(--br-isp-bg); }
.br-isp .p-period { font-size: 10px; color: var(--br-isp-muted); }
.br-isp .p-period.dim { color: #555; }

.br-isp .plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.br-isp .plan-features li {
  font-size: 10px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.br-isp .plan-features li::before { content: '○'; flex-shrink: 0; }
.br-isp .plan .plan-features li { color: var(--br-isp-muted); }
.br-isp .plan .plan-features li::before { color: #ccc; }
.br-isp .featured .plan-features li { color: #aaa; }
.br-isp .featured .plan-features li::before { color: var(--br-isp-yellow); }
.br-isp .plan-features li.on { color: var(--br-isp-black); }
.br-isp .plan-features li.on::before { color: var(--br-isp-green); content: '●'; }

.br-isp .plan-btn {
  width: 100%;
  padding: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.1s;
}
.br-isp .plan .plan-btn { background: transparent; border-color: var(--br-isp-rule); color: var(--br-isp-muted); }
.br-isp .plan .plan-btn:hover { border-color: var(--br-isp-black); color: var(--br-isp-black); }
.br-isp .featured .plan-btn { background: var(--br-isp-yellow); border-color: var(--br-isp-yellow); color: var(--br-isp-black); }
.br-isp .featured .plan-btn:hover { background: #ffc800; }

@media (max-width: 720px) {
  .br-isp .page { grid-template-columns: 1fr; }
  .br-isp .hero { border-right: none; border-bottom: 2px solid var(--br-isp-rule); padding: 32px 24px; }
  .br-isp .metrics { flex-wrap: wrap; }
  .br-isp .metric { flex: 1 1 33%; }
}

@media (prefers-reduced-motion: reduce) {
  .br-isp .live-dot { animation: none; }
  .br-isp .btn-main, .br-isp .plan, .br-isp .plan-btn { transition: none; }
}