# Neon — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces (dark)
| 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 |

### Text
| 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 |

### Accent (green)
| 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) |

### Semantic / brand
| 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.

## 3. Typography Rules

- Sans: `Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif` — headings and body.
- Mono: `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.

## 4. Component Stylings

### Buttons (all full-radius pills)
- **Primary**: bg `#ffffff`, text `#1a1a1a`, radius full, height `44px` (nav `36px`), Inter 16/500, tracking -0.32px, padding `0 28px`.
- **Secondary (outline)**: transparent bg, text `#ffffff`, 1px border `#61646b`, radius full, same metrics. Hover: border/text brighten.
- **Nav Log in**: outline pill, height 36px; **Sign up**: white pill, height 36px.

### Inputs
- Not captured on the homepage (console behind login) — dark field with `#61646b` border assumed but `not captured`.

### Cards / panels
- bg `#111315`/`#18191b`, radius `4px` (notably small/sharp), hairline border `#242628`; code blocks in GeistMono.

### Nav
- Height ~68px, black, hairline bottom border. Neon wordmark (mint mark) left; links (Product, Solutions, Docs, Pricing, Resources); right: Discord + GitHub stars, Log in (outline pill), Sign up (white pill).

### Top banner
- Full-width black bar with the halftone dot gradient bleeding in from both edges; centered announcement text + chevron.

## 5. Layout Principles

- Left-aligned hero: mono eyebrow ("A DATABRICKS COMPANY") → 72px Inter headline → dual pill CTA (white primary + outline).
- Wide content, generous vertical rhythm; sections divided by hairlines `#242628`.
- Footer: black, multi-column links.

## 6. Depth & Elevation

- Radii: `4px` cards/panels (sharp), full pills for all buttons/badges.
- Control height: 44px (36px compact).
- Elevation nearly flat — hairline borders over black, minimal shadows.

## 7. Motion

- Micro-transitions on hover (color/border/opacity), short durations. Halftone gradient and product visuals may animate subtly. Animation library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- True-black canvas. Signature effect: a **halftone / dot-matrix gradient** band (orange → green), e.g. repeating `linear-gradient(90deg, rgba(57,165,125,.6) 50%, transparent 50%)` dot patterns, used in the top banner and section edges — evokes compute/scaling.
- Fade masks `linear-gradient(rgba(0,0,0,0), #000)` for section blends. No confirmed WebGL (`not captured`).

## 9. Do's and Don'ts

### Do
- Use a true-black canvas (`#000000`) with white text on a neutral-gray ladder (`#94979e`, `#797d86`, `#61646b`).
- Set headlines in Inter, light weight (400), with strong negative tracking (-4% at 72px).
- Use GeistMono for uppercase eyebrows and code labels.
- Reserve mint `#34d59a` and the halftone dot gradient as the only color; keep the rest monochrome.
- Make every button a full-radius pill: white primary (`#fff`/`#1a1a1a`) and outline secondary (1px `#61646b`).
- Keep card radius small (`4px`) and rely on hairline borders over shadows.

### Don't
- Don't use a dark-gray or navy canvas — it is pure black.
- Don't introduce a second accent color (red is only the Databricks mark).
- Don't set headlines bold — weight stays ~400 with tight tracking.
- Don't use large rounded cards; card radius is a sharp 4px (pills are the exception).

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Nav collapses to a menu on small screens (pattern present, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#ffffff` · Muted `#94979e` · Border `#61646b` · Accent mint `#34d59a`
- Font: `Inter` (h1 72/400/-4%), `GeistMono` eyebrows · Body 16px/-0.32px · Radius 4px card / full pill · Button height 44px
- Primary button: white pill `#fff` text `#1a1a1a` · Secondary: outline pill 1px `#61646b`

<neon_design_language>
Use the Neon design language: a true-black canvas (#000000) with white text on a neutral-gray ladder (#94979e secondary, #797d86 tertiary, #61646b borders, #242628 hairlines). Headlines are Inter at a LIGHT weight (400) with strong negative tracking (-4% at 72px); eyebrows and code are GeistMono, uppercase, #c9cbcf. The single accent is mint #34d59a (deeper #39a57d, #285d49), joined only by a signature halftone dot-matrix gradient band (orange&rarr;green) in the top banner and section edges — everything else stays monochrome. Every button is a full-radius pill: primary is a white pill (#ffffff bg, #1a1a1a text, 44px tall, Inter 16/500, -0.32px), secondary is an outline pill (transparent, white text, 1px #61646b). Cards are dark (#111315/#18191b) with a notably SHARP 4px radius and hairline borders instead of shadows; elevation is nearly flat. Red #ff3621 appears only in the "A Databricks Company" mark. Feels: dark, precise, engineered, modern. Avoid: a dark-gray or navy canvas, a second accent color, bold headlines, or large rounded cards (card radius is a sharp 4px; only buttons are pills).
</neon_design_language>