taste-skill / Components / WorkOS Pricing Table

WorkOS-Style Pricing Table

A 3-tier pricing table composed from WorkOS's extracted tokens — #F9F9FB canvas, #6363F1 accent, 100px button radius, Untitled Sans — with full HTML you can paste into your SaaS.

This is a composition: it is not WorkOS's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted WorkOS 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	`#F9F9FB`
Highlight / accent	`#6363F1`
Tier card	`box-sizing:border-box;background:transparent;border:7px solid #F0F0F5;border-radius:46px 46px 0px 0px;padding:20px`
Primary CTA	`Get started` recipe — 43px / 100px / #6363F1
Price type	`Untitled Sans`, weight 500, tracking -0.07em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#F9F9FB;padding:32px;font-family:'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;color:#29363D">
  <div style="font-family:'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.07em;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:12px">
  <div style="box-sizing:border-box;background:transparent;border:7px solid #F0F0F5;border-radius:46px 46px 0px 0px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#5E6C75">Starter</div>
    <div style="font-family:'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.07em;color:#29363D">$0<span style="font-size:14px;color:#5E6C75;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#5E6C75"><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:43px;padding:12px 24px;border-radius:100px;background:#23F0C3;color:#030628;border:0;font-size:16px;font-weight:500;box-shadow:rgba(35, 240, 195, 0.7) 0px 0px 14px 0px, rgb(25, 203, 164) 0px 0px 0px 1px inset;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:transparent;border:7px solid #F0F0F5;border-radius:46px 46px 0px 0px;padding:20px;outline:1.5px solid #6363F1;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#6363F1">Pro</div>
    <div style="font-family:'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.07em;color:#29363D">$20<span style="font-size:14px;color:#5E6C75;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#5E6C75"><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:43px;padding:12px 24px;border-radius:100px;background:#6363F1;color:#FFFFFF;border:0;font-size:16px;font-weight:500;box-shadow:rgba(23, 6, 100, 0.035) 0px 24px 22px 0px, rgba(23, 6, 100, 0.055) 0px 8.5846px 8.03036px 0px, rgba(23, 6, 100, 0.067) 0px 4.77692px 3.89859px 0px, rgba(23, 6, 100, 0.082) 0px 2.63479px 1.91116px 0px, rgba(23, 6, 100, 0.12) 0px 1.15891px 0.755676px 0px;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:transparent;border:7px solid #F0F0F5;border-radius:46px 46px 0px 0px;padding:20px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#5E6C75">Team</div>
    <div style="font-family:'Untitled Sans', Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:500;letter-spacing:-0.07em;color:#29363D">$50<span style="font-size:14px;color:#5E6C75;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#5E6C75"><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:43px;padding:12px 24px;border-radius:100px;background:#23F0C3;color:#030628;border:0;font-size:16px;font-weight:500;box-shadow:rgba(35, 240, 195, 0.7) 0px 0px 14px 0px, rgb(25, 203, 164) 0px 0px 0px 1px inset;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for WorkOS’s exact #F9F9FB canvas and #FFFFFF surface pairing.
NEVER replace Untitled Sans display typography or ignore its signature scale (80px / -0.07em (w500)).
NEVER use thick opaque borders that clash with #E8EAED (1px solid #E8EAED).

More WorkOS

WorkOS full token spec WorkOS style guide WorkOS Buttons WorkOS Cards Clerk vs WorkOS Stripe vs WorkOS

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 →