Developer Tools

supabase.com

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

12 colors19 componentsManropeMulti-page · 12 screens

supabase.com — Supabase | The Postgres Development Platform

1 / 12 — Supabase | The Postgres Development Platform

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

Extracted from supabase.com

Primary

#3FCF8E

#097C4F

#0A844E

#16B674

#72E3AD

#DC7B18

#F3BA63

#A9F1CA

Neutral

#FFFFFF

#000000

#808080

#A0A0A0

Typography · Manrope

h615px · 600

h134px · 500

h216px · 600

h334px · 600

h418px · 600

h146px · 500

Spacing

8px

24px

4px

16px

12px

32px

96px

80px

Elevation

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, 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, 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, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

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, oklch(0.52065 0 34) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

Components · 19