taste-skill / Compare styles / Supabase vs PlanetScale

Supabase vs PlanetScale: design style comparison

Supabase is Postgres Emerald Technical Clarity & Clean Modular Bento; PlanetScale is Pure Monospace ASCII Engineering Manual & Zero-Radius Brutalism. 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)

PlanetScale style · light
Ship the product, not the pixels.
Preview text rendered with the extracted PlanetScale canvas, text, muted and accent tokens.
Get in touch View sandbox
Card on surface + border tokens
Accent link: #F35815 · border #C1C1C1

Key differences

Both are light-mode designs, but the canvases differ: #FDFDFD vs #FAFAFA.
Accent: #0E7E4E (Supabase) vs #F35815 (PlanetScale).
Headings: Manrope vs SF Mono / ui-monospace.
Display type: Supabase H1 is 46px / 0em (w500); PlanetScale H1 is 20px Mono / -0.02em (w700) — Supabase sets 26px larger headlines.
Primary button radius: 9.29231px vs 0px; height 38px vs 32px.
Depth: Supabase uses rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset most; PlanetScale shows no box-shadows.

Token table

Token	Supabase	PlanetScale
Canvas	`#FDFDFD`	`#FAFAFA`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#030303`	`#111111`
Muted text	`#696969`	`#414141`
Accent	`#0E7E4E`	`#F35815`
Border	`rgba(0, 0, 0, 0.08)`	`#C1C1C1`
Heading font	`Manrope`	`SF Mono / ui-monospace`
Body font	`Inter / Manrope`	`SF Mono / ui-monospace`
Mono font	`Source Code Pro`	`SF Mono / ui-monospace`
H1	`46px / 0em (w500)`	`20px Mono / -0.02em (w700)`
Button radius	`9.29231px`	`0px`
Button height	`38px`	`32px`
Most-used radius	`10.6667px`	`—`
Most-used shadow	`rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`	`none`
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
Get in touch	32px	`0px 8px`	`0px`	`#F35815` `#FFFFFF`	`none`	`16px / 600`
View sandbox	32px	`0px 8px`	`0px`	`transparent` `#414141`	`2px solid #F35815`	`16px / 600`

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: emerald, green, devtools, backend, supabase, bento, sql, open-source.

Pick PlanetScale if you want Stark #FAFAFA technical manual canvas set entirely in system monospace with ASCII box-drawing diagrams, 1px #C1C1C1 / #414141 borders, 0px sharp corners, and #F35815 signal orange CTAs — signals: ascii, brutalist, mysql, planetscale, zero-radius, engineering, orange.

Shared traits: light, database, postgres, monospace.

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

PlanetScale never:

NEVER substitute generic uncalibrated gray backgrounds for PlanetScale’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace SF Mono / ui-monospace display typography or ignore its signature scale (20px Mono / -0.02em (w700)).
NEVER use thick opaque borders that clash with #C1C1C1 (1px solid #C1C1C1).

Go deeper

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

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