taste-skill / Compare styles / Supabase vs Upstash

Supabase vs Upstash: design style comparison

Supabase is Postgres Emerald Technical Clarity & Clean Modular Bento; Upstash is Oversized Emerald Typography & Clean Serverless Daylight. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 13 of 18 tracked tokens differ.

Side-by-side preview

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)

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: #FDFDFD vs #F5F5F5.
Accent: #0E7E4E (Supabase) vs #00BC7D (Upstash).
Headings: Manrope vs Inter Tight.
Display type: Supabase H1 is 46px / 0em (w500); Upstash H1 is 128px / -0.025em (w700) — Upstash sets 82px larger headlines.
Primary button radius: 9.29231px vs 10px; height 38px vs 40px.
Depth: Supabase uses rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset 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	Supabase	Upstash
Canvas	`#FDFDFD`	`#F5F5F5`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#030303`	`#022C22`
Muted text	`#696969`	`#71717B`
Accent	`#0E7E4E`	`#00BC7D`
Border	`rgba(0, 0, 0, 0.08)`	`rgba(0, 0, 0, 0.05)`
Heading font	`Manrope`	`Inter Tight`
Body font	`Inter / Manrope`	`Inter`
Mono font	`Source Code Pro`	`JetBrains Mono`
H1	`46px / 0em (w500)`	`128px / -0.025em (w700)`
Button radius	`9.29231px`	`10px`
Button height	`38px`	`40px`
Most-used radius	`10.6667px`	`35.2px`
Most-used shadow	`rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`	`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 same	`0.15s`	`0.15s`
Container max-width same	`1280px`	`1280px`
Mode same	`light`	`light`

Primary buttons

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`

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 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, backend, supabase, bento, sql, monospace, open-source.

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, oversized-type, upstash, inter-tight.

Shared traits: light, emerald, green, devtools.

Rules that differ

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

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

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

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