taste-skill / Components / Resend Pricing Table

Resend-Style Pricing Table

A 3-tier pricing table composed from Resend's extracted tokens — #000000 canvas, #00A3FF accent, 16px button radius, Domaine / ABC Favorit — with full HTML you can paste into your SaaS.

This is a composition: it is not Resend's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Resend 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	`#00A3FF`
Tier card	`box-sizing:border-box;background:transparent;border:1px solid rgba(212, 234, 255, 0.19);border-radius:24px;padding:20px`
Primary CTA	`Get started` recipe — 40px / 16px / transparent
Price type	`Domaine / ABC Favorit`, weight 600, tracking -0.01em

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:#F0F0F0">
  <div style="font-family:'Domaine / ABC Favorit', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.01em;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:16px">
  <div style="box-sizing:border-box;background:transparent;border:1px solid rgba(212, 234, 255, 0.19);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#A1A4A5">Starter</div>
    <div style="font-family:'Domaine / ABC Favorit', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.01em;color:#F0F0F0">$0<span style="font-size:14px;color:#A1A4A5;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#A1A4A5"><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:48px;padding:0px 20px;border-radius:16px;background:transparent;color:#FFFFFF;border:2px solid rgba(255, 255, 255, 0.05);font-size:16px;font-weight:600;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) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;backdrop-filter:blur(25px);margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid rgba(212, 234, 255, 0.19);border-radius:24px;padding:20px;outline:1.5px solid #00A3FF;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#00A3FF">Pro</div>
    <div style="font-family:'Domaine / ABC Favorit', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.01em;color:#F0F0F0">$20<span style="font-size:14px;color:#A1A4A5;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#A1A4A5"><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:40px;padding:0px 16px;border-radius:16px;background:transparent;color:#FFFFFF;border:2px solid rgba(255, 255, 255, 0.05);font-size:14px;font-weight:600;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) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;backdrop-filter:blur(25px);margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:transparent;border:1px solid rgba(212, 234, 255, 0.19);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#A1A4A5">Team</div>
    <div style="font-family:'Domaine / ABC Favorit', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.01em;color:#F0F0F0">$50<span style="font-size:14px;color:#A1A4A5;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#A1A4A5"><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:48px;padding:0px 20px;border-radius:16px;background:transparent;color:#FFFFFF;border:2px solid rgba(255, 255, 255, 0.05);font-size:16px;font-weight:600;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) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;backdrop-filter:blur(25px);margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER use a single generic sans-serif font across the entire page—Resend’s signature tension comes from combining an editorial serif (Domaine for Hero H1), a tight neo-grotesque display sans (ABC Favorit with -0.05em tracking for H2), Inter for body copy, and CommitMono for code.
NEVER use warm or neutral gray borders on #000000—always use cool ice-tinted translucent borders (rgba(212, 234, 255, 0.19) / --slate-a6 or rgba(211, 237, 246, 0.11)).
NEVER use loose letter-spacing on H2 headings—Resend uses an aggressive -0.05em (-2.8px at 56px) tracking on section headings.

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

See taste-skill Pro →

Resend-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Resend

Same component, other brands