Pricing Lab · Visual Playground

1. Three-Tier Cards — classic pricing with featured middle tier

Starter

$9/mo

For personal projects

1 user
10 projects
Community support

Get started

Pro

$29/mo

For growing teams

10 users
Unlimited projects
Priority support
Advanced analytics

Start free trial

Team

$99/mo

For organizations

Unlimited users
SSO / SAML
Dedicated CSM

Contact sales

<div class="card featured">
  <div class="badge">Most Popular</div>
  <h3>Pro</h3>
  <div class="price">$29<span>/mo</span></div>
  <ul><li class="check">10 users</li></ul>
  <a class="cta">Start trial</a>
</div>
.card.featured {
  background: #111;
  color: #fff;
  transform: scale(1.03);
}

.badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.check::before {
  content: "✓";
  color: #10b981;
  font-weight: 700;
}

2. Monthly / Annual Toggle — save 20% with annual billing

Simple, transparent pricing

Pay monthly or save 20% with annual billing.

Starter

$79/mo

Billed annually

Unlimited projects
Basic support

Pro

$2329/mo

Billed annually

All Starter features
Priority support
API access

Team

$7999/mo

Billed annually

All Pro features
SSO
Dedicated CSM

<div class="toggle">
  <span class="indicator"></span>
  <button>Monthly</button>
  <button class="active">Yearly</button>
</div>

<div class="price">
  $<span class="yearly">23</span>
  <span class="monthly">29</span>
</div>
/* Show/hide prices based on parent class */
.cards .monthly         { display: none; }
.cards.monthly .monthly { display: inline; }
.cards.monthly .yearly  { display: none; }
const toggle = document.getElementById('v2toggle');
const cards = document.getElementById('v2cards');
const indicator = toggle.querySelector('.indicator');

toggle.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', () => {
    toggle.querySelectorAll('button').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    cards.classList.toggle('monthly', btn.dataset.b === 'monthly');
    indicator.style.left = btn.offsetLeft + 'px';
    indicator.style.width = btn.offsetWidth + 'px';
  });
});

3. Comparison Table — side-by-side plan features

	Starter $9/mo	Pro $29/mo	Team $99/mo
Projects	10	Unlimited	Unlimited
Users	1	10	Unlimited
Storage	5 GB	100 GB	1 TB
API access	–	✓	✓
Custom domain	–	✓	✓
SSO / SAML	–	–	✓
Dedicated CSM	–	–	✓
Priority support	–	✓	✓

<table>
  <thead><tr>
    <th></th>
    <th>Starter</th>
    <th class="featured">Pro</th>
    <th>Team</th>
  </tr></thead>
  <tbody><tr>
    <td>Projects</td>
    <td>10</td>
    <td>Unlimited</td>
    <td>Unlimited</td>
  </tr></tbody>
</table>
/* Featured column gets a top border accent */
thead .featured {
  background: #fef7ed;
  border-top: 3px solid #ec4899;
}

td.check { color: #10b981; font-weight: 700; }
td.x     { color: #ccc; }

4. Usage-Based Calculator — drag sliders, see total update live

Calculate your price

Only pay for what you use. Adjust the sliders to see your monthly total.

Team members8

Storage (GB)120

API calls / month50k

Estimated monthly
$184

Billed monthly
Cancel anytime

Start 14-day trial

<div class="slider-row">
  <div class="top">
    <span>Team members</span>
    <strong id="users">8</strong>
  </div>
  <input type="range" id="s1" value="8">
</div>

<div class="total">
  <strong>$<span id="total">184</span></strong>
</div>
const calc = () => {
  const u = +document.getElementById('s1').value;
  const s = +document.getElementById('s2').value;
  const a = +document.getElementById('s3').value;

  // Simple pricing formula
  const total = u * 9 + s * 0.5 + a * 1;

  document.getElementById('users').textContent = u;
  document.getElementById('storage').textContent = s;
  document.getElementById('total').textContent = Math.round(total);
};

['s1', 's2', 's3'].forEach(id =>
  document.getElementById(id).addEventListener('input', calc)
);

5. Feature Matrix — grouped rows with section headers

Starter$9/mo

Pro$29/mo

Team$99/mo

Core

Projects

10

Unlimited

Users

1

10

Unlimited

Storage

5 GB

100 GB

1 TB

Integrations

API access

–

✓

Webhooks

–

✓

Zapier

✓

Security

2FA

✓

SSO / SAML

–

✓

Audit log

–

✓

<div class="matrix">
  <div class="head"></div>
  <div class="head">Starter</div>
  <div class="head">Pro</div>
  <div class="head">Team</div>

  <!-- Section spans all columns -->
  <div class="section">Core</div>

  <div>Projects</div>
  <div class="val">10</div>
  <div class="val">Unlimited</div>
</div>
.matrix {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

/* Section headers span all 4 columns */
.matrix .section {
  grid-column: 1 / -1;
  background: #f4f4f5;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

6. Simple Cards — lightweight card per plan, no "featured" treatment

Launch

Perfect for side projects and solo builds.

$19/mo

Choose Launch →

Cruise

For growing teams shipping real products.

$49/mo

Choose Cruise →

Orbit

Enterprise-grade scale and security.

$199/mo

Choose Orbit →

<div class="card">
  <div class="icon"><i class="ph-duotone ph-rocket-launch"></i></div>
  <h3>Launch</h3>
  <p>Description.</p>
  <div class="price">$19/mo</div>
</div>
.card {
  padding: 26px;
  border: 1px solid #eee;
  border-radius: 14px;
  transition: all .2s;
}

.card:hover {
  border-color: #111;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

7. Enterprise CTA — dark gradient panel for "contact sales" plans

Need something bigger?

Our Enterprise plan is for teams with custom needs — volume discounts, dedicated infrastructure, and white-glove onboarding.

Unlimited everything, forever
Dedicated account manager
Custom SLAs + uptime guarantees
On-premise deployment options
Security reviews + SOC 2 reports

Enterprise

Let's talk

Book a call →

Avg. response in 2 hours

<div class="panel">
  <div class="left">
    <h2>Need something bigger?</h2>
    <ul><li>...</li></ul>
  </div>
  <div class="right">
    <a class="cta">Book a call →</a>
  </div>
</div>
.panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: #0f172a;
  color: #fff;
  border-radius: 18px;
  padding: 50px 40px;
  overflow: hidden;
  position: relative;
}

/* Radial glow decoration */
.panel::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 200%;
  background: radial-gradient(circle, rgba(236,72,153,.3), transparent 60%);
}