taste-skill / Components / Raycast Pricing Table

Raycast-Style Pricing Table

A 3-tier pricing table composed from Raycast's extracted tokens — #07080A canvas, #FF6363 accent, 10px button radius, Inter — with full HTML you can paste into your SaaS.

This is a composition: it is not Raycast's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Raycast 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	`#07080A`
Highlight / accent	`#FF6363`
Tier card	`box-sizing:border-box;background:rgba(0, 0, 0, 0.44);border:1px solid rgba(255, 255, 255, 0.08);border-radius:19px;padding:8px 8px;box-shadow:rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;backdrop-filter:blur(2px)`
Primary CTA	`Sync linear tasks` recipe — 32px / 10px / rgba(255, 255, 255, 0.1)
Price type	`Inter`, weight 600, tracking 0em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#07080A;padding:32px;font-family:Inter, Inter, system-ui, -apple-system, sans-serif;color:#FFFFFF">
  <div style="font-family:Inter, 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:rgba(0, 0, 0, 0.44);border:1px solid rgba(255, 255, 255, 0.08);border-radius:19px;padding:8px 8px;box-shadow:rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;backdrop-filter:blur(2px);display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#9CA3AF">Starter</div>
    <div style="font-family:Inter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:0em;color:#FFFFFF">$0<span style="font-size:14px;color:#9CA3AF;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#9CA3AF"><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:2px 12px;border-radius:4px;background:#E6E6E6;color:#2F3031;border:0;font-size:14px;font-weight:500;box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:rgba(0, 0, 0, 0.44);border:1px solid rgba(255, 255, 255, 0.08);border-radius:19px;padding:8px 8px;box-shadow:rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;backdrop-filter:blur(2px);outline:1.5px solid #FF6363;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#FF6363">Pro</div>
    <div style="font-family:Inter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:0em;color:#FFFFFF">$20<span style="font-size:14px;color:#9CA3AF;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#9CA3AF"><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:8px 12px;border-radius:10px;background:rgba(255, 255, 255, 0.1);color:#FFFFFF;border:0;font-size:13px;font-weight:400;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:rgba(0, 0, 0, 0.44);border:1px solid rgba(255, 255, 255, 0.08);border-radius:19px;padding:8px 8px;box-shadow:rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;backdrop-filter:blur(2px);display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#9CA3AF">Team</div>
    <div style="font-family:Inter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:0em;color:#FFFFFF">$50<span style="font-size:14px;color:#9CA3AF;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#9CA3AF"><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:2px 12px;border-radius:4px;background:#E6E6E6;color:#2F3031;border:0;font-size:14px;font-weight:500;box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Raycast’s exact #07080A canvas and #141517 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (64px / 1.1 (w600)).
NEVER use thick opaque borders that clash with rgba(255, 255, 255, 0.08) (1px rgba(255,255,255,0.08)).

More Raycast

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

Same component, other brands

Linear Pricing Table Stripe Pricing Table Resend Pricing Table Vercel Pricing Table Supabase Pricing Table Cursor 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 →