taste-skill / Components / Cursor Pricing Table

Cursor-Style Pricing Table

A 3-tier pricing table composed from Cursor's extracted tokens — #F7F7F4 canvas, #26251E accent, 9999px button radius, CursorGothic — with full HTML you can paste into your SaaS.

This is a composition: it is not Cursor's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Cursor 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	`#F7F7F4`
Highlight / accent	`#26251E`
Tier card	`box-sizing:border-box;background:#F2F1ED;border:1px solid rgba(39, 39, 29, 0.1);border-radius:10px;padding:20px;box-shadow:rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`
Primary CTA	`Contact sales` recipe — 27px / 9999px / transparent
Price type	`CursorGothic`, weight 400, tracking -0.02em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#F7F7F4;padding:32px;font-family:'CursorGothic / EB Garamond', Inter, system-ui, -apple-system, sans-serif;color:#26251E">
  <div style="font-family:CursorGothic, Inter, system-ui, -apple-system, sans-serif;font-size:36px;letter-spacing:-0.02em;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:8px">
  <div style="box-sizing:border-box;background:#F2F1ED;border:1px solid rgba(39, 39, 29, 0.1);border-radius:10px;padding:20px;box-shadow:rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:rgba(38, 36, 29, 0.55)">Starter</div>
    <div style="font-family:CursorGothic, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.02em;color:#26251E">$0<span style="font-size:14px;color:rgba(38, 36, 29, 0.55);font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:rgba(38, 36, 29, 0.55)"><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:43px;padding:12.48px 21.6px;border-radius:9999px;background:#E6E5E0;color:#26251E;border:1px solid rgba(42, 42, 42, 0.02);font-size:16px;font-weight:400;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#F2F1ED;border:1px solid rgba(39, 39, 29, 0.1);border-radius:10px;padding:20px;box-shadow:rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;outline:1.5px solid #26251E;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#26251E">Pro</div>
    <div style="font-family:CursorGothic, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.02em;color:#26251E">$20<span style="font-size:14px;color:rgba(38, 36, 29, 0.55);font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:rgba(38, 36, 29, 0.55)"><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:27px;padding:5.6px 10.5px;border-radius:9999px;background:transparent;color:#26251E;border:1px solid rgba(40, 35, 30, 0.2);font-size:14px;font-weight:400;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#F2F1ED;border:1px solid rgba(39, 39, 29, 0.1);border-radius:10px;padding:20px;box-shadow:rgba(0, 0, 0, 0.14) 0px 28px 70px 0px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:rgba(38, 36, 29, 0.55)">Team</div>
    <div style="font-family:CursorGothic, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.02em;color:#26251E">$50<span style="font-size:14px;color:rgba(38, 36, 29, 0.55);font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:rgba(38, 36, 29, 0.55)"><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:43px;padding:12.48px 21.6px;border-radius:9999px;background:#E6E5E0;color:#26251E;border:1px solid rgba(42, 42, 42, 0.02);font-size:16px;font-weight:400;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Cursor’s exact #F7F7F4 canvas and #F2F1ED surface pairing.
NEVER replace CursorGothic display typography or ignore its signature scale (36px / -0.02em (w400)).
NEVER use thick opaque borders that clash with rgba(39, 39, 29, 0.1) (1px rgba(39,39,29,0.1)).

More Cursor

Cursor full token spec Cursor style guide Cursor Buttons Cursor Cards Raycast vs Cursor Cursor vs Anthropic Cursor vs Notion

Same component, other brands

Linear Pricing Table Stripe Pricing Table Resend Pricing Table Vercel Pricing Table Supabase Pricing Table Raycast Pricing Table Clerk Pricing Table Mintlify Pricing Table Cal.com 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 →