taste-skill / Components / Dub Pricing Table

Dub-Style Pricing Table

A 3-tier pricing table composed from Dub's extracted tokens — #FAFAFA canvas, #000000 accent, 8px button radius, Satoshi — with full HTML you can paste into your SaaS.

This is a composition: it is not Dub's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Dub 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	`#FAFAFA`
Highlight / accent	`#000000`
Tier card	`box-sizing:border-box;background:transparent;border:1px solid #E5E5E5;border-radius:20px 20px 0px 0px;padding:12px 12px`
Primary CTA	`Sign up` recipe — 32px / 8px / #000000
Price type	`Satoshi`, weight 500, tracking 0em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#FAFAFA;padding:32px;font-family:'Inter / Satoshi', Inter, system-ui, -apple-system, sans-serif;color:#171717">
  <div style="font-family:Satoshi, Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:0em;font-weight:500;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 #E5E5E5;border-radius:20px 20px 0px 0px;padding:12px 12px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#737373">Starter</div>
    <div style="font-family:Satoshi, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:0em;color:#171717">$0<span style="font-size:14px;color:#737373;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#737373"><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:8px 20px;border-radius:8px;background:#000000;color:#FFFFFF;border:1px solid #000000;font-size:14px;font-weight:500;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid #E5E5E5;border-radius:20px 20px 0px 0px;padding:12px 12px;outline:1.5px solid #000000;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#000000">Pro</div>
    <div style="font-family:Satoshi, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:0em;color:#171717">$20<span style="font-size:14px;color:#737373;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#737373"><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 16px;border-radius:8px;background:#000000;color:#FFFFFF;border:1px solid #000000;font-size:14px;font-weight:400;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid #E5E5E5;border-radius:20px 20px 0px 0px;padding:12px 12px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#737373">Team</div>
    <div style="font-family:Satoshi, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:0em;color:#171717">$50<span style="font-size:14px;color:#737373;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#737373"><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:8px 20px;border-radius:8px;background:#000000;color:#FFFFFF;border:1px solid #000000;font-size:14px;font-weight:500;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Dub’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace Satoshi display typography or ignore its signature scale (48px / 1.15 (w500)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

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

See taste-skill Pro →

Dub-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Dub

Same component, other brands