taste-skill / Compare styles / Stripe vs WorkOS

Stripe vs WorkOS: design style comparison

Stripe is High-Craft Financial Infrastructure & Editorial Light/Navy Dual-Mode; WorkOS is Enterprise-Ready Architectural Precision & Untitled Sans. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 18 of 18 tracked tokens differ.

Side-by-side preview

Stripe style · dual

Ship the product, not the pixels.

Preview text rendered with the extracted Stripe canvas, text, muted and accent tokens.

Get started Sign in

Card on extracted card recipe

Accent link: #533AFD · border #E5EDF5

WorkOS style · light

Ship the product, not the pixels.

Preview text rendered with the extracted WorkOS canvas, text, muted and accent tokens.

Get started Read the docs

Card on extracted card recipe

Accent link: #6363F1 · border #E8EAED

Key differences

Stripe is a dual design (canvas #FFFFFF) while WorkOS is light (canvas #F9F9FB).
Accent: #533AFD (Stripe) vs #6363F1 (WorkOS).
Headings: Söhne Variable (sohne-var) vs Untitled Sans.
Display type: Stripe H1 is 48px–56px / -0.025em (w300); WorkOS H1 is 80px / -0.07em (w500) — WorkOS sets 32px larger headlines.
Primary button radius: 4px vs 100px; height 48px vs 43px.
Depth: Stripe uses rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px most; WorkOS uses rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.17) 0px 5px 10px -4px most.
Motion: cubic-bezier(0.25, 1, 0.5, 1) vs ease.

Token table

Token	Stripe	WorkOS
Canvas	`#FFFFFF`	`#F9F9FB`
Surface	`#F8FAFD`	`#FFFFFF`
Text	`#061B31`	`#29363D`
Muted text	`#50617A`	`#5E6C75`
Accent	`#533AFD`	`#6363F1`
Border	`#E5EDF5`	`#E8EAED`
Heading font	`Söhne Variable (sohne-var)`	`Untitled Sans`
Body font	`Söhne Variable`	`Untitled Sans`
Mono font	`SourceCodePro`	`IBM Plex Mono`
H1	`48px–56px / -0.025em (w300)`	`80px / -0.07em (w500)`
Button radius	`4px`	`100px`
Button height	`48px`	`43px`
Most-used radius	`6px`	`4px`
Most-used shadow	`rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`	`rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.17) 0px 5px 10px -4px`
Easing	`cubic-bezier(0.25, 1, 0.5, 1)`	`ease`
Duration	`0.3s`	`0.2s`
Container max-width	`1266px`	`1200px`
Mode	`dual`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	48px	`15.5px 24px`	`4px`	`#533AFD` `#FFFFFF`	`none`	`16px / 400`
Sign in	40px	`11.5px 20px`	`4px`	`transparent` `#533AFD`	`1px solid #FFFFFF`	`14px / 400`
Sign up with Google	48px	`14.5px 24px`	`4px`	`rgba(255, 255, 255, 0.65)` `#533AFD`	`1px solid #B9B9F9`	`16px / 400`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	43px	`12px 24px`	`100px`	`#6363F1` `#FFFFFF`	`none`	`16px / 500`
Read the docs	43px	`12px 24px`	`100px`	`#23F0C3` `#030628`	`none`	`16px / 500`
Read more	51px	`12px 18px`	`100px`	`transparent` `#6363F1`	`1px solid #E8EAED`	`14px / 500`

Which style should you pick?

Pick Stripe if you want Daylight #FFFFFF & cool ice-slate #E5EDF5 bento grids contrasted with #0D1738 deep navy sections, light-weight 300 Söhne Variable typography, and 4px #533AFD CTAs — signals: dual, fintech, payments, billing, pricing, stripe, mesh-gradient, editorial, navy, bento, revenue.

Pick WorkOS if you want Cool porcelain #F9F9FB canvas with #FFFFFF enterprise cards, #E8EAED 1px hairlines, monumental 80px Untitled Sans headings with ultra-tight -0.07em tracking, and #6363F1 indigo + #23F0C3 mint accents — signals: sso, auth, saas, workos, untitled-sans, mint, b2b.

Shared traits: light, enterprise, indigo.

Rules that differ

Stripe never:

NEVER use pure black (#000000) or neutral gray (#111827) for headings or dark sections—Stripe uses deep maritime ink-navy (#061B31 for text, #0D1738 for dark sections) and cool slate (#50617A) for body copy.
NEVER use heavy bold (700/800) weights on display headlines—Stripe’s current HDS aesthetic uses refined light-weight Söhne Variable (font-light / 300) at large sizes (48px–56px) with tight negative tracking (-0.02em to -0.025em) for an architectural editorial feel.
NEVER use pill-shaped (rounded-full) or overly rounded (rounded-2xl) primary buttons—Stripe’s HDS buttons use crisp 4px corners (--hds-space-button-radius-lg: 4px, rounded-[4px]) with 48px height (h-12 px-6).

WorkOS never:

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).

Go deeper

Stripe style guide WorkOS style guide Stripe token spec WorkOS token spec Linear vs Stripe Stripe vs Polar Stripe vs Ashby Clerk vs WorkOS

Values extracted from https://stripe.com and https://workos.com. Not affiliated with either company.

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

See taste-skill Pro →