Supabase
The open source Firebase alternative
5 colors
20 components
Inter, Source Code Pro
Mar 19, 2026
Website Preview
Colors
Primary
#3ECF8E
Primary accent, CTAs
#1C1C1C
Page background
#2E2E2E
Cards, panels
#EDEDED
Primary text
#333333
Borders
Typography
Inter
Role
SizeWeightHeight
Display
48px700—
Heading
32px600—
Body
16px400—
Source Code Pro
Role
SizeWeightHeight
Code
14px400—
DESIGN.md — Supabase
Overview
Supabase pairs developer-centric dark interfaces with its signature emerald green accent. The design system communicates open-source ethos through clean technical aesthetics and generous use of code-style elements.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-brand | #3ECF8E | Primary accent, CTAs |
color-bg | #1C1C1C | Page background |
color-surface | #2E2E2E | Cards, panels |
color-text | #EDEDED | Primary text |
color-border | #333333 | Borders |
Typography
| Role | Family | Size | Weight |
|---|---|---|---|
| Display | Inter | 48px | 700 |
| Heading | Inter | 32px | 600 |
| Body | Inter | 16px | 400 |
| Code | Source Code Pro | 14px | 400 |
Components
Dashboard Panel
- Dark card with
#2E2E2Ebg, 1px#333border - Header with title + action buttons
- Tabbed content areas
SQL Editor
- Full-width code editor with syntax highlighting
- Run button in emerald green
- Results table below
Auth UI
- Pre-built sign-in/sign-up components
- Social provider buttons
- Consistent with dashboard dark theme
Do's and Don'ts
Do
- Use emerald green for positive/active states only
- Maintain dark-first design in all surfaces
- Include code examples with syntax highlighting
Don't
- Don't use the green accent for destructive actions
- Don't lighten the background above
#2E2E2E - Don't use serif fonts anywhere