← All designs
Dev Tools

Neon

A serverless Postgres platform with a striking dark canvas (#0E0E0E / #111111) and Neon's signature bright green (#00E599) — the same green as a terminal cursor blinking in a dark room — used on the logo, primary CTAs, branch indicators, and compute status. The interface reads as developer-native and technically opinionated: branch-based workflows, instant database provisioning, and scale-to-zero compute visualized in a clean dark dashboard. Typography uses Inter at functional sizes. The system aesthetic is minimal-dark-technical with a single electric green accent that communicates instant-on energy and serverless simplicity.

Color Tokens

#00E599primary
#0E0E0Eon-primary
#00CC88primary-hover
#EDEDEDink
#777777ink-muted
#0E0E0Ecanvas
#171717surface-1
#1F1F1Fsurface-2
#2A2A2Aborder
#00E599branch-active

version: alpha name: Neon description: "A serverless Postgres platform with a striking dark canvas (#0E0E0E / #111111) and Neon's signature bright green (#00E599) — the same green as a terminal cursor blinking in a dark room — used on the logo, primary CTAs, branch indicators, and compute status. The interface reads as developer-native and technically opinionated: branch-based workflows, instant database provisioning, and scale-to-zero compute visualized in a clean dark dashboard. Typography uses Inter at functional sizes. The system aesthetic is minimal-dark-technical with a single electric green accent that communicates instant-on energy and serverless simplicity."

colors: primary: "#00E599" on-primary: "#0E0E0E" primary-hover: "#00CC88" ink: "#EDEDED" ink-muted: "#777777" canvas: "#0E0E0E" surface-1: "#171717" surface-2: "#1F1F1F" border: "#2A2A2A" branch-active: "#00E599" branch-inactive: "#555555" compute-running: "#00E599" compute-idle: "#555555" success: "#00E599" danger: "#EF4444"

typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.025em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 code: fontFamily: "JetBrains Mono, Fira Code, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.5

spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]

radius: sm: 4px md: 6px lg: 12px pill: 9999px

shadows: card: "0 1px 4px rgba(0,0,0,0.5)" elevated: "0 4px 20px rgba(0,0,0,0.6)" glow: "0 0 24px rgba(0,229,153,0.15)"

motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.16, 1, 0.3, 1)

1. Visual Theme & Atmosphere

Neon built serverless Postgres for the edge computing era, and the design reflects that technical identity. The near-black canvas is a deliberate nod to terminal tradition — developers recognize this as their native environment. The green (#00E599) is electric and precise: it's the color of "online," "connected," and "ready." Branch-based database workflows (inspired by Git branching) are the product's core differentiator, visualized as a simple tree diagram with green active nodes. The platform is minimal because Postgres doesn't need decoration.

2. Color System

  • Canvas: #0E0E0E — as close to true black as you can get while allowing surface layering
  • Neon green: #00E599 — the single chromatic point; compute running, branch active, primary CTA, logo
  • Surfaces: #171717 / #1F1F1F — subtle dark layering for panels and cards
  • Ink: #EDEDED — near-white, warm enough to not cause contrast fatigue
  • Muted: #777777 — neutral gray for secondary metadata
  • Glow: Green box-shadow on active elements — subtle but distinctive

3. Typography

Inter throughout — the technical world has standardized here, and Neon follows suit. 14px body for density in connection strings and configuration. Code and SQL use JetBrains Mono. Connection string display is always monospaced and selectable. Display headings use 700/48px with -0.025em tracking.

4. Components & Patterns

  • Branch tree: Visual hierarchy of database branches — main + feature branches, with green active indicators
  • Compute indicator: "Running" (green dot) / "Idle" (gray dot) — the core serverless status
  • Connection string: Prominent display, one-click copy, syntax-highlighted
  • SQL editor: Dark Monaco editor, Postgres syntax highlighting, query results table below
  • Storage/Compute metrics: Simple charts, green accent line
  • Project card: Branch count, compute status, region, created date

5. Spacing & Layout

Dashboard: 220px sidebar, content max 1100px. SQL editor: split pane (editor top, results bottom), resizable. Branch tree: compact tree layout with 8px spacing between nodes. Clean, minimal spacing throughout.

6. Motion & Interaction

Compute "waking up" has a subtle green pulse animation. Branch creation slides into the tree. SQL queries show a progress bar then snap to results. Connection string copy shows a brief checkmark. Compute scale-to-zero shows an idle fade.