taste-skill / Components / PostHog Pricing Table

PostHog-Style Pricing Table

A 3-tier pricing table composed from PostHog's extracted tokens — #EEEFE9 canvas, #EB9D2A accent, 6px button radius, RoundHog / Matter — with full HTML you can paste into your SaaS.

This is a composition: it is not PostHog's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted PostHog tokens.

Live pricing table

Pricing

Starter

$0/mo

✓ 1 project
✓ Community support

Choose Starter

Pro

$20/mo

✓ Unlimited projects
✓ Priority support
✓ Analytics

Get started

Team

$50/mo

✓ Everything in Pro
✓ SSO
✓ Audit log

Choose Team

Tokens used

Part	Token
Background	`#EEEFE9`
Highlight / accent	`#EB9D2A`
Tier card	`box-sizing:border-box;background:#E5E7E0;border:1px solid #B17816;border-radius:2px;padding:20px`
Primary CTA	`Get started – free` recipe — 32px / 6px / #CD8407
Price type	`RoundHog / Matter`, weight 800, tracking -0.025em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#EEEFE9;padding:32px;font-family:'IBM Plex Sans', Inter, system-ui, -apple-system, sans-serif;color:#23251D">
  <div style="font-family:'RoundHog / Matter', Inter, system-ui, -apple-system, sans-serif;font-size:36px;letter-spacing:-0.025em;font-weight:800;text-align:center;margin-bottom:24px">Pricing</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px">
  <div style="box-sizing:border-box;background:#E5E7E0;border:1px solid #B17816;border-radius:2px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#5A5E52">Starter</div>
    <div style="font-family:'RoundHog / Matter', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.025em;color:#23251D">$0<span style="font-size:14px;color:#5A5E52;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#5A5E52"><li>✓ 1 project</li><li>✓ Community support</li></ul>
    <a style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-decoration:none;height:47px;padding:0px 0px;border-radius:8px;background:#CD8407;color:#111111;border:1px solid #B17816;font-size:18px;font-weight:500;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#E5E7E0;border:1px solid #B17816;border-radius:2px;padding:20px;outline:1.5px solid #EB9D2A;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#EB9D2A">Pro</div>
    <div style="font-family:'RoundHog / Matter', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.025em;color:#23251D">$20<span style="font-size:14px;color:#5A5E52;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#5A5E52"><li>✓ Unlimited projects</li><li>✓ Priority support</li><li>✓ Analytics</li></ul>
    <a style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-decoration:none;height:32px;padding:0px 0px;border-radius:6px;background:#CD8407;color:#23251D;border:1px solid #B17816;font-size:16px;font-weight:400;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#E5E7E0;border:1px solid #B17816;border-radius:2px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#5A5E52">Team</div>
    <div style="font-family:'RoundHog / Matter', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.025em;color:#23251D">$50<span style="font-size:14px;color:#5A5E52;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#5A5E52"><li>✓ Everything in Pro</li><li>✓ SSO</li><li>✓ Audit log</li></ul>
    <a style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-decoration:none;height:47px;padding:0px 0px;border-radius:8px;background:#CD8407;color:#111111;border:1px solid #B17816;font-size:18px;font-weight:500;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for PostHog’s exact #EEEFE9 canvas and #E5E7E0 surface pairing.
NEVER replace RoundHog / Matter display typography or ignore its signature scale (36px / -0.025em (w800)).
NEVER use thick opaque borders that clash with #B17816 (1px solid #B17816).

PostHog-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More PostHog

Same component, other brands