taste-skill / Compare styles / Clerk vs WorkOS

Clerk vs WorkOS: design style comparison

Clerk is Tactile Micro-Shadow Auth Components & Electric Violet; WorkOS is Enterprise-Ready Architectural Precision & Untitled Sans. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 16 of 18 tracked tokens differ.

Side-by-side preview

Clerk style · light

Ship the product, not the pixels.

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

Button

Card on extracted card recipe

Accent link: #6C47FF · border rgba(0, 0, 0, 0.06)

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

Both are light-mode designs, but the canvases differ: #F7F7F8 vs #F9F9FB.
Accent: #6C47FF (Clerk) vs #6363F1 (WorkOS).
Headings: Geist / geistNumbers vs Untitled Sans.
Display type: Clerk H1 is 56px / -0.035em (w700); WorkOS H1 is 80px / -0.07em (w500) — WorkOS sets 24px larger headlines.
Primary button radius: 9999px vs 100px; height 30px vs 43px.
Depth: Clerk uses rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 12px 12px -6px, rgba(19, 19, 22, 0.024) 0px 24px 24px -12px 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.4, 0, 0.2, 1) vs ease.

Token table

Token	Clerk	WorkOS
Canvas	`#F7F7F8`	`#F9F9FB`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#131316`	`#29363D`
Muted text	`#747686`	`#5E6C75`
Accent	`#6C47FF`	`#6363F1`
Border	`rgba(0, 0, 0, 0.06)`	`#E8EAED`
Heading font	`Geist / geistNumbers`	`Untitled Sans`
Body font	`Inter / Geist`	`Untitled Sans`
Mono font	`soehneMono`	`IBM Plex Mono`
H1	`56px / -0.035em (w700)`	`80px / -0.07em (w500)`
Button radius	`9999px`	`100px`
Button height	`30px`	`43px`
Most-used radius	`6px`	`4px`
Most-used shadow	`rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 12px 12px -6px, rgba(19, 19, 22, 0.024) 0px 24px 24px -12px`	`rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.17) 0px 5px 10px -4px`
Easing	`cubic-bezier(0.4, 0, 0.2, 1)`	`ease`
Duration	`0.45s`	`0.2s`
Container max-width	`720px`	`1200px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Button	30px	`0px 12px`	`9999px`	`rgba(20, 20, 20, 0.05)` `#131316`	`none`	`13px / 500`

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 Clerk if you want Cool alabaster #F7F7F8 canvas with floating #FFFFFF auth cards, multi-layered ring micro-shadows, tight -0.035em Geist headings, SoehneMono snippets, and #6C47FF electric violet accents — signals: components, micro-shadows, violet, purple, clerk, devtools, tactile, bento.

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: enterprise, sso, workos, untitled-sans, indigo, mint, b2b.

Shared traits: light, auth, saas.

Rules that differ

Clerk never:

NEVER substitute generic uncalibrated gray backgrounds for Clerk’s exact #F7F7F8 canvas and #FFFFFF surface pairing.
NEVER replace Geist / geistNumbers display typography or ignore its signature scale (56px / -0.035em (w700)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.06) (1px rgba(0,0,0,0.06)).

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

Clerk style guide WorkOS style guide Clerk token spec WorkOS token spec Vercel vs Clerk Supabase vs Clerk Clerk vs Upstash Stripe vs WorkOS

Values extracted from https://clerk.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 →