taste-skill / Compare styles / Supabase vs Neon

Supabase vs Neon: design style comparison

Supabase is Postgres Emerald Technical Clarity & Clean Modular Bento; Neon is Serverless Pitch-Black & Luminous Cyber-Mint Postgres. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 17 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)

Neon style · dark

Ship the product, not the pixels.

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

Card on surface + border tokens

Accent link: #34D59A · border #242628

Key differences

Supabase is a light design (canvas #FDFDFD) while Neon is dark (canvas #000000).
Accent: #0E7E4E (Supabase) vs #34D59A (Neon).
Headings: Manrope vs Inter.
Display type: Supabase H1 is 46px / 0em (w500); Neon H1 is 56px / -0.04em (w400) — Neon sets 10px larger headlines.
Primary button radius: 9.29231px vs 9999px; height 38px vs 36px.
Depth: Supabase uses rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset most; Neon 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, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px most.

Token table

Token	Supabase	Neon
Canvas	`#FDFDFD`	`#000000`
Surface	`#FFFFFF`	`#131415`
Text	`#030303`	`#FFFFFF`
Muted text	`#696969`	`#94979E`
Accent	`#0E7E4E`	`#34D59A`
Border	`rgba(0, 0, 0, 0.08)`	`#242628`
Heading font	`Manrope`	`Inter`
Body font	`Inter / Manrope`	`Inter`
Mono font	`Source Code Pro`	`JetBrains Mono`
H1	`46px / 0em (w500)`	`56px / -0.04em (w400)`
Button radius	`9.29231px`	`9999px`
Button height	`38px`	`36px`
Most-used radius	`10.6667px`	`4px`
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) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.15s`	`0.2s`
Container max-width	`1280px`	`1600px`
Mode	`light`	`dark`

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
Sign up	36px	`0px 18px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 500`
Get started	44px	`0px 28px`	`9999px`	`#FFFFFF` `#1A1A1A`	`none`	`16px / 500`
Log in	36px	`0px 18px`	`9999px`	`transparent` `#FFFFFF`	`1px solid #61646B`	`14px / 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: light, emerald, green, backend, supabase, bento, sql, monospace, open-source.

Pick Neon if you want Pitch-black #000000 canvas with #242628 / #303236 dark structural borders, 56px tight -0.04em Inter display headings, and #34D59A / #00E599 luminous cyber-mint accents — signals: dark, serverless, mint, neon-green, pitch-black, neon.

Shared traits: database, postgres, 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)).

Neon never:

NEVER substitute generic uncalibrated gray backgrounds for Neon’s exact #000000 canvas and #131415 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (56px / -0.04em (w400)).
NEVER use thick opaque borders that clash with #242628 (1px solid #242628).

Go deeper

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

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