taste-skill / Compare styles / Vercel vs Framer

Vercel vs Framer: design style comparison

Vercel is Geist Architectural Grid & Swiss Precision Monochrome; Framer is Pitch-Black Interactive Canvas & Electric #0099FF Blue Glow. 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

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

Framer style · dark

Ship the product, not the pixels.

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

Card on surface + border tokens

Accent link: #0099FF · border rgba(0, 153, 255, 0.42)

Key differences

Vercel is a light design (canvas #FAFAFA) while Framer is dark (canvas #000000).
Accent: #0070F3 (Vercel) vs #0099FF (Framer).
Headings: GeistSans vs GT Walsheim Medium.
Display type: Vercel H1 is 64px / -0.06em (w400); Framer H1 is 54px / -0.04em (w500) — Vercel sets 10px larger headlines.
Primary button radius: 6px vs 8px; 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; Framer uses rgba(255, 255, 255, 0.35) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.35) 0px -1px 1px 0px inset most.

Token table

Token	Vercel	Framer
Canvas	`#FAFAFA`	`#000000`
Surface	`#FFFFFF`	`#111111`
Text	`#171717`	`#FFFFFF`
Muted text	`#4D4D4D`	`#999999`
Accent	`#0070F3`	`#0099FF`
Border	`#EBEBEB`	`rgba(0, 153, 255, 0.42)`
Heading font	`GeistSans`	`GT Walsheim Medium`
Body font	`GeistSans`	`Inter`
Mono font	`GeistMono`	`JetBrains Mono`
H1	`64px / -0.06em (w400)`	`54px / -0.04em (w500)`
Button radius	`6px`	`8px`
Button height	`32px`	`30px`
Most-used radius	`6px`	`15px`
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(255, 255, 255, 0.35) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.35) 0px -1px 1px 0px inset`
Easing	`cubic-bezier(0.4, 0, 0.2, 1)`	`—`
Duration	`0.1s`	`—`
Container max-width	`1448px`	`1200px`
Mode	`light`	`dark`

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
Sign up	30px	`8px 10px`	`8px`	`#FFFFFF` `#0000EE`	`none`	`12px / 400`
Get started for free	34px	`10px 14px`	`8px`	`#FFFFFF` `#0000EE`	`none`	`12px / 400`
Copy	30px	`0px 10px`	`8px`	`#1F1F1F` `#000000`	`none`	`12px / 400`

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: light, monochrome, grid, crosshairs, geist, vercel, developer, cloud, infra, minimal, swiss, high-contrast, 1px-grid.

Pick Framer if you want Pure #000000 canvas with #111111 elevated stage cards, glowing rgba(0,153,255,0.42) borders, 54px GT Walsheim Medium headlines (-0.04em tracking), and #0099FF electric blue + #FFFFFF 8px CTAs — signals: dark, design, web-builder, no-code, framer, electric-blue, gt-walsheim, creative, motion.

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

Framer never:

NEVER substitute generic uncalibrated gray backgrounds for Framer’s exact #000000 canvas and #111111 surface pairing.
NEVER replace GT Walsheim Medium display typography or ignore its signature scale (54px / -0.04em (w500)).
NEVER use thick opaque borders that clash with rgba(0, 153, 255, 0.42) (1px rgba(0,153,255,0.42)).

Go deeper

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

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