Supabase | The Postgres Development Platform.

DesignScan preview · https://supabase.com · 2026-06-13

Colors

primary#72e3ad
on-primary#111111
background#fcfcfc
text#707070
accent-1#171717
accent-2#000000
on-accent-2#ffffff
border#dfdfdf
error#e54d2e
warning#dc7b18

Typography

display72px · 400 · lh 1.2
The quick brown fox jumps
headline-lg36px · 400 · lh 1.2
The quick brown fox jumps
headline-sm24px · 400 · lh 1.2
The quick brown fox jumps
title18px · 400 · lh 1.2
The quick brown fox jumps
body-lg16px · 400 · lh 1.5
The quick brown fox jumps
body14px · 400 · lh 1.5
The quick brown fox jumps
label12px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
3xl32px

Radius

xs6px
sm8px
md12px
lg16px

Layout

sm480px
md640px
lg768px
--breakpoint-lg1024px
2xl1280px
--breakpoint-2xl1536px
containermax-width 1280px

Elevation

sm

Components

button-primary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
link
Inline link example →
badge Badge
feedback messages
error · Something went wrong — please try again.
warning · Heads up — this action can't be undone.