Neon — Design System

Colors

Brand

Surfaces (dark)

Text

Semantic · state

Typography · esbuild + Inter + Geist Mono

esbuild / 500

Display · 50px · -0.025em

Postgres for apps and agents

esbuild

Inter / 600

Heading · 20px

Instant, branchable, serverless

Inter

Inter / 400

Body · 14px

Branch your database like code — instant copy-on-write branches for every deploy, preview, and agent.

Inter

Geist Mono

Code · SQL · branch · 13px

SELECT * FROM users WHERE active = true;

Geist Mono

Signature · Branching + SQL

Branches 3

mainpostgres://…@ep-cool-morning.us-east-2

Ready

Branch your database like code. Click a branch to switch the SQL console to it; hit + Create branch to fork the selected branch instantly (copy-on-write, 0 ms). Run the query — each branch returns its own isolated data.

Components

Buttons

Branch state

active idle compute starting error

Connection string

Radius

input · 6

btn · 8

panel · 14

Guardrails

Do

Use the green #00E599 only for CTAs, active states, success & focus — never decoration.

Set SQL, branches, IDs & connection strings in Geist Mono; the hero in esbuild.

Build depth from layered near-blacks (#0B0C0D → #131415 → #18191B), not shadows.

Make branches, metrics & query results the visual hero.

Don't

Use the green glow decoratively — only on interactive focus/active.

Use corners larger than ~8px — keep the UI sharp.

Add marketing illustrations inside the console; prefer skeletons over spinners.

Invent neutral tints — Neon's darks are cool near-blacks (#131415).

Postgres backends forapps and agents.

Postgres backends for
apps and agents.