taste-skill / Components / Loops Pricing Table

Loops-Style Pricing Table

A 3-tier pricing table composed from Loops's extracted tokens — #FDFDFC canvas, #7D1B0C accent, 40px button radius, Newsreader — with full HTML you can paste into your SaaS.

This is a composition: it is not Loops's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Loops 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	`#FDFDFC`
Highlight / accent	`#7D1B0C`
Tier card	`box-sizing:border-box;background:#F1F0EF;border:1px solid rgba(38, 38, 26, 0.08);border-radius:12px;padding:4px 4px;box-shadow:rgba(33, 32, 28, 0.16) 0px 18px 46px 0px, rgba(33, 32, 28, 0.08) 0px 3px 10px 0px`
Primary CTA	`Start for free` recipe — 44px / 40px / #21201C
Price type	`Newsreader`, weight 500, tracking -0.02em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#FDFDFC;padding:32px;font-family:Inter, Inter, system-ui, -apple-system, sans-serif;color:#21201C">
  <div style="font-family:Newsreader, Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.02em;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:10px">
  <div style="box-sizing:border-box;background:#F1F0EF;border:1px solid rgba(38, 38, 26, 0.08);border-radius:12px;padding:4px 4px;box-shadow:rgba(33, 32, 28, 0.16) 0px 18px 46px 0px, rgba(33, 32, 28, 0.08) 0px 3px 10px 0px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#63625E">Starter</div>
    <div style="font-family:Newsreader, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.02em;color:#21201C">$0<span style="font-size:14px;color:#63625E;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#63625E"><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:52px;padding:14px 18px;border-radius:999px;background:#FFF4EC;color:#FDFDFC;border:0;font-size:12px;font-weight:400;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#F1F0EF;border:1px solid rgba(38, 38, 26, 0.08);border-radius:12px;padding:4px 4px;box-shadow:rgba(33, 32, 28, 0.16) 0px 18px 46px 0px, rgba(33, 32, 28, 0.08) 0px 3px 10px 0px;outline:1.5px solid #7D1B0C;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#7D1B0C">Pro</div>
    <div style="font-family:Newsreader, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.02em;color:#21201C">$20<span style="font-size:14px;color:#63625E;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#63625E"><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:44px;padding:10px 20px;border-radius:40px;background:#21201C;color:#0000EE;border:0;font-size:12px;font-weight:400;box-shadow:rgba(255, 255, 255, 0.05) 0px 1px 2px 0px inset, rgba(28, 25, 23, 0.14) 0px 2px 5px 0px, rgba(28, 25, 23, 0.3) 0px 8px 18px -12px;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#F1F0EF;border:1px solid rgba(38, 38, 26, 0.08);border-radius:12px;padding:4px 4px;box-shadow:rgba(33, 32, 28, 0.16) 0px 18px 46px 0px, rgba(33, 32, 28, 0.08) 0px 3px 10px 0px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#63625E">Team</div>
    <div style="font-family:Newsreader, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.02em;color:#21201C">$50<span style="font-size:14px;color:#63625E;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#63625E"><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:52px;padding:14px 18px;border-radius:999px;background:#FFF4EC;color:#FDFDFC;border:0;font-size:12px;font-weight:400;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Loops’s exact #FDFDFC canvas and #F9F9F8 surface pairing.
NEVER replace Newsreader display typography or ignore its signature scale (44px / -0.02em (w500)).
NEVER use thick opaque borders that clash with #E9E8E6 (1px solid #E9E8E6).

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

See taste-skill Pro →

Loops-Style Pricing Table

Live pricing table

Tokens used

Copy-paste HTML

Keep it on-brand

More Loops

Same component, other brands