Supabase — design system & UI screens

Dev Tools · 6 screens · 46 sections · supabase.com

The open-source Firebase alternative — Postgres, auth, storage.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/product/supabase.

Decoded design system

Supabase's decoded design system: background #FCFCFC, text #171717, accent #72E3AD, link #50C896, primary #72E3AD; type scale h1 46px / h2 16px / body 15px; 8px spacing base; 0px base radius. The single interactive/action color is #72E3AD — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FCFCFC`
surface	`#EEEEEE`
border	`#D9D9D9`
text	`#171717`
text_muted	`#6E6E6E`
primary	`#72E3AD`
accent	`#72E3AD`
link	`#50C896`
button_bg	`#72E3AD`
button_text	`#171717`

Using these colors

Action color #72E3AD — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #72E3AD — one role, not several (the action color).
accent #72E3AD — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #50C896 — fails contrast on the background (~2.0:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).

Typography

Heading: Manrope
Body: Manrope
h1: 46px
h2: 16px
body: 15px

Spacing

base unit: 8px
scale: 4px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 32px

Radii

base: 0px
button: 6px

Motion

Micro-interactions run at 400ms (dominant) with ease.

durations: 400ms · 600ms · 150ms
easings: ease · cubic-bezier(0.4, 0, 0.2, 1)
animated properties: opacity, color, background-color, border-color

Native design tokens

Token	Value
`--ch-17`	`#add6ff`
`--colors-slate-light-alpha-200`	`#05294d08`
`--color-pink-500`	`#f9d8ec`
`--color-orange-600`	`#ffcca7`
`--background-dialog-default`	`oklch(from oklch(.995 calc(0 * .5) 34) calc(l + .024 * 1.5) c h)`
`--color-neutral-600`	`oklch(43.9% 0 0)`
`--color-orange-800`	`#fa934e`
`--color-violet-1100`	`#5746af`
`--color-blue-700`	`#96c7f2`
`--colors-slate-light-alpha-1000`	`#00101b82`

…and 110 more measured on the page.

Button states (measured)

primary hover: border 1px solid rgb(9, 124, 79) · background oklab(0.7624 -0.144102 0.0546363 / 0.8)
primary focus: outline 4px solid rgb(9, 124, 79)

Layout (measured)

container max-width: 1280px
nav: 65px relative, backdrop blur(4px)
common grid: 2 columns

Motion choreography (measured)

Load order: div.relative×2 → div.w-1.5×3 → div.relative×3 → div.flex → div.flex → li.w-screen!

Scroll reveal: 5 elements rest at opacity 0, animate in over 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Stagger: div ×9 — 200ms apart.

Responsive (measured)

breakpoints: 768px · 1024px · 1280px
mobile (390px): hero 34px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →