taste-skill / Components / Stripe Pricing Table
Stripe-Style Pricing Table
A 3-tier pricing table composed from Stripe's extracted tokens — #FFFFFF canvas, #533AFD accent, 4px button radius, Söhne Variable (sohne-var) — with full HTML you can paste into your SaaS.
This is a composition: it is not Stripe's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Stripe tokens.
Live pricing table
Pricing
Tokens used
| Part | Token |
|---|---|
| Background | #FFFFFF |
| Highlight / accent | #533AFD |
| Tier card | box-sizing:border-box;background:rgba(248, 251, 253, 0.45);border:1px solid #E5EDF5;border-radius:6px;padding:20px;box-shadow:rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;backdrop-filter:blur(12px) |
| Primary CTA | Get started recipe — 48px / 4px / #533AFD |
| Price type | Söhne Variable (sohne-var), weight 300, tracking 0em |
Copy-paste HTML
pricing-table.html (inline styles)
<div class="pv-stage" style="background:#FFFFFF;padding:32px;font-family:'Söhne Variable', Inter, system-ui, -apple-system, sans-serif;color:#061B31">
<div style="font-family:'Söhne Variable (sohne-var)', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:0em;font-weight:300;text-align:center;margin-bottom:24px">Pricing</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px">
<div style="box-sizing:border-box;background:rgba(248, 251, 253, 0.45);border:1px solid #E5EDF5;border-radius:6px;padding:20px;box-shadow:rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:12px">
<div style="font-size:14px;font-weight:600;color:#50617A">Starter</div>
<div style="font-family:'Söhne Variable (sohne-var)', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:300;letter-spacing:0em;color:#061B31">$0<span style="font-size:14px;color:#50617A;font-weight:400">/mo</span></div>
<ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#50617A"><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:40px;padding:11.5px 20px;border-radius:4px;background:transparent;color:#533AFD;border:1px solid #FFFFFF;font-size:14px;font-weight:400;margin-top:auto">Choose Starter</a></div>
<div style="box-sizing:border-box;background:rgba(248, 251, 253, 0.45);border:1px solid #E5EDF5;border-radius:6px;padding:20px;box-shadow:rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;backdrop-filter:blur(12px);outline:1.5px solid #533AFD;display:flex;flex-direction:column;gap:12px">
<div style="font-size:14px;font-weight:600;color:#533AFD">Pro</div>
<div style="font-family:'Söhne Variable (sohne-var)', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:300;letter-spacing:0em;color:#061B31">$20<span style="font-size:14px;color:#50617A;font-weight:400">/mo</span></div>
<ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#50617A"><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:48px;padding:15.5px 24px;border-radius:4px;background:#533AFD;color:#FFFFFF;border:0;font-size:16px;font-weight:400;margin-top:auto">Get started</a></div>
<div style="box-sizing:border-box;background:rgba(248, 251, 253, 0.45);border:1px solid #E5EDF5;border-radius:6px;padding:20px;box-shadow:rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:12px">
<div style="font-size:14px;font-weight:600;color:#50617A">Team</div>
<div style="font-family:'Söhne Variable (sohne-var)', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:300;letter-spacing:0em;color:#061B31">$50<span style="font-size:14px;color:#50617A;font-weight:400">/mo</span></div>
<ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#50617A"><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:40px;padding:11.5px 20px;border-radius:4px;background:transparent;color:#533AFD;border:1px solid #FFFFFF;font-size:14px;font-weight:400;margin-top:auto">Choose Team</a></div>
</div></div>Keep it on-brand
- NEVER use pure black (
#000000) or neutral gray (#111827) for headings or dark sections—Stripe uses deep maritime ink-navy (#061B31for text,#0D1738for dark sections) and cool slate (#50617A) for body copy. - NEVER use heavy bold (
700/800) weights on display headlines—Stripe’s current HDS aesthetic uses refined light-weightSöhne Variable(font-light/300) at large sizes (48px–56px) with tight negative tracking (-0.02emto-0.025em) for an architectural editorial feel. - NEVER use pill-shaped (
rounded-full) or overly rounded (rounded-2xl) primary buttons—Stripe’s HDS buttons use crisp4pxcorners (--hds-space-button-radius-lg: 4px,rounded-[4px]) with48pxheight (h-12 px-6).
More Stripe
Stripe full token specStripe style guideStripe ButtonsStripe CardsLinear vs StripeStripe vs PolarStripe vs WorkOSStripe vs Ashby
Same component, other brands
Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.
See taste-skill Pro →