taste-skill / Compare styles / Supabase vs Clerk

Supabase vs Clerk: design style comparison

Supabase is Postgres Emerald Technical Clarity & Clean Modular Bento; Clerk is Tactile Micro-Shadow Auth Components & Electric Violet. 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

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)

Clerk style · light

Ship the product, not the pixels.

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

Button

Card on extracted card recipe

Accent link: #6C47FF · border rgba(0, 0, 0, 0.06)

Key differences

Both are light-mode designs, but the canvases differ: #FDFDFD vs #F7F7F8.
Accent: #0E7E4E (Supabase) vs #6C47FF (Clerk).
Headings: Manrope vs Geist / geistNumbers.
Display type: Supabase H1 is 46px / 0em (w500); Clerk H1 is 56px / -0.035em (w700) — Clerk sets 10px larger headlines.
Primary button radius: 9.29231px vs 9999px; height 38px vs 30px.
Depth: Supabase uses rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset most; Clerk uses rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 12px 12px -6px, rgba(19, 19, 22, 0.024) 0px 24px 24px -12px most.

Token table

Token	Supabase	Clerk
Canvas	`#FDFDFD`	`#F7F7F8`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#030303`	`#131316`
Muted text	`#696969`	`#747686`
Accent	`#0E7E4E`	`#6C47FF`
Border	`rgba(0, 0, 0, 0.08)`	`rgba(0, 0, 0, 0.06)`
Heading font	`Manrope`	`Geist / geistNumbers`
Body font	`Inter / Manrope`	`Inter / Geist`
Mono font	`Source Code Pro`	`soehneMono`
H1	`46px / 0em (w500)`	`56px / -0.035em (w700)`
Button radius	`9.29231px`	`9999px`
Button height	`38px`	`30px`
Most-used radius	`10.6667px`	`6px`
Most-used shadow	`rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`	`rgba(19, 19, 22, 0.024) 0px 0px 0px 1px, rgba(19, 19, 22, 0.024) 0px 1px 1px -0.5px, rgba(19, 19, 22, 0.024) 0px 3px 3px -1.5px, rgba(19, 19, 22, 0.024) 0px 6px 6px -3px, rgba(19, 19, 22, 0.024) 0px 12px 12px -6px, rgba(19, 19, 22, 0.024) 0px 24px 24px -12px`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.15s`	`0.45s`
Container max-width	`1280px`	`720px`
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	30px	`0px 12px`	`9999px`	`rgba(20, 20, 20, 0.05)` `#131316`	`none`	`13px / 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, emerald, green, backend, supabase, sql, monospace, open-source.

Pick Clerk if you want Cool alabaster #F7F7F8 canvas with floating #FFFFFF auth cards, multi-layered ring micro-shadows, tight -0.035em Geist headings, SoehneMono snippets, and #6C47FF electric violet accents — signals: auth, components, micro-shadows, violet, purple, clerk, saas, tactile.

Shared traits: light, devtools, bento.

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

Clerk never:

NEVER substitute generic uncalibrated gray backgrounds for Clerk’s exact #F7F7F8 canvas and #FFFFFF surface pairing.
NEVER replace Geist / geistNumbers display typography or ignore its signature scale (56px / -0.035em (w700)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.06) (1px rgba(0,0,0,0.06)).

Go deeper

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

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