taste-skill / Components / Vercel Pricing Table

Vercel-Style Pricing Table

A 3-tier pricing table composed from Vercel's extracted tokens — #FAFAFA canvas, #0070F3 accent, 6px button radius, GeistSans — with full HTML you can paste into your SaaS.

This is a composition: it is not Vercel's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Vercel 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	`#FAFAFA`
Highlight / accent	`#0070F3`
Tier card	`box-sizing:border-box;background:#FAFAFA;border:1px solid #EBEBEB;border-radius:6px;padding:20px 20px;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.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px`
Primary CTA	`Sign Up` recipe — 32px / 6px / #171717
Price type	`GeistSans`, weight 400, tracking -0.06em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#FAFAFA;padding:32px;font-family:GeistSans, Inter, system-ui, -apple-system, sans-serif;color:#171717">
  <div style="font-family:GeistSans, Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.06em;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:6px">
  <div style="box-sizing:border-box;background:#FAFAFA;border:1px solid #EBEBEB;border-radius:6px;padding:20px 20px;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.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#4D4D4D">Starter</div>
    <div style="font-family:GeistSans, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.06em;color:#171717">$0<span style="font-size:14px;color:#4D4D4D;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#4D4D4D"><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:0px 12px;border-radius:9999px;background:#171717;color:#FFFFFF;border:0;font-size:16px;font-weight:500;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#FAFAFA;border:1px solid #EBEBEB;border-radius:6px;padding:20px 20px;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.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;outline:1.5px solid #0070F3;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#0070F3">Pro</div>
    <div style="font-family:GeistSans, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.06em;color:#171717">$20<span style="font-size:14px;color:#4D4D4D;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#4D4D4D"><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 6px;border-radius:6px;background:#171717;color:#FFFFFF;border:0;font-size:14px;font-weight:500;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#FAFAFA;border:1px solid #EBEBEB;border-radius:6px;padding:20px 20px;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.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#4D4D4D">Team</div>
    <div style="font-family:GeistSans, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.06em;color:#171717">$50<span style="font-size:14px;color:#4D4D4D;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#4D4D4D"><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:0px 12px;border-radius:9999px;background:#171717;color:#FFFFFF;border:0;font-size:16px;font-weight:500;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Vercel’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace GeistSans display typography or ignore its signature scale (64px / -0.06em (w400)).
NEVER use thick opaque borders that clash with #EBEBEB (1px solid #EBEBEB).

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

See taste-skill Pro →

Vercel-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Vercel

Same component, other brands