--- version: alpha name: Neon description: A pure-black terminal canvas lit by a single electric neon-green, where Inter headlines compress to brutal negative tracking, GeistMono carries the CLI voice, and a white pill button sits beside a glowing green one — serverless Postgres rendered as a dark, after-hours engineering console. colors: # Surface / canvas background: "#000000" # pure black canvas surface: "#0a0a0a" # barely-lifted panel fill surface-raised: "#161719" # cards, code blocks surface-strong: "#242628" # raised tiles, hover surfaces # Ink / text ink: "#ffffff" # white headings and primary text ink-secondary: "#c9cbcf" # high-emphasis body on dark ink-muted: "#94979e" # standard body, secondary copy ink-faint: "#61646b" # captions, metadata, muted labels ink-disabled: "#797d86" # disabled and lowest-emphasis text on-accent: "#000000" # black text on the neon-green pill # Brand accent — Neon green primary: "#00e599" # the electric neon-green signature primary-bright: "#34d59a" # the CTA pill fill, slightly minted primary-strong: "#00cc88" # pressed / hover green primary-soft: "#2c6d4c" # deep muted green, subtle fills # Borders border: "#242628" # hairline dividers on dark border-strong: "#61646b" # input + ghost-button outlines # Shadow tints (opaque approximations for the elevation table) shadow-black: "#000000" # was rgba(0,0,0,0.6) — Google format requires hex glow-green: "#00e599" # neon glow halo on focus / active CTAs typography: display-hero: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 80px fontWeight: 400 lineHeight: 1.0 letterSpacing: -3.2px display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 60px fontWeight: 400 lineHeight: 1.13 letterSpacing: -2.4px heading: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 1.13 letterSpacing: -1.92px heading-sub: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.25 letterSpacing: -1.28px heading-small: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.96px body-large: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: -0.36px body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: -0.15px caption: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.28px label-mono: fontFamily: "GeistMono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px code-mono: fontFamily: "GeistMono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: -0.32px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 48px 5xl: 64px 6xl: 96px rounded: xs: 4px sm: 6px md: 8px lg: 12px pill: 9999px components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-accent}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 10px 18px button-primary-hover: backgroundColor: "{colors.ink-secondary}" textColor: "{colors.on-accent}" button-accent: backgroundColor: "{colors.primary-bright}" textColor: "{colors.on-accent}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 10px 18px button-accent-hover: backgroundColor: "{colors.primary-strong}" textColor: "{colors.on-accent}" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 10px 18px button-ghost-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" button-code: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" typography: "{typography.code-mono}" rounded: "{rounded.sm}" padding: 10px 16px card: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-bordered: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 12px input-focus: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" padding: 16px 24px link: textColor: "{colors.ink-muted}" typography: "{typography.body}" padding: 0px link-hover: textColor: "{colors.ink}" typography: "{typography.body}" padding: 0px code-ref: backgroundColor: "{colors.surface-raised}" textColor: "{colors.primary}" typography: "{typography.code-mono}" rounded: "{rounded.xs}" padding: 2px 6px badge: backgroundColor: "{colors.surface-strong}" textColor: "{colors.primary}" typography: "{typography.label-mono}" rounded: "{rounded.pill}" padding: 4px 10px --- # Neon Design System ## Overview Neon's site is a black room with one light on. The canvas is pure `#000000` (`{colors.background}`), the hero animates a faint vertical "matrix rain" of green characters, and into that darkness drops a single, unmistakable color: electric neon-green (`{colors.primary}`). It's the brand name made literal. Where most developer landing pages hedge their dark themes with charcoals and muted blues, Neon commits to true black and lets the green do every job that matters — the logo, the CTA, the inline code accents, the focus glow. The typographic move is brutal compression. The headline "Fast Postgres Databases for Teams and Agents" is set in **Inter** at 80px (`{typography.display-hero}`) with letter-spacing yanked to -3.2px — the words sit so tight they read almost as a single wordmark. Inter stays at a regular 400 weight even at display sizes; the drama comes from scale and negative tracking, not boldness. White (`{colors.ink}`) for headlines, a soft gray (`{colors.ink-muted}`) for body, and **GeistMono** (`{typography.code-mono}`) for every CLI snippet and inline code reference. The `$ npx neonctl init` command lives in that mono on a raised black panel, the literal entry point to the product. The button hierarchy is the third signature, and it's a deliberate inversion. The primary action ("Sign up") is a **white pill** — fully rounded, black text — while the neon-green pill is reserved for the highest-intent moments (the CLI "init" call-to-action). Both are fully circular (`{rounded.pill}`), a soft contrast to the otherwise sharp, terminal-flat surfaces. Ghost buttons carry a thin gray outline (`{colors.border-strong}`). Surfaces are nearly flat — separation comes from barely-lifted panel fills (`{colors.surface-raised}`) and hairline borders (`{colors.border}`) rather than shadow, with the green reserved as a glow accent on focus and active states. The whole thing reads as an after-hours engineering console: serious, fast, and lit by exactly one color. **Key Characteristics:** - Pure black canvas (`{colors.background}`) — true `#000000`, committed dark theme, no charcoal hedging - Single electric neon-green accent (`{colors.primary}`) — the brand name made literal, used for logo, code, glow, and the high-intent CTA - **Inter** headlines at brutal negative tracking (-3.2px at 80px) — words compress almost into a wordmark - Display weight stays 400 — drama comes from scale and tracking, never boldness - **GeistMono** (`{typography.code-mono}`) for all CLI snippets and inline code references — the `$ npx neonctl init` voice - Inverted button hierarchy: primary is a **white pill** (`{colors.ink}`), green is reserved for highest-intent actions - Fully circular buttons (`{rounded.pill}`) against otherwise sharp 4–12px surfaces - Soft gray body text (`{colors.ink-muted}`) on black — readable, low-glare, never pure white for paragraphs - Barely-lifted panels (`{colors.surface-raised}`) and hairline borders (`{colors.border}`) do separation, not shadow - Neon-green used as a glow halo (`{colors.glow-green}`) on focus and active CTAs — light, not fill - Tight base radii (`{rounded.xs}` 4px) on cards and code blocks — terminal-flat precision - Logo's matrix-rain hero animation reinforces the after-hours console mood ## Colors ### Surface & Canvas - **Pure Black** (`{colors.background}`): The dominant canvas — true `#000000`. The entire site sits on black. - **Lifted Black** (`{colors.surface}`): A barely-perceptible panel fill, one step off the canvas. - **Raised Surface** (`{colors.surface-raised}`): Cards, code blocks, and input fills. - **Strong Surface** (`{colors.surface-strong}`): Raised tiles and hover surfaces — the most-lifted dark gray. ### Ink / Text - **White** (`{colors.ink}`): Headings and primary text. The high-contrast anchor. - **Light Gray** (`{colors.ink-secondary}`): High-emphasis body copy on dark. - **Gray** (`{colors.ink-muted}`): Standard body and secondary copy — the workhorse text color. - **Faint Gray** (`{colors.ink-faint}`): Captions, metadata, muted labels. - **Disabled Gray** (`{colors.ink-disabled}`): Disabled and lowest-emphasis text. ### Brand Accent - **Neon Green** (`{colors.primary}`): The singular signature — logo, inline code, focus glow, high-intent CTA. The brand made literal. - **Bright Green** (`{colors.primary-bright}`): The minted fill of the green CTA pill. - **Strong Green** (`{colors.primary-strong}`): Pressed and hover states for green elements. - **Deep Green** (`{colors.primary-soft}`): A muted dark green for subtle fills and large background washes. ### Borders & Glow Tints - **Hairline** (`{colors.border}`): Dividers and card edges on dark — the primary structural device. - **Strong Border** (`{colors.border-strong}`): Input and ghost-button outlines. - **Black / Green Glow** (`{colors.shadow-black}`, `{colors.glow-green}`): Opaque stand-ins for the deep black drop shadow and the neon-green focus halo (originals were rgba — flattened for the Google spec). ## Typography ### Font Family - **Primary**: `Inter`, fallbacks `-apple-system, BlinkMacSystemFont, system-ui, sans-serif`. Carries all display and body text. - **Monospace**: `GeistMono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. CLI snippets, inline code refs, and mono labels. - **OpenType / tracking**: aggressive negative tracking scales with size (-3.2px at 80px down to -0.13px at body); the system almost never tracks positive. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 80px / 400 / -3.2px — the brutally compressed marquee headline | | `display` | 60px / 400 / -2.4px — large section heroes | | `heading` | 48px / 400 / -1.92px — section titles | | `heading-sub` | 32px / 400 / -1.28px — sub-section headings | | `heading-small` | 24px / 500 — feature headings | | `body-large` | 18px / 400 — lead paragraphs | | `body` | 16px / 400 — standard body and inputs | | `body-small` | 15px / 400 — dense supporting copy | | `caption` | 14px / 500 — button text, metadata | | `label-mono` | 12px / 500 — **GeistMono** category labels | | `code-mono` | 16px / 500 — **GeistMono** CLI and inline code refs | ### Principles - **Compress the big**: display sizes carry brutal negative tracking (-3.2px at 80px) so headlines read as dense, near-monolithic statements. - **Weight stays regular**: Inter holds 400 even at display scale — the drama is size and tracking, not bold. - **Mono carries the CLI**: GeistMono is the product's literal voice — `$ npx neonctl init`, inline code refs, command labels. - **Gray for body, white for heads**: paragraphs sit in soft gray (`{colors.ink-muted}`) to cut glare on pure black; only headings go full white. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Generous vertical rhythm (`{spacing.6xl}` = 96px) separates major sections; component internals stay compact (`{spacing.md}`–`{spacing.2xl}`). ### Grid & Container - Max content width: ~1200px, centered - Common pattern: a left-aligned hero with the matrix-rain animation behind it, CTAs below, then a logo wall of customer marks - Feature sections use bordered dark cards in two- and three-up grids ### Whitespace Philosophy - **Black is the space**: the canvas itself is the primary separator; negative space is literal darkness - **Flat and terminal**: cards are barely lifted off the black, structured by hairlines, not depth - **One light**: visual focus is engineered by where the single green accent lands, not by contrast of many colors ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, pure black `{colors.background}` | Section backgrounds, most content | | Panel (Level 1) | Barely-lifted fill `{colors.surface-raised}`, hairline `{colors.border}` | Cards, code blocks, inputs | | Raised (Level 2) | Stronger fill `{colors.surface-strong}` | Hover surfaces, raised tiles | | Elevated (Level 3) | `0 32px 68px` deep black (`{colors.shadow-black}`) | Modals, floating menus over the dark canvas | | Focus Glow | Neon-green halo `0 0 0 3px` (`{colors.glow-green}`) | Focused inputs, active CTAs | **Shadow Philosophy**: On a pure-black canvas, traditional drop shadows mostly disappear, so Neon builds depth through *lifted surface fills* rather than cast shadows. A card reads as "above" the canvas because it's a slightly lighter gray (`{colors.surface-raised}`), edged with a hairline (`{colors.border}`). Real shadows only appear on overlays that need to float clearly above everything. The brand's signature "elevation," though, is light, not shadow: a neon-green glow (`{colors.glow-green}`) blooms on focused fields and active CTAs — the one place the color gets to behave like a light source. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `xs` | 4px | Cards, code blocks, inline code chips — the terminal-flat default | | `sm` | 6px | Inputs, code-snippet buttons | | `md` | 8px | Mid containers | | `lg` | 12px | Feature cards | | `pill` | 9999px | All buttons, badges, avatars | The system is binary in spirit: sharp 4px corners on surfaces (terminal precision) against fully circular pills on every interactive button. There's no mid-range button radius — buttons are either flat code-snippets or full pills. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — White (`{colors.ink}`) pill fill, black text. The main CTA ("Sign up"). Hover softens to `{colors.ink-secondary}`. - **`button-accent`** — Bright neon-green (`{colors.primary-bright}`) pill, black text. Reserved for highest-intent actions. Hover deepens to `{colors.primary-strong}`. - **`button-ghost`** — Transparent/black fill, white text, `{colors.border-strong}` outline, pill shape. Hover fills `{colors.surface-raised}`. - **`button-code`** — A raised-surface snippet button rendering a CLI line in `{typography.code-mono}` — the `$ npx neonctl init` pattern. ### Cards - **`card`** / **`card-bordered`** — Raised dark surface, hairline border, 12px radius. The bordered variant sits closer to the canvas. ### Inputs - **`input`** — Raised-surface fill, hairline outline, 6px radius. **`input-focus`** blooms a neon-green glow (`{colors.glow-green}`) — the one place green behaves like light. ### Links - **`link`** — Gray (`{colors.ink-muted}`) text by default. **`link-hover`** brightens to white (`{colors.ink}`). ### Code & Badges - **`code-ref`** — Inline code chip: raised-surface fill, neon-green mono text, 4px radius. - **`badge`** — Strong-surface fill, neon-green mono label, pill radius. ### Navigation - **`nav-bar`** — Black, hairline bottom border, Inter labels. Flush at the top; the white "Sign up" pill persists. ## Do's and Don'ts ### Do - Keep the canvas pure black (`{colors.background}`) — commit to true `#000000`, no charcoal hedging - Reserve neon-green (`{colors.primary}`) for the logo, inline code, focus glow, and the highest-intent CTA — it's the one light in the room - Set headlines in **Inter** at brutal negative tracking (-3.2px at 80px, `{typography.display-hero}`) — let them compress almost into a wordmark - Keep display weight at 400 — drama is scale and tracking, not boldness - Render CLI and code in **GeistMono** (`{typography.code-mono}`) — the `$ npx neonctl init` voice - Make the primary CTA a **white pill** (`{colors.ink}`); reserve the green pill for the highest-intent moment - Use soft gray (`{colors.ink-muted}`) for body copy to cut glare; save white for headings - Build depth from lifted surface fills (`{colors.surface-raised}`) and hairlines (`{colors.border}`), not cast shadows - Bloom a neon-green glow (`{colors.glow-green}`) on focused inputs and active CTAs ### Don't - Don't soften the black to charcoal — the commitment to `#000000` is the message - Don't spread green everywhere — it's one accent; flooding it kills the "single light" effect - Don't bold the display type — Inter stays 400; compression does the work - Don't loosen display tracking toward 0 — large type stays brutally compressed - Don't make body copy pure white — soft gray (`{colors.ink-muted}`) reduces glare on black - Don't give buttons a mid-range radius — they're either flat code-snippets or full pills (`{rounded.pill}`) - Don't rely on drop shadows for card separation — use lifted fills and hairlines on black - Don't set CLI or code in Inter — GeistMono is the product's literal voice --- ## Responsive Behavior ### Breakpoints *(Extraction surfaced 6 breakpoints; the values below are the standard stops the site behaves to.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single column; hero scales 80px → ~40px; nav collapses to a menu; logo wall wraps; matrix-rain animation simplifies | | Tablet | 640–1023px | Two-column feature grid; hero CTAs stack | | Desktop | 1024–1279px | Full multi-column feature grid; left-aligned hero with animation | | Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.6xl}`) | ### Touch Targets - Pill buttons run ~40px tall with `10px 18px` padding — comfortable for thumbs - Nav links and mono labels stay legible; tap rows carry generous vertical padding ### Collapsing Strategy - **Navigation**: full horizontal nav → menu toggle on mobile; the white "Sign up" pill persists - **Hero**: headline compresses from 80px toward ~40px while keeping proportional negative tracking; CTAs stack - **Feature grid**: multi-up → two-up → single column - **Spacing**: section padding compresses from 96px toward ~48px ### Image Behavior - The matrix-rain hero animation and product screenshots scale as flex/grid children; the green characters thin out on small screens to preserve readability --- ## Agent Prompt Guide ### Quick Color Reference - Background: Pure Black (`{colors.background}`) - Text: White (`{colors.ink}`) for heads, Gray (`{colors.ink-muted}`) for body - Brand accent: Neon Green (`{colors.primary}`) - Secondary text: Gray (`{colors.ink-muted}`) - Border: Hairline (`{colors.border}`) - Primary CTA: **White pill** (`{colors.ink}`) — green reserved for highest intent ### Example Component Prompts - "Create a left-aligned hero on pure black (`{colors.background}`): an 80px Inter headline at weight 400 (`{typography.display-hero}`), letter-spacing -3.2px, white (`{colors.ink}`), with gray body (`{colors.ink-muted}`) below — then a white pill primary button (`{colors.ink}` fill, black text, `{rounded.pill}`) beside a green CLI snippet button" - "Build a CLI snippet button: raised-surface (`{colors.surface-raised}`) fill, white GeistMono text in `{typography.code-mono}`, `{rounded.sm}` radius, rendering `$ npx neonctl init`" - "Create a feature card on black: raised-surface (`{colors.surface-raised}`) fill, hairline (`{colors.border}`) edge, `{rounded.lg}` radius, a white 24px Inter heading (`{typography.heading-small}`), gray body (`{colors.ink-muted}`), and a neon-green icon" - "Design the high-intent CTA: bright neon-green (`{colors.primary-bright}`) pill (`{rounded.pill}`), black text (`{colors.on-accent}`), `{typography.caption}`, `10px 18px` padding; hover deepens to `{colors.primary-strong}`" - "Render an inline code chip: raised-surface (`{colors.surface-raised}`) fill, neon-green (`{colors.primary}`) GeistMono text, `{rounded.xs}` radius, `2px 6px` padding" - "Design a dark input with neon glow on focus: raised-surface fill, hairline (`{colors.border}`) outline, `{rounded.sm}` radius; on focus add a `0 0 0 3px` neon-green glow (`{colors.glow-green}`)" ### Iteration Guide 1. Start on pure black (`{colors.background}`). If you reached for charcoal or a tinted dark, stop — Neon commits to true `#000000`. 2. Neon-green (`{colors.primary}`) is the one light: logo, code, focus glow, and the highest-intent CTA only. If it's everywhere, pull it back. 3. Headlines are Inter at 400 with brutal negative tracking — verify -3.2px at hero size before moving on. 4. Primary CTA is a white pill (`{colors.ink}`); the green pill is reserved for the single highest-intent action. 5. Body copy is soft gray (`{colors.ink-muted}`), not white — cut the glare on black. 6. Build card depth from lifted surface fills (`{colors.surface-raised}`) and hairlines (`{colors.border}`), not shadows. 7. CLI and code go in GeistMono (`{typography.code-mono}`) — the product's literal voice. 8. Buttons are pills (`{rounded.pill}`); surfaces are flat 4px (`{rounded.xs}`). No mid-range button radius. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Neon. Brand names and trademarks belong to their respective owners.