Home
DESIGN.mdStar on GitHub
Copied!

Supabase

Build in a weekend. Scale to millions. — open source Firebase alternative with Postgres, Auth, Storage, Edge Functions, and Realtime.

Colors
Primary / Brand
brand-green
#3ECF8E
Primary CTA, logo
brand-green-dark
#249361
Hover/pressed
brand-link
#00C573
Interactive links
Surfaces
background
#171717
App canvas
bg-deep
#0F0F0F
Deepest surfaces
surface-100
#1C1C1C
Panels, cards
surface-200
#242424
Elevated cards
surface-300
#2A2A2A
Stacked surfaces
border
#2E2E2E
Default borders
Text
text-primary
#FAFAFA
Primary text
text-secondary
#B4B4B4
Secondary labels
text-muted
#898989
Placeholder, disabled
text-faint
#4D4D4D
Decorative copy
Semantic
success
#3ECF8E
Success = brand
warning
#F5A623
Warning states
destructive
#E5484D
Errors, delete
Typography — Circular (custom · ≈ DM Sans)
display Build in a weekend.
72px4001.00 lh
heading-xl Scale to millions.
48px400−0.02em
heading-lg Every project. Full Postgres.
36px4001.25 lh
heading-md Realtime subscriptions, Auth, Storage.
24px4001.33 lh
body-lg Open source Firebase alternative with a dedicated Postgres database for every project.
16px4001.50 lh
body Default UI text, form labels, navigation items.
14px4001.57 lh
code-label SELECT * FROM users WHERE active = true
12pxMono0.075em
Components
Buttons
Inputs
Badges
Default Active Degraded Error Brand
Card
Database
Every Supabase project includes a dedicated Postgres instance with full SQL access.
Signature Component — Table Editor
my-project
Table Editor
SQL Editor
Auth
Storage
public / users
Filter status = 'active'
3 rows
id
email
created_at
status
plan
1
alice@example.com
2024-01-15 09:32
active
pro
2
bob@company.io
2024-02-03 14:11
pending
free
3
carol@startup.dev
2024-03-22 07:45
inactive
pro
public.users · 6 columns · last updated just now
1 – 3 of 3
Spacing
Guardrails

DO

Default to dark theme — it is the native, primary experience.
Use #3ECF8E only for primary CTAs, active nav states, and brand identity.
Communicate depth through background layering (surface-100 → 200 → 300), not shadows.
Keep borders thin (1px) and use border-color variation to express hierarchy.
Use 400 weight for body text and 500 for interactive labels only — no 700 in UI.
Apply 9999px radius to marketing pill buttons, 6px to interface action buttons.

DON'T

Don't use brand green as a decorative color, background fill, or general highlight.
Don't add drop shadows to flat card surfaces — use border color differences instead.
Don't use font-weight: 700 or heavier anywhere in the UI.
Don't round dashboard card corners beyond 8px — reserve 16px for marketing cards.
Don't use color alone to convey status — always pair with text or icon.
Don't use modals for confirmations that can be handled inline or with a toast.