Pure-black serverless-Postgres brand: Inter headlines at tight -4% tracking, a single mint #34d59a accent and a signature orange-to-green halftone dot gradient, full-radius white pill buttons, GeistMono labels and sharp 4px cards over hairline borders.
Browse Neon in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: neon.com (live DOM, computed styles), 2026-07-13 (desktop 1512px). Coverage: homepage (hero, nav, top banner, CTAs). Dashboard/console: behind login (needs-dashboard). Responsive: breakpoints not captured (desktop only).
Pure-black, engineered, and quiet — a serverless-Postgres brand that lets a single emerald-mint accent and a signature halftone-dot gradient do all the talking. The canvas is true black; text is white on a precise neutral-gray ladder, with Inter set at a light weight and unusually tight negative tracking so big headlines feel sharp and modern. Chrome is monochrome except for the mint #34d59a accent and the orange-to-green dotted gradient band that reads like a database/compute visualization. GeistMono labels add an infra-tool signal. Buttons are clean full-radius pills. It feels like a serious platform that is confident enough to stay mostly black and white. Feels: dark, precise, engineered, modern.
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | Page canvas, hero |
| surface | #111315 | Raised panels / cards |
| surface-2 | #18191b | Secondary panels, code blocks |
| surface-3 | #303236 | Insets, hover fills |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text, headings |
| gray-300 | #c9cbcf | Eyebrow / bright secondary |
| gray-400 | #94979e | Secondary text |
| gray-500 | #797d86 | Tertiary text, captions |
| gray-600 | #61646b | Button/control borders |
| gray-700 | #242628 | Hairline dividers |
| Token | Hex | Role / usage |
|---|---|---|
| mint | #34d59a | Primary brand accent, highlights, logo |
| green-deep | #39a57d | Gradient stop / darker mint |
| green-900 | #285d49 | Deep green tint blocks |
| green-tint | #e4f1eb / #cae6d9 | Very light green wash (light contexts) |
| Token | Hex | Role |
|---|---|---|
| databricks-red | #ff3621 | "A Databricks Company" mark only |
Rule: chrome is black + white + gray; the mint #34d59a and the halftone gradient are the only color. Red appears solely in the Databricks parent-company mark.
Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif — headings and body.GeistMono, ui-monospace, SFMono-Regular, monospace — eyebrows, labels, code.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 72 / 79 | 400 | -2.88px (-4%) |
| Section (h2) | ~40–48 | 400–500 | -2% |
| Eyebrow (mono) | 12 | 500 | normal, UPPERCASE, #c9cbcf |
| Body | 16–18 | 400 | -0.32px |
| Button / UI | 14–16 | 500 | -0.28 to -0.32px |
| Nav | 15 | 400–500 | 0 |
Patterns: display is large with strong negative tracking (-4% at 72px) and light weight (400). Mono is reserved for uppercase eyebrows and code. Slight negative tracking even on body/buttons.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.