taste-skill / Compare styles / Vercel vs Upstash

Vercel vs Upstash: design style comparison

Vercel is Geist Architectural Grid & Swiss Precision Monochrome; 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

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

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: #FAFAFA vs #F5F5F5.
Accent: #0070F3 (Vercel) vs #00BC7D (Upstash).
Headings: GeistSans vs Inter Tight.
Display type: Vercel H1 is 64px / -0.06em (w400); Upstash H1 is 128px / -0.025em (w700) — Upstash sets 64px larger headlines.
Primary button radius: 6px vs 10px; height 32px vs 40px.
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; 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	Vercel	Upstash
Canvas	`#FAFAFA`	`#F5F5F5`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#171717`	`#022C22`
Muted text	`#4D4D4D`	`#71717B`
Accent	`#0070F3`	`#00BC7D`
Border	`#EBEBEB`	`rgba(0, 0, 0, 0.05)`
Heading font	`GeistSans`	`Inter Tight`
Body font	`GeistSans`	`Inter`
Mono font	`GeistMono`	`JetBrains Mono`
H1	`64px / -0.06em (w400)`	`128px / -0.025em (w700)`
Button radius	`6px`	`10px`
Button height	`32px`	`40px`
Most-used radius	`6px`	`35.2px`
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(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.1s`	`0.15s`
Container max-width	`1448px`	`1280px`
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	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 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 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, devtools.

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

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

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

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