taste-skill / Components / Neon Pricing Table

Neon-Style Pricing Table

A 3-tier pricing table composed from Neon's extracted tokens — #000000 canvas, #34D59A accent, 9999px button radius, Inter — with full HTML you can paste into your SaaS.

This is a composition: it is not Neon's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Neon 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	`#000000`
Highlight / accent	`#34D59A`
Tier card	`box-sizing:border-box;background:#131415;border:1px solid #242628;border-radius:4px;padding:20px`
Primary CTA	`Sign up` recipe — 36px / 9999px / #FFFFFF
Price type	`Inter`, weight 400, tracking -0.04em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#000000;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:-0.04em;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 normal">
  <div style="box-sizing:border-box;background:#131415;border:1px solid #242628;border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#94979E">Starter</div>
    <div style="font-family:Inter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.04em;color:#FFFFFF">$0<span style="font-size:14px;color:#94979E;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#94979E"><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 28px;border-radius:9999px;background:#FFFFFF;color:#1A1A1A;border:0;font-size:16px;font-weight:500;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#131415;border:1px solid #242628;border-radius:4px;padding:20px;outline:1.5px solid #34D59A;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#34D59A">Pro</div>
    <div style="font-family:Inter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.04em;color:#FFFFFF">$20<span style="font-size:14px;color:#94979E;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#94979E"><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:0px 18px;border-radius:9999px;background:#FFFFFF;color:#000000;border:0;font-size:14px;font-weight:500;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#131415;border:1px solid #242628;border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#94979E">Team</div>
    <div style="font-family:Inter, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:400;letter-spacing:-0.04em;color:#FFFFFF">$50<span style="font-size:14px;color:#94979E;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#94979E"><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 28px;border-radius:9999px;background:#FFFFFF;color:#1A1A1A;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 Neon’s exact #000000 canvas and #131415 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (56px / -0.04em (w400)).
NEVER use thick opaque borders that clash with #242628 (1px solid #242628).

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

See taste-skill Pro →

Neon-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Neon

Same component, other brands