Design System Preview

# Design System
Inspired by Supabase

Dark-mode-native developer platform aesthetic. Emerald green accents on near-black surfaces with border-defined depth.

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 #171717.

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

Default Input
Focus State
Error State
Project name must only contain alphanumeric characters and hyphens.
Database Region
Description A real-time backend for modern web and mobile applications.

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