taste-skill / Components / Framer Pricing Table

Framer-Style Pricing Table

A 3-tier pricing table composed from Framer's extracted tokens — #000000 canvas, #0099FF accent, 8px button radius, GT Walsheim Medium — with full HTML you can paste into your SaaS.

This is a composition: it is not Framer's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Framer 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	`#000000`
Highlight / accent	`#0099FF`
Tier card	`box-sizing:border-box;background:#111111;border:1px solid rgba(0, 153, 255, 0.42);border-radius:15px;padding:20px`
Primary CTA	`Sign up` recipe — 30px / 8px / #FFFFFF
Price type	`GT Walsheim Medium`, weight 500, tracking -0.04em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#000000;padding:32px;font-family:Inter, Inter, system-ui, -apple-system, sans-serif;color:#FFFFFF">
  <div style="font-family:'GT Walsheim Medium', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.04em;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:10px">
  <div style="box-sizing:border-box;background:#111111;border:1px solid rgba(0, 153, 255, 0.42);border-radius:15px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#999999">Starter</div>
    <div style="font-family:'GT Walsheim Medium', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.04em;color:#FFFFFF">$0<span style="font-size:14px;color:#999999;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#999999"><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:34px;padding:10px 14px;border-radius:8px;background:#FFFFFF;color:#0000EE;border:0;font-size:12px;font-weight:400;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#111111;border:1px solid rgba(0, 153, 255, 0.42);border-radius:15px;padding:20px;outline:1.5px solid #0099FF;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#0099FF">Pro</div>
    <div style="font-family:'GT Walsheim Medium', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.04em;color:#FFFFFF">$20<span style="font-size:14px;color:#999999;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#999999"><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:30px;padding:8px 10px;border-radius:8px;background:#FFFFFF;color:#0000EE;border:0;font-size:12px;font-weight:400;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#111111;border:1px solid rgba(0, 153, 255, 0.42);border-radius:15px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#999999">Team</div>
    <div style="font-family:'GT Walsheim Medium', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.04em;color:#FFFFFF">$50<span style="font-size:14px;color:#999999;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#999999"><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:34px;padding:10px 14px;border-radius:8px;background:#FFFFFF;color:#0000EE;border:0;font-size:12px;font-weight:400;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Framer’s exact #000000 canvas and #111111 surface pairing.
NEVER replace GT Walsheim Medium display typography or ignore its signature scale (54px / -0.04em (w500)).
NEVER use thick opaque borders that clash with rgba(0, 153, 255, 0.42) (1px rgba(0,153,255,0.42)).

More Framer

Framer full token spec Framer style guide Framer Buttons Vercel vs Framer

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 →