Color Palette
Background Colors — 11 tokens
Border Colors — 4 tokens
Brand Border
rgba(62,207,142,0.3)
Typography
Base Font · Inter / Circular
Circular
The quick brown fox jumps over the lazy dog
Regular · 400
Medium · 500
Mono Font · Source Code Pro
Source Code Pro
const { data } = await supabase.from('users').select('*')
Regular · 400
Medium · 500
Heading
Display Hero · 72px · Medium · line-height: 72px · letter-spacing: −0.16px
Build in a weekend, scale to millions.
Heading XL · 36px · Medium · line-height: 43.2px
The open source Firebase alternative
Heading Large · 24px · Medium · line-height: 32px
Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime, Storage, and Vector embeddings.
Body Large · 18px · Regular · line-height: 28px
Every Supabase project is a full Postgres database, trusted by millions of developers.
Body Default · 16px · Regular · line-height: 24px
Last updated 2 minutes ago · 12,480 rows affected
Body Small · 14px · Regular · line-height: 19.25px
POSTGRES · REALTIME · STORAGE
Caption / Label · 12px · Medium · line-height: 16px · letter-spacing: 1.2px
Letter Spacing — 2 tokens
Supabase Platform
Tight Tracking
−0.16px · headings, display text
POSTGRES · REALTIME
Wide Tracking
1.2px · uppercase labels, micro copy
Spacing
Spacing Scale
22 tokens — 1px → 230.5px
Borders
Border Width
The single border width used throughout the system. Applied universally — cards, inputs, dividers, table rows — via --border-width-hairline: 1px.
Shadows / Elevation
Shadow Tokens
3 tokens
Flat
×16
All layers fully transparent — no visible shadow; relies on border for definition
Raised
×1
rgba(0,0,0,.1) 4px 6px −1px · rgba(0,0,0,.1) 2px 4px −2px · cards, dropdowns
Floating
×1
rgba(0,0,0,.1) 10px 15px −3px · rgba(0,0,0,.1) 4px 6px −4px · modals, panels
Z-Index
| Layer | Value | Usage |
|---|
| Background | -10 | Background decorations, canvas layers |
| Base | 1 | Base content layer |
| Navigation | 10 | Sticky headers, navigation |
| Popover | 20 | Dropdowns, popovers, tooltips |
| Overlay | 30 | Overlays, sidebars, drawers |
| Dialog | 40 | Modals, top-level dialogs, toasts |
Breakpoints
📱
Mobile Threshold
600px
Single breakpoint — layouts adapt at 600px viewport width (XS / mobile threshold)
Opacity
Opacity Tokens
5 tokens — 0.1 → 0.8
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Text Primary | Page Background | 17.18:1 | AAA |
| Text Primary | Pure Black | 20.12:1 | AAA |
| Text Primary | Mid Tone | 3.35:1 | AA Large |
| Text Primary | Canvas Dark | 17.95:1 | AAA |
| Text Secondary | Page Background | 8.65:1 | AAA |
| Text Secondary | Pure Black | 10.13:1 | AAA |
| Text Secondary | Mid Tone | 1.69:1 | Fail |
| Text Secondary | Elevated Surface | 6.55:1 | AA |
| Text Secondary | Canvas Dark | 9.04:1 | AAA |
| Text Disabled | Elevated Surface | 1.61:1 | Fail |
| Text Disabled | Pure Black | 2.48:1 | Fail |
| Text Disabled | Mid Tone | 2.42:1 | Fail |
| Text Disabled | Page Background | 2.12:1 | Fail |
| Text Pure White | Elevated Surface | 13.58:1 | AAA |
| Text Pure White | Pure Black | 21:1 | AAA |
| Text Pure White | Mid Tone | 3.5:1 | AA Large |
| Text Pure White | Page Background | 17.93:1 | AAA |
| Brand Text | Elevated Surface | 5.97:1 | AA |
| Brand Text | Pure Black | 9.23:1 | AAA |
| Brand Text | Mid Tone | 1.54:1 | Fail |
| Brand Text | Page Background | 7.88:1 | AAA |
| Brand Text | Canvas Dark | 8.24:1 | AAA |
CSS Variables Reference
Pure Black--color-black#000000
App Shell--color-dark-gray-9#0F0F0F
Canvas Dark--color-dark-gray-4#121212
Page Background--color-dark-gray-3#171717
Surface Hover--color-dark-gray-8#1F1F1F
Card Background--color-dark-gray-6#242424
Brand Tint Subtle--color-dark-cyan-2#002918
Brand Tint--color-dark-cyan#006239
Elevated Surface--color-dark-gray#2E2E2E
Mid Tone--color-mid-gray#898989
Brand Primary--color-cyan#3ECF8E
Text Disabled--color-dark-gray-2#4D4D4D
Text Secondary--color-light-gray#B4B4B4
Text Primary--color-white#FAFAFA
Text Pure White--color-white-2#FFFFFF
Brand Text--color-cyan-3#00C573
Border Subtle--color-dark-gray-10#292929
Border Muted--color-dark-gray-7#363636
Border Default--color-dark-gray-5#393939
Brand Border--color-cyan-2rgba(62,207,142,.3)
Fill Base--color-dark-gray-11#212121
Base Font--font-family-baseInter / Circular
Mono Font--font-family-2Source Code Pro
Regular--font-weight-regular400
Medium--font-weight-medium500
Caption / Label--font-size-2xs12px
Body Small--font-size-xs14px
Body Default--font-size-sm16px
Body Large--font-size-base18px
Heading Large--font-size-lg24px
Heading XL--font-size-xl36px
Display Hero--font-size-2xl72px
Tight Tracking--letter-spacing-tight−0.16px
Wide Tracking--letter-spacing-normal1.2px
Space Gutter--space-812px
Section Gap--space-2440px
Layout 40--space-4054.5px
Layout 48--space-4861.2px
Page Padding--space-6464px
Section Inset--space-8090px
Section Padding--space-9696px
Layout 128--space-128112px
Layout 160--space-160119px
Layout 192--space-192128px
Hero Spacing--space-256230.5px
Hairline--border-width-hairline1px
Pill / Full--radius-full9999px
Micro-interaction--duration-instant75ms
Hover / Focus--duration-fast150ms
Panel Open--duration-normal200ms
Drawer / Modal--duration-slow300ms
Page Transition--duration-slower750ms
Skeleton Load--duration-duration-61s
Ease Out--easing-ease-outease-out
Breakpoint XS--breakpoint-xs600px
Background Layer--z-1-10
Base Layer--z-21
Navigation--z-310
Popover--z-420
Overlay--z-530
Dialog--z-640
Design System Preview · Supabase (Dark) · Generated 12/04/2026 · 21 color tokens · 7 font-size · 2 font-family · 2 font-weight · 11 line-height · 2 letter-spacing · 22 spacing · 6 radius · 1 border-width · 3 shadow · 6 duration · 1 easing · 6 z-index · 1 breakpoint · 5 opacity