taste-skill / Components / Supabase Pricing Table
Supabase-Style Pricing Table
A 3-tier pricing table composed from Supabase's extracted tokens — #FDFDFD canvas, #0E7E4E accent, 9.29231px button radius, Manrope — with full HTML you can paste into your SaaS.
This is a composition: it is not Supabase's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Supabase tokens.
Live pricing table
Pricing
Tokens used
| Part | Token |
|---|---|
| Background | #FDFDFD |
| Highlight / accent | #0E7E4E |
| Tier card | box-sizing:border-box;background:#FDFDFD;border:1px solid rgba(0, 0, 0, 0.08);border-radius:21.3333px;padding:8px 8px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px |
| Primary CTA | Request a demo recipe — 38px / 9.29231px / #FFFFFF |
| Price type | Manrope, weight 500, tracking 0em |
Copy-paste HTML
pricing-table.html (inline styles)
<div class="pv-stage" style="background:#FDFDFD;padding:32px;font-family:'Inter / Manrope', Inter, system-ui, -apple-system, sans-serif;color:#030303">
<div style="font-family:Manrope, Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:0em;font-weight:500;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:#FDFDFD;border:1px solid rgba(0, 0, 0, 0.08);border-radius:21.3333px;padding:8px 8px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;display:flex;flex-direction:column;gap:12px">
<div style="font-size:14px;font-weight:600;color:#696969">Starter</div>
<div style="font-family:Manrope, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:0em;color:#030303">$0<span style="font-size:14px;color:#696969;font-weight:400">/mo</span></div>
<ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#696969"><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:30px;padding:6px 12px;border-radius:9999px;background:#FFFFFF;color:#464646;border:1px solid rgba(0, 0, 0, 0.08);font-size:12px;font-weight:450;margin-top:auto">Choose Starter</a></div>
<div style="box-sizing:border-box;background:#FDFDFD;border:1px solid rgba(0, 0, 0, 0.08);border-radius:21.3333px;padding:8px 8px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;outline:1.5px solid #0E7E4E;display:flex;flex-direction:column;gap:12px">
<div style="font-size:14px;font-weight:600;color:#0E7E4E">Pro</div>
<div style="font-family:Manrope, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:0em;color:#030303">$20<span style="font-size:14px;color:#696969;font-weight:400">/mo</span></div>
<ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#696969"><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:38px;padding:8px 16px;border-radius:9.29231px;background:#FFFFFF;color:#030303;border:0;font-size:14px;font-weight:500;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset;margin-top:auto">Get started</a></div>
<div style="box-sizing:border-box;background:#FDFDFD;border:1px solid rgba(0, 0, 0, 0.08);border-radius:21.3333px;padding:8px 8px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;display:flex;flex-direction:column;gap:12px">
<div style="font-size:14px;font-weight:600;color:#696969">Team</div>
<div style="font-family:Manrope, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:0em;color:#030303">$50<span style="font-size:14px;color:#696969;font-weight:400">/mo</span></div>
<ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#696969"><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:30px;padding:6px 12px;border-radius:9999px;background:#FFFFFF;color:#464646;border:1px solid rgba(0, 0, 0, 0.08);font-size:12px;font-weight:450;margin-top:auto">Choose Team</a></div>
</div></div>Keep it on-brand
- NEVER substitute generic uncalibrated gray backgrounds for Supabase’s exact
#FDFDFDcanvas and#FFFFFFsurface pairing. - NEVER replace
Manropedisplay typography or ignore its signature scale (46px / 0em (w500)). - NEVER use thick opaque borders that clash with
rgba(0, 0, 0, 0.08)(1px rgba(0,0,0,0.08)).
More Supabase
Supabase full token specSupabase style guideSupabase ButtonsSupabase CardsSupabase vs NeonVercel vs SupabaseSupabase vs UpstashSupabase vs PlanetScaleSupabase vs Clerk
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 →