taste-skill / Components / Cal.com Pricing Table

Cal.com-Style Pricing Table

A 3-tier pricing table composed from Cal.com's extracted tokens — #F4F4F4 canvas, #242424 accent, 12px button radius, Cal Sans — with full HTML you can paste into your SaaS.

This is a composition: it is not Cal.com's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Cal.com 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	`#F4F4F4`
Highlight / accent	`#242424`
Tier card	`box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:12px;padding:20px;box-shadow:rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px`
Primary CTA	`Get started` recipe — 36px / 12px / transparent
Price type	`Cal Sans`, weight 600, tracking 0em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#F4F4F4;padding:32px;font-family:Inter, Inter, system-ui, -apple-system, sans-serif;color:#242424">
  <div style="font-family:'Cal Sans', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:0em;font-weight:600;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:#FFFFFF;border:1px solid #E5E5E5;border-radius:12px;padding:20px;box-shadow:rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#898989">Starter</div>
    <div style="font-family:'Cal Sans', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:0em;color:#242424">$0<span style="font-size:14px;color:#898989;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#898989"><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:36px;padding:8px 12px;border-radius:12px;background:transparent;color:#0000EE;border:0;font-size:12px;font-weight:400;box-shadow:rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:12px;padding:20px;box-shadow:rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;outline:1.5px solid #242424;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#242424">Pro</div>
    <div style="font-family:'Cal Sans', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:0em;color:#242424">$20<span style="font-size:14px;color:#898989;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#898989"><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:36px;padding:8px 12px;border-radius:12px;background:transparent;color:#0000EE;border:0;font-size:12px;font-weight:400;box-shadow:rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:12px;padding:20px;box-shadow:rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#898989">Team</div>
    <div style="font-family:'Cal Sans', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:0em;color:#242424">$50<span style="font-size:14px;color:#898989;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#898989"><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:36px;padding:8px 12px;border-radius:12px;background:transparent;color:#0000EE;border:0;font-size:12px;font-weight:400;box-shadow:rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Cal.com’s exact #F4F4F4 canvas and #FFFFFF surface pairing.
NEVER replace Cal Sans display typography or ignore its signature scale (64px / 1.1 (w600)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

More Cal.com

Cal.com full token spec Cal.com style guide Cal.com Cards Cal.com vs Notion Cal.com vs Dub Cal.com vs Loops

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 Dub Pricing Table Trigger.dev Pricing Table Railway Pricing Table

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

See taste-skill Pro →