taste-skill / Components / Linear Pricing Table

Linear-Style Pricing Table

A 3-tier pricing table composed from Linear's extracted tokens — #08090A canvas, #5E6AD2 accent, 9999px button radius, Inter Variable — with full HTML you can paste into your SaaS.

This is a composition: it is not Linear's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Linear 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	`#08090A`
Highlight / accent	`#5E6AD2`
Tier card	`box-sizing:border-box;background:rgba(255, 255, 255, 0.01);border:1px solid rgba(255, 255, 255, 0.05);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 2px`
Primary CTA	`Sign up` recipe — 32px / 9999px / #E5E5E6
Price type	`Inter Variable`, weight 510, tracking -0.022em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#08090A;padding:32px;font-family:'Inter Variable', Inter, system-ui, -apple-system, sans-serif;color:#F7F8F8">
  <div style="font-family:'Inter Variable', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.022em;font-weight:510;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:rgba(255, 255, 255, 0.01);border:1px solid rgba(255, 255, 255, 0.05);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#8A8F98">Starter</div>
    <div style="font-family:'Inter Variable', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:510;letter-spacing:-0.022em;color:#F7F8F8">$0<span style="font-size:14px;color:#8A8F98;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#8A8F98"><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:44px;padding:0px 20px;border-radius:9999px;background:#E5E5E6;color:#08090A;border:1px solid #E5E5E6;font-size:16px;font-weight:510;box-shadow:rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:rgba(255, 255, 255, 0.01);border:1px solid rgba(255, 255, 255, 0.05);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;outline:1.5px solid #5E6AD2;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#5E6AD2">Pro</div>
    <div style="font-family:'Inter Variable', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:510;letter-spacing:-0.022em;color:#F7F8F8">$20<span style="font-size:14px;color:#8A8F98;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#8A8F98"><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:0px 12px;border-radius:9999px;background:#E5E5E6;color:#08090A;border:1px solid #E5E5E6;font-size:13px;font-weight:510;box-shadow:rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:rgba(255, 255, 255, 0.01);border:1px solid rgba(255, 255, 255, 0.05);border-radius:8px;padding:20px;box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#8A8F98">Team</div>
    <div style="font-family:'Inter Variable', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:510;letter-spacing:-0.022em;color:#F7F8F8">$50<span style="font-size:14px;color:#8A8F98;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#8A8F98"><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:44px;padding:0px 20px;border-radius:9999px;background:#E5E5E6;color:#08090A;border:1px solid #E5E5E6;font-size:16px;font-weight:510;box-shadow:rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER use pure #000000 for large card surfaces or pure #FFFFFF for body text—always use #08090A canvas, #0F1011/#141516 cards, and #F7F8F8 primary text.
NEVER use thick opaque gray borders (border-gray-700, border-zinc-600)—always use 1px translucent white hairlines (border-white/[0.08] or border-white/[0.05]).
NEVER use standard font-bold (700 or 800) on large headlines—Linear uses custom variable medium weight (font-[510]) with tight negative tracking (tracking-[-0.022em]) and leading-none (1.0).

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

See taste-skill Pro →

Linear-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Linear

Same component, other brands