taste-skill / Components / Upstash Pricing Table

Upstash-Style Pricing Table

A 3-tier pricing table composed from Upstash's extracted tokens — #F5F5F5 canvas, #00BC7D accent, 10px button radius, Inter Tight — with full HTML you can paste into your SaaS.

This is a composition: it is not Upstash's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Upstash 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	`#F5F5F5`
Highlight / accent	`#00BC7D`
Tier card	`box-sizing:border-box;background:#F5F5F5;border:1px solid rgba(0, 0, 0, 0.05);border-radius:35.2px;padding:24px 48px;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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;backdrop-filter:blur(8px)`
Primary CTA	`Button` recipe — 40px / 10px / #FFFFFF
Price type	`Inter Tight`, weight 700, tracking -0.025em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#F5F5F5;padding:32px;font-family:Inter, Inter, system-ui, -apple-system, sans-serif;color:#022C22">
  <div style="font-family:'Inter Tight', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.025em;font-weight:700;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:#F5F5F5;border:1px solid rgba(0, 0, 0, 0.05);border-radius:35.2px;padding:24px 48px;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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#71717B">Starter</div>
    <div style="font-family:'Inter Tight', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.025em;color:#022C22">$0<span style="font-size:14px;color:#71717B;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#71717B"><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:64px;padding:0px 32px;border-radius:16px 16px 0px 0px;background:#F5F5F5;color:#71717B;border:2px solid rgba(0, 115, 89, 0.08);font-size:24px;font-weight:600;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#F5F5F5;border:1px solid rgba(0, 0, 0, 0.05);border-radius:35.2px;padding:24px 48px;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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;backdrop-filter:blur(8px);outline:1.5px solid #00BC7D;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#00BC7D">Pro</div>
    <div style="font-family:'Inter Tight', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.025em;color:#022C22">$20<span style="font-size:14px;color:#71717B;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#71717B"><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:0px 20px;border-radius:10px;background:#FFFFFF;color:#065F46;border:0;font-size:16px;font-weight:500;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#F5F5F5;border:1px solid rgba(0, 0, 0, 0.05);border-radius:35.2px;padding:24px 48px;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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#71717B">Team</div>
    <div style="font-family:'Inter Tight', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.025em;color:#022C22">$50<span style="font-size:14px;color:#71717B;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#71717B"><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:64px;padding:0px 32px;border-radius:16px 16px 0px 0px;background:#F5F5F5;color:#71717B;border:2px solid rgba(0, 115, 89, 0.08);font-size:24px;font-weight:600;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Upstash’s exact #F5F5F5 canvas and #FFFFFF surface pairing.
NEVER replace Inter Tight display typography or ignore its signature scale (128px / -0.025em (w700)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.05) (1px rgba(0,0,0,0.05)).

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

See taste-skill Pro →

Upstash-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Upstash

Same component, other brands