Design System

Build in a weekend,
scale to millions.

A clean, developer-first dark interface where every element earns its place. Neutral charcoal canvas with a single green accent that signals action.

17 color tokens 13 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

A restrained neutral palette with a single, unmistakable green accent. 17 tokens across surfaces, text, interaction, and semantic states.

Obsidian
#1C1C1C
Primary page background
Deep Charcoal
#111111
Sidebars, code blocks
Slate
#1E1E1E
Cards, panels
Carbon
#282828
Borders, dividers
Iron
#313131
Inputs, hover surfaces
Smoke
#4A4A4A
Disabled text, placeholders
Fog
#8A8A8A
Secondary text, labels
Cloud
#B0B0B0
Subheadings, nav
Bright White
#F7F7F7
Primary text, headings
Pure White
#FFFFFF
Button text on accent
Supabase Green
#3ECF8E
Primary accent, CTAs
Green Light
#59D9A3
Hover state
Green Muted
#2A9D6E
Pressed state
Blue Accent
#6B9BF7
Info, secondary links
Amber Accent
#F5A623
Warnings, caution
Red Accent
#EF4444
Errors, destructive
Typography

Type Scale

Inter as universal typeface. Clean geometry, extensive weight range, and precise sizing for developer-focused interfaces.

Display-lg Scale to millions 40px / 1.0 / -0.04em
Display Build in a weekend 32px / 1.2 / -0.02em
Heading-lg Database 28px / 1.2 / -0.02px
Heading Authentication 24px / 1.3 / -0.02px
Heading-sm Storage buckets 20px / 1.4 / -0.01px
Body Default body text for readable content and UI labels 14px / 1.7 / 0
Body-sm Dense data, table cells, comparison rows 13px / 1.6 / 0.01px
Caption Meta info · Footer · Labels 12px / 1.6 / 0.025px

Fonts

Primary Inter 400–700 · 12–40px · Universal
Mono Inter Mono 400–500 · 12–14px · Code only
Layout

Spacing & Shapes

Base unit 4px. Compact density for developer tools — dense but not cramped. 12-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

14px
28px
312px
416px
624px
832px
1248px
1664px

Border Radius

sm 4px
default 6px
md 8px
lg 12px
xl 16px
pill 9999px
Elevation

Surfaces

Surface color contrast communicates hierarchy — no drop shadows. Four distinct levels from page background to interactive inputs.

Obsidian #1C1C1C · Level 0
Slate #1E1E1E · Level 1
Deep Charcoal #111111 · Level 2
Iron #313131 · Level 3
Components

Button Variants

Green for primary actions, ghost for secondary, red for destructive. Clean, consistent, and immediately legible.

Primary Green Button
Main call to action — form submission, primary interaction
.btn-primary
Supabase Green (#3ECF8E) background, Deep Charcoal text, 6px radius. Use for the single most important action.
Secondary Ghost Button
Secondary actions, cancel, dismiss
.btn-secondary
Bright White text, Carbon border, 6px radius. For less prominent actions that still need visual presence.
Danger Button
Destructive actions, delete, remove
.btn-danger
Red Accent (#EF4444) background, Pure White text. Used sparingly for irreversible operations.
Input Field
Text input, search, form fields
input
Iron background, Carbon border, 6px radius. Focus uses Supabase Green border with green-glow ring.
Badge / Tag
Status indicators, labels, categories
.badge
Active Healthy Error Warning
Pill shape, 12px font. Semantic variants use tinted backgrounds with matching text and border.
Sidebar Nav Item
Navigation links in sidebar
.nav-item
Table Editor
Database
Settings
Bright White text, 8px/12px padding, 6px radius. Active state: green-glow background, 3px green left border.
Guidelines

Do's & Don'ts

Do — Embrace
  • Obsidian (#1C1C1C) as primary background
  • Supabase Green (#3ECF8E) for CTAs and success only
  • Bright White (#F7F7F7) for all primary text
  • 6px radius for buttons/inputs, 8px for cards
  • Compact spacing with 4px grid
  • Surface color contrast for hierarchy
  • Inter Mono only for code content
Don't — Avoid
  • Green for large background areas
  • Bright saturated colors outside the palette
  • Hard sharp corners on interactive elements
  • Drop shadows for elevation
  • Mono fonts for non-code content
  • Overly generous spacing in dev tools
  • Mixing font families — Inter is universal