Dark Mode
Design System Preview

Design System
Inspired by Supabase

Even deeper darkness. The deepest surface (#0f0f0f) as the page canvas, where borders define every edge and green marks the brand.

01 / Color Palette

Color Palette

Brand

Supabase Green
#3ecf8e
Primary brand, logo, accent borders
Green Link
#00c573
Interactive green for links and actions
Green Border
rgba(62,207,142,0.3)
Subtle green border accent

Neutral Scale

Near Black
#0f0f0f
Primary button bg, deepest surface
Dark
#171717
Page background, primary canvas
Dark Border
#242424
Horizontal rules, section dividers
Border Dark
#2e2e2e
Card borders, tab borders
Mid Border
#363636
Button borders, dividers
Border Light
#393939
Secondary borders
Charcoal
#434343
Tertiary borders, dark accents
Dark Gray
#4d4d4d
Heavy secondary text
Mid Gray
#898989
Muted text, link color
Light Gray
#b4b4b4
Secondary link text
Near White
#efefef
Light border, subtle surface
Off White
#fafafa
Primary text, button text

Radix Color Tokens

Violet 10
hsl(251, 63%, 63%)
Vibrant accent
Purple 5
hsl(272, 51%, 54%)
Accent spectrum
Crimson 9
hsl(348, 60%, 50%)
Warm accent / alert
Indigo
hsl(226, 70%, 55%)
Subtle blue wash
Yellow 7
hsl(48, 90%, 55%)
Attention / warning
Tomato 4
hsl(10, 78%, 54%)
Error accent
Orange 6
hsl(24, 94%, 50%)
Warm accent

Surface & Overlay

Glass Dark
rgba(41,41,41,0.84)
Translucent dark overlay
Slate Alpha
hsla(210,88%,16%,0.03)
Ultra-subtle blue wash
Fixed Scale Alpha
hsla(200,90%,93%,0.11)
Light frost overlay
02 / Typography Scale

Typography Rules

Display Hero
Display Hero — 72px / weight 400 / line-height 1.00 — Circular (system-ui)
Section Heading
Section Heading — 36px / weight 400 / line-height 1.25 — Circular (system-ui)
Card Title
Card Title — 24px / weight 400 / line-height 1.33 / letter-spacing -0.16px — Circular (system-ui)
Sub-heading
Sub-heading — 18px / weight 400 / line-height 1.56 — Circular (system-ui)
Body text for paragraphs and general content. Nearly all text uses weight 400 for hierarchy through size alone.
Body — 16px / weight 400 / line-height 1.50 — Circular (system-ui)
Nav Link · Button Label
Nav Link / Button — 14px / weight 500 / line-height 1.14–1.43 — Circular (system-ui)
Caption and metadata text for tags and descriptions
Caption — 14px / weight 400–500 / line-height 1.43 — Circular (system-ui)
Fine print, footer links, small metadata
Small — 12px / weight 400 / line-height 1.33 — Circular (system-ui)
Code Label · Technical Marker
Code Label — 12px / weight 400 / line-height 1.33 / letter-spacing 1.2px / uppercase — Source Code Pro
03 / Button Variants

Buttons

Primary Pill
Secondary Pill
Ghost Button
Green Pill
04 / Card Examples

Cards & Containers

Standard Card

Border Dark Container

Default card with 1px solid #2e2e2e border and 16px radius. Depth defined through border contrast, not shadows. Background matches page at #0f0f0f.

Prominent Card

Mid Border Container

Elevated card using #363636 border for higher visual prominence. The lighter border creates the sense of depth in the dark environment.

Accent Card

Green Accent Container

Brand-highlighted card with rgba(62, 207, 142, 0.3) border. The green accent at 30% opacity is the highest elevation signal.

05 / Form Elements

Form Elements

Project name must only contain alphanumeric characters and hyphens.
06 / Spacing Scale

Spacing System

Base unit: 8px. Scale from 1px to 128px with notable large jumps for section spacing.

1px
4px
6px
8px
12px
16px
20px
24px
32px
40px
48px
90px
96px
128px
07 / Border Radius Scale

Border Radius Scale

From standard 6px for ghost buttons to pill 9999px for primary CTAs. Nothing in between for buttons.

6px
Ghost buttons, small
8px
Cards, containers
12px
Mid-size panels
16px
Feature cards, major
9999px
Primary pills, tabs
08 / Elevation & Depth

Elevation & Depth

No shadows. Depth is communicated through a sophisticated border hierarchy from barely visible to prominent green accent.

Flat
No shadow, border #2e2e2e. Default state for most surfaces and containers.
Level 0 — #2e2e2e
Subtle Border
Border #363636 or #393939. Interactive elements, hover states, prominent cards.
Level 1 — #363636
Focus
Minimal functional shadow: rgba(0,0,0,0.1) 0px 4px 12px. Focus states only.
Level 2 — Focus shadow
Green Accent
Brand-highlighted elements. The green accent border at 30% opacity is the highest elevation signal.
Level 3 — Green accent border