taste-skill / Components / Notion Pricing Table

Notion-Style Pricing Table

A 3-tier pricing table composed from Notion's extracted tokens — #FFFFFF canvas, #0075DE accent, 8px button radius, NotionInter — with full HTML you can paste into your SaaS.

This is a composition: it is not Notion's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Notion 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	`#FFFFFF`
Highlight / accent	`#0075DE`
Tier card	`box-sizing:border-box;background:transparent;border:1px solid rgba(0, 0, 0, 0.1);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px`
Primary CTA	`Get Notion free` recipe — 36px / 8px / #0075DE
Price type	`NotionInter`, weight 600, tracking -0.048em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#FFFFFF;padding:32px;font-family:NotionInter, Inter, system-ui, -apple-system, sans-serif;color:#000000">
  <div style="font-family:NotionInter, Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.048em;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:8px">
  <div style="box-sizing:border-box;background:transparent;border:1px solid rgba(0, 0, 0, 0.1);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#615D59">Starter</div>
    <div style="font-family:NotionInter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.048em;color:#000000">$0<span style="font-size:14px;color:#615D59;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#615D59"><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:38px;padding:6px 15px;border-radius:8px;background:#0075DE;color:#FFFFFF;border:0;font-size:16px;font-weight:500;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid rgba(0, 0, 0, 0.1);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px;outline:1.5px solid #0075DE;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#0075DE">Pro</div>
    <div style="font-family:NotionInter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.048em;color:#000000">$20<span style="font-size:14px;color:#615D59;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#615D59"><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:4px 14px;border-radius:8px;background:#0075DE;color:#FFFFFF;border:0;font-size:16px;font-weight:500;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid rgba(0, 0, 0, 0.1);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#615D59">Team</div>
    <div style="font-family:NotionInter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.048em;color:#000000">$50<span style="font-size:14px;color:#615D59;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#615D59"><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:38px;padding:6px 15px;border-radius:8px;background:#0075DE;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 Notion’s exact #FFFFFF canvas and #F6F5F4 surface pairing.
NEVER replace NotionInter display typography or ignore its signature scale (96px / -0.048em (w600)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.1) (1px rgba(0,0,0,0.1)).

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

See taste-skill Pro →

Notion-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Notion

Same component, other brands