taste-skill / Components / Turso Pricing Table

Turso-Style Pricing Table

A 3-tier pricing table composed from Turso's extracted tokens — #0F1317 canvas, #4FF8D2 accent, 9999px button radius, Inter (800 ExtraBold) — with full HTML you can paste into your SaaS.

This is a composition: it is not Turso's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted Turso 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	`#0F1317`
Highlight / accent	`#4FF8D2`
Tier card	`box-sizing:border-box;background:#0D1318;border:1px solid rgba(40, 57, 69, 0.8);border-radius:12px;padding:20px;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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
Primary CTA	`Try Cloud free` recipe — 44px / 9999px / #4FF8D2
Price type	`Inter (800 ExtraBold)`, weight 800, tracking -0.025em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#0F1317;padding:32px;font-family:Inter, Inter, system-ui, -apple-system, sans-serif;color:#FFFFFF">
  <div style="font-family:'Inter (800 ExtraBold)', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.025em;font-weight:800;text-align:center;margin-bottom:24px">Pricing</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px">
  <div style="box-sizing:border-box;background:#0D1318;border:1px solid rgba(40, 57, 69, 0.8);border-radius:12px;padding:20px;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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:rgba(255, 255, 255, 0.5)">Starter</div>
    <div style="font-family:'Inter (800 ExtraBold)', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.025em;color:#FFFFFF">$0<span style="font-size:14px;color:rgba(255, 255, 255, 0.5);font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:rgba(255, 255, 255, 0.5)"><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:12px 24px;border-radius:9999px;background:#4FF8D2;color:#000000;border:0;font-size:14px;font-weight:600;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#0D1318;border:1px solid rgba(40, 57, 69, 0.8);border-radius:12px;padding:20px;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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;outline:1.5px solid #4FF8D2;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#4FF8D2">Pro</div>
    <div style="font-family:'Inter (800 ExtraBold)', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.025em;color:#FFFFFF">$20<span style="font-size:14px;color:rgba(255, 255, 255, 0.5);font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:rgba(255, 255, 255, 0.5)"><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:12px 24px;border-radius:9999px;background:#4FF8D2;color:#000000;border:0;font-size:14px;font-weight:600;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#0D1318;border:1px solid rgba(40, 57, 69, 0.8);border-radius:12px;padding:20px;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.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:rgba(255, 255, 255, 0.5)">Team</div>
    <div style="font-family:'Inter (800 ExtraBold)', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.025em;color:#FFFFFF">$50<span style="font-size:14px;color:rgba(255, 255, 255, 0.5);font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:rgba(255, 255, 255, 0.5)"><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:12px 24px;border-radius:9999px;background:#4FF8D2;color:#000000;border:0;font-size:14px;font-weight:600;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for Turso’s exact #0F1317 canvas and #0D1318 surface pairing.
NEVER replace Inter (800 ExtraBold) display typography or ignore its signature scale (60px / -0.025em (w800)).
NEVER use thick opaque borders that clash with #283945 (1px solid #283945).

More Turso

Turso full token spec Turso style guide Turso Cards PlanetScale vs Turso Turso vs Neon

Same component, other brands

Linear Pricing Table Stripe Pricing Table Resend Pricing Table Vercel Pricing Table Supabase Pricing Table Raycast Pricing Table Cursor Pricing Table Clerk Pricing Table Mintlify Pricing Table Cal.com Pricing Table Dub Pricing Table Trigger.dev Pricing Table

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

See taste-skill Pro →