taste-skill / Compare styles / Vercel vs Supabase

Vercel vs Supabase: design style comparison

Vercel is Geist Architectural Grid & Swiss Precision Monochrome; Supabase is Postgres Emerald Technical Clarity & Clean Modular Bento. 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

Supabase style · light

Ship the product, not the pixels.

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

Request a demo Read docs for React

Card on extracted card recipe

Accent link: #0E7E4E · border rgba(0, 0, 0, 0.08)

Key differences

Both are light-mode designs, but the canvases differ: #FAFAFA vs #FDFDFD.
Accent: #0070F3 (Vercel) vs #0E7E4E (Supabase).
Headings: GeistSans vs Manrope.
Display type: Vercel H1 is 64px / -0.06em (w400); Supabase H1 is 46px / 0em (w500) — Vercel sets 18px larger headlines.
Primary button radius: 6px vs 9.29231px; height 32px vs 38px.
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; Supabase uses rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset most.

Token table

Token	Vercel	Supabase
Canvas	`#FAFAFA`	`#FDFDFD`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#171717`	`#030303`
Muted text	`#4D4D4D`	`#696969`
Accent	`#0070F3`	`#0E7E4E`
Border	`#EBEBEB`	`rgba(0, 0, 0, 0.08)`
Heading font	`GeistSans`	`Manrope`
Body font	`GeistSans`	`Inter / Manrope`
Mono font	`GeistMono`	`Source Code Pro`
H1	`64px / -0.06em (w400)`	`46px / 0em (w500)`
Button radius	`6px`	`9.29231px`
Button height	`32px`	`38px`
Most-used radius	`6px`	`10.6667px`
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.12) 0px 0px 0px 1px inset`
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
Request a demo	38px	`8px 16px`	`9.29231px`	`#FFFFFF` `#030303`	`none`	`14px / 500`
Read docs for React	30px	`6px 12px`	`9999px`	`#FFFFFF` `#464646`	`1px solid rgba(0, 0, 0, 0.08)`	`12px / 450`
Product	64px	`8px 10px`	`8.86154px`	`transparent` `#030303`	`none`	`14px / 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 Supabase if you want Crisp #FDFDFD canvas with rgba(0,0,0,0.08) hairline bento modules, geometric Manrope headings, Source Code Pro SQL snippets, and signature #0E7E4E / #3ECF8E Postgres emerald accents — signals: database, postgres, emerald, green, devtools, backend, supabase, bento, sql, monospace, open-source.

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

Supabase never:

NEVER substitute generic uncalibrated gray backgrounds for Supabase’s exact #FDFDFD canvas and #FFFFFF surface pairing.
NEVER replace Manrope display typography or ignore its signature scale (46px / 0em (w500)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.08) (1px rgba(0,0,0,0.08)).

Go deeper

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

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