taste-skill / Compare styles / Vercel vs Clerk

Vercel vs Clerk: design style comparison

Vercel is Geist Architectural Grid & Swiss Precision Monochrome; Clerk is Tactile Micro-Shadow Auth Components & Electric Violet. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 14 of 18 tracked tokens differ.

Side-by-side preview

Vercel style · light

Ship the product, not the pixels.

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

Card on extracted card recipe

Accent link: #0070F3 · border #EBEBEB

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)

Key differences

Both are light-mode designs, but the canvases differ: #FAFAFA vs #F7F7F8.
Accent: #0070F3 (Vercel) vs #6C47FF (Clerk).
Headings: GeistSans vs Geist / geistNumbers.
Display type: Vercel H1 is 64px / -0.06em (w400); Clerk H1 is 56px / -0.035em (w700) — Vercel sets 8px larger headlines.
Primary button radius: 6px vs 9999px; height 32px vs 30px.
Depth: Vercel uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px most; 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.

Token table

Token	Vercel	Clerk
Canvas	`#FAFAFA`	`#F7F7F8`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#171717`	`#131316`
Muted text	`#4D4D4D`	`#747686`
Accent	`#0070F3`	`#6C47FF`
Border	`#EBEBEB`	`rgba(0, 0, 0, 0.06)`
Heading font	`GeistSans`	`Geist / geistNumbers`
Body font	`GeistSans`	`Inter / Geist`
Mono font	`GeistMono`	`soehneMono`
H1	`64px / -0.06em (w400)`	`56px / -0.035em (w700)`
Button radius	`6px`	`9999px`
Button height	`32px`	`30px`
Most-used radius same	`6px`	`6px`
Most-used shadow	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px`	`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`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.1s`	`0.45s`
Container max-width	`1448px`	`720px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign Up	32px	`0px 6px`	`6px`	`#171717` `#FFFFFF`	`none`	`14px / 500`
Deploy now	40px	`0px 12px`	`9999px`	`#171717` `#FFFFFF`	`none`	`16px / 500`
Log In	32px	`0px 6px`	`6px`	`#FFFFFF` `#171717`	`none`	`14px / 500`

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

Which style should you pick?

Pick Vercel if you want Architectural #FAFAFA / #FFFFFF daylight grid with exposed 1px #EBEBEB structural hairlines, corner crosshair markers, ultra-tight -0.06em GeistSans display type, and #171717 monochrome CTAs — signals: monochrome, grid, crosshairs, geist, vercel, developer, cloud, infra, minimal, swiss, high-contrast, 1px-grid.

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, devtools, saas, tactile, bento.

Shared traits: light.

Rules that differ

Vercel never:

NEVER substitute generic uncalibrated gray backgrounds for Vercel’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace GeistSans display typography or ignore its signature scale (64px / -0.06em (w400)).
NEVER use thick opaque borders that clash with #EBEBEB (1px solid #EBEBEB).

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

Go deeper

Vercel style guide Clerk style guide Vercel token spec Clerk token spec Linear vs Vercel Vercel vs Railway Vercel vs Framer Vercel vs Supabase Vercel vs Upstash Clerk vs WorkOS

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