taste-skill / Compare styles / Clerk vs Upstash

Clerk vs Upstash: design style comparison

Clerk is Tactile Micro-Shadow Auth Components & Electric Violet; Upstash is Oversized Emerald Typography & Clean Serverless Daylight. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 15 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)

Upstash style · light

Ship the product, not the pixels.

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

Button QStash

Card on extracted card recipe

Accent link: #00BC7D · border rgba(0, 0, 0, 0.05)

Key differences

Both are light-mode designs, but the canvases differ: #F7F7F8 vs #F5F5F5.
Accent: #6C47FF (Clerk) vs #00BC7D (Upstash).
Headings: Geist / geistNumbers vs Inter Tight.
Display type: Clerk H1 is 56px / -0.035em (w700); Upstash H1 is 128px / -0.025em (w700) — Upstash sets 72px larger headlines.
Primary button radius: 9999px vs 10px; height 30px vs 40px.
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; Upstash uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px most.

Token table

Token	Clerk	Upstash
Canvas	`#F7F7F8`	`#F5F5F5`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#131316`	`#022C22`
Muted text	`#747686`	`#71717B`
Accent	`#6C47FF`	`#00BC7D`
Border	`rgba(0, 0, 0, 0.06)`	`rgba(0, 0, 0, 0.05)`
Heading font	`Geist / geistNumbers`	`Inter Tight`
Body font	`Inter / Geist`	`Inter`
Mono font	`soehneMono`	`JetBrains Mono`
H1	`56px / -0.035em (w700)`	`128px / -0.025em (w700)`
Button radius	`9999px`	`10px`
Button height	`30px`	`40px`
Most-used radius	`6px`	`35.2px`
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) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.45s`	`0.15s`
Container max-width	`720px`	`1280px`
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
Button	40px	`0px 20px`	`10px`	`#FFFFFF` `#065F46`	`none`	`16px / 500`
QStash	64px	`0px 32px`	`16px 16px 0px 0px`	`#F5F5F5` `#71717B`	`2px solid rgba(0, 115, 89, 0.08)`	`24px / 600`
Explore Redis	42px	`8px 20px`	`12px`	`rgba(0, 115, 89, 0.08)` `#007A55`	`none`	`16px / 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: auth, components, micro-shadows, violet, purple, clerk, saas, tactile, bento.

Pick Upstash if you want Soft #F5F5F5 daylight canvas with #FFFFFF cards, deep forest-emerald #022C22 monumental 128px Inter Tight headlines (-0.025em), JetBrains Mono snippets, and #00BC7D emerald accents — signals: serverless, redis, kafka, emerald, green, oversized-type, upstash, inter-tight.

Shared traits: light, devtools.

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

Upstash never:

NEVER substitute generic uncalibrated gray backgrounds for Upstash’s exact #F5F5F5 canvas and #FFFFFF surface pairing.
NEVER replace Inter Tight display typography or ignore its signature scale (128px / -0.025em (w700)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.05) (1px rgba(0,0,0,0.05)).

Go deeper

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

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