Neon DESIGN.md

Serverless Postgres design with dark developer-native surfaces, bright green database accents, and branch-based workflow clarity.

1. Visual Theme & Atmosphere

Neon should feel like Postgres built for modern developers and AI agents. The interface needs to make databases, branches, compute, storage, autoscaling, and scale-to-zero behavior feel fast and programmable.

• Mood: technical, sharp, scalable, database-native, modern
• Density: medium-to-high for console surfaces
• Character: dark canvas, neon green accents, branch diagrams, terminal-like clarity

2. Color Palette & Roles

Use green for database activity, branch state, and primary actions. Keep console-heavy areas dark and precise.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #00E599;
  border-radius: 10px;
  background: #00E599;
  color: #0E0E0E;
  font: 700 14px/1 Inter, sans-serif;
}

.database-card {
  border: 1px solid #2E2E2E;
  border-radius: 14px;
  background: #171717;
  color: #FFFFFF;
  padding: 16px;
}

.branch-pill {
  border-radius: 999px;
  background: rgba(0, 229, 153, 0.12);
  color: #00E599;
  padding: 6px 10px;
  font: 600 12px/1 Inter, sans-serif;
}

.input {
  min-height: 42px;
  border: 1px solid #2E2E2E;
  border-radius: 10px;
  background: #0E0E0E;
  color: #FFFFFF;
  padding: 0 14px;
}

5. Layout Principles

Structure around projects, databases, branches, compute, storage, connection strings, and API access.

6. Depth & Elevation

css.shadow-panel { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30); }
.shadow-overlay { box-shadow: 0 28px 68px rgba(0, 0, 0, 0.40); }

Use dark surface contrast and green highlights before adding strong elevation.

7. Do's and Don'ts

Do make database branch workflows clear. Do show compute status and connection details. Do not use green for unrelated decoration. Do not hide scale or availability information.

8. Responsive Behavior

Connection strings and code snippets should scroll horizontally on small screens.

9. Agent Prompt Guide

Design like Neon: dark serverless Postgres console, bright green database accents, branch and compute status cards, monospace connection details, and developer-native database workflow clarity.