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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for