taste-skill / Components / Polar Pricing Table

Polar-Style Pricing Table

A 3-tier pricing table composed from Polar's extracted tokens — #090909 canvas, #FFFFFF accent, 9999px button radius, PP Neue Montreal — with full HTML you can paste into your SaaS.

This is a composition: it is not Polar's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Polar 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	`#090909`
Highlight / accent	`#FFFFFF`
Tier card	`box-sizing:border-box;background:transparent;border:1px solid #181818;border-radius:7.6px;padding:48px 48px`
Primary CTA	`Get Started` recipe — 40px / 9999px / #FFFFFF
Price type	`PP Neue Montreal`, weight 400, tracking 0em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#090909;padding:32px;font-family:'Inter / PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;color:#FFFFFF">
  <div style="font-family:'PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;font-size:36px;letter-spacing:0em;font-weight:400;text-align:center;margin-bottom:24px">Pricing</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:normal 16px">
  <div style="box-sizing:border-box;background:transparent;border:1px solid #181818;border-radius:7.6px;padding:48px 48px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#858585">Starter</div>
    <div style="font-family:'PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:0em;color:#FFFFFF">$0<span style="font-size:14px;color:#858585;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#858585"><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:48px;padding:16px 20px;border-radius:9999px;background:#FFFFFF;color:#000000;border:0;font-size:14px;font-weight:550;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid #181818;border-radius:7.6px;padding:48px 48px;outline:1.5px solid #FFFFFF;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#FFFFFF">Pro</div>
    <div style="font-family:'PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:0em;color:#FFFFFF">$20<span style="font-size:14px;color:#858585;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#858585"><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:40px;padding:12px 20px;border-radius:9999px;background:#FFFFFF;color:#000000;border:0;font-size:14px;font-weight:550;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid #181818;border-radius:7.6px;padding:48px 48px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#858585">Team</div>
    <div style="font-family:'PP Neue Montreal', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:0em;color:#FFFFFF">$50<span style="font-size:14px;color:#858585;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#858585"><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:48px;padding:16px 20px;border-radius:9999px;background:#FFFFFF;color:#000000;border:0;font-size:14px;font-weight:550;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Polar’s exact #090909 canvas and #111111 surface pairing.
NEVER replace PP Neue Montreal display typography or ignore its signature scale (36px / 1.25 (w400)).
NEVER use thick opaque borders that clash with #212121 (1px solid #212121).

More Polar

Polar full token spec Polar style guide Polar Buttons Polar Cards Stripe vs Polar

Same component, other brands

Linear Pricing Table Stripe Pricing Table Resend Pricing Table Vercel Pricing Table Supabase Pricing Table Raycast Pricing Table Cursor Pricing Table Clerk Pricing Table Mintlify Pricing Table Cal.com Pricing Table Dub Pricing Table Trigger.dev Pricing Table

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →