name: neon-design
version: alpha
description: >
  Neon (neon.com, a Databricks company) is a dark-first, developer-grade brand for
  serverless Postgres. The canvas is pure black with one electric brand voltage —
  "Neon green" #00E599 — rationed to the logo, the EARLY-ACCESS pills, code-syntax
  accents, and the green→amber halftone-dot hero artwork. Type is Inter, headlines
  set big at weight 400 with very tight negative tracking and a signature two-tone
  sentence (white lead clause → grey continuation); a GeistMono monospace carries
  code, the orange-triangle eyebrows, and the "SYSTEM: … STATUS: ONLINE" terminal
  HUD. Primary actions are white pills on black; shapes stay nearly square (4px).
colors:
  # Brand
  primary: '#00E599'        # Neon green — logo, EARLY-ACCESS pills, code accents, active stats
  primary-strong: '#34D59A' # slightly muted green (gradient mid / hover)
  primary-deep: '#39A57D'   # deep green on light mint section
  on-primary: '#0C0D0D'     # near-black text on the green pill
  # Eyebrow / Databricks accent
  accent-orange: '#FF4C24'  # orange-red ▶ eyebrow triangles, Databricks mark
  # Halftone gradient (hero dot field)
  gradient-green: '#00E599'
  gradient-amber: '#F0A03C'
  # Surface
  surface: '#000000'        # the canvas
  surface-raised: '#18191B' # nav pills, code wells, "Try it" footer bar
  surface-code: '#0D0E10'   # code block background
  surface-light: '#E4F2EA'  # pale-mint alternating section
  on-surface-light: '#0C0D0D' # ink on the mint section
  # Text
  on-surface: '#FFFFFF'     # headings, primary text, lead clause
  on-surface-secondary: '#797D86' # grey continuation clause, muted h2
  on-surface-tertiary: '#C9CBCF'  # code grey, captions
  on-surface-pre: '#F9FAFA'
  # Hairlines
  hairline: '#1F2023'       # dividers, card edges, terminal frame
typography:
  display:
    fontFamily: 'Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif'
    fontSize: 52px # observed h1 "Ship faster on the backend platform…"
    fontWeight: 400
    lineHeight: 58.5px
    letterSpacing: -2.08px # ~ -0.04em, very tight
  headline-lg:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 40px # observed h2 — the grey two-tone statements
    fontWeight: 400
    lineHeight: 45px
    letterSpacing: -1.6px
  headline-md:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 24px # lead "p" statements ("Manage your fleet via API.")
    fontWeight: 500
    lineHeight: 30px
    letterSpacing: -0.96px
  body-lg:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: normal
  body-md:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  label:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 15px # button text
    fontWeight: 500
    lineHeight: 22.5px
    letterSpacing: -0.15px
  card-title:
    fontFamily: 'Inter, "Inter Fallback", sans-serif'
    fontSize: 16px # "Postgres Database" feature heads
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: -0.4px
  eyebrow-mono:
    fontFamily: 'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, monospace'
    fontSize: 13px # "AGENT PLATFORM", "BACKED BY GIANTS", "SYSTEM: … STATUS: ONLINE"
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 1px # uppercase
  code:
    fontFamily: 'GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, monospace'
    fontSize: 14px # "$ npx neonctl init", curl snippets, stat readouts
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: -0.22px
rounded:
  xs: 4px    # nav buttons, badges, code wells (Neon stays nearly square)
  sm: 8px    # feature/terminal cards
  none: 0px  # full-bleed section bands, HUD bars
  full: 9999px # hero CTA pills, EARLY-ACCESS pills, nav Log in / Sign up
spacing:
  # base unit = 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 80px
components:
  button-primary:
    background: '{colors.on-surface}'   # white pill
    textColor: '{colors.on-primary}'    # near-black ink
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '14px 28px'
  button-secondary:
    background: '{colors.surface}'
    textColor: '{colors.on-surface}'
    border: '1px solid {colors.hairline}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '14px 28px'
  nav-signup:
    background: '{colors.on-surface}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
    padding: '8px 16px'
  badge-early-access:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.eyebrow-mono}'
    rounded: '{rounded.full}'
    padding: '4px 10px'
  eyebrow:
    markerColor: '{colors.accent-orange}' # the ▶ triangle
    textColor: '{colors.on-surface}'
    typography: '{typography.eyebrow-mono}'
  feature-card:
    background: 'transparent'
    titleColor: '{colors.on-surface}'
    titleTypography: '{typography.card-title}'
    descColor: '{colors.on-surface-secondary}'
    iconColor: '{colors.on-surface}'
  two-tone-statement:
    leadColor: '{colors.on-surface}'        # white first clause
    continuationColor: '{colors.on-surface-secondary}' # grey rest
    typography: '{typography.headline-lg}'
  code-block:
    background: '{colors.surface-code}'
    textColor: '{colors.on-surface-pre}'
    accentColor: '{colors.primary}'   # POST verb / leading dot in green
    typography: '{typography.code}'
    rounded: '{rounded.xs}'
    border: '1px solid {colors.hairline}'
  terminal-hud:
    background: '{colors.surface}'
    textColor: '{colors.on-surface-tertiary}'
    accentColor: '{colors.primary}'
    typography: '{typography.eyebrow-mono}'
    border: '1px solid {colors.hairline}'
  copy-pill:
    background: '{colors.surface-light}'  # the "$ npx neonctl init" mint chip
    textColor: '{colors.on-surface-light}'
    typography: '{typography.code}'
    rounded: '{rounded.xs}'
  halftone-hero:
    gradient: 'radial dot-matrix fading {colors.gradient-green} → {colors.gradient-amber} on black'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150ms
  duration-standard: 250ms
icons:
  library: lucide # outline set; Neon ships its own line glyphs (database, lock, chip, box)
  style: outline
  stroke: 1.75px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  colorRule: 'inherit white on dark; EARLY-ACCESS pills and code accents carry Neon green; eyebrow triangles carry orange'

Neon

Design spec — version alpha. Surfaces studied via Playwright: homepage (logged-out) — full-page screenshots + computed styles (getComputedStyle on body, h1/h2/h3, buttons, code/pre, header). Brand green reconciled from on-page greens and Neon's published #00E599 identity.

Overview

Neon is a dark-first, developer-grade brand for serverless Postgres (now "A Databricks Company"). The canvas is pure black {colors.surface} #000000, and the entire identity runs on a single electric voltage — Neon green {colors.primary} #00E599 — used with discipline for the logo mark, the EARLY-ACCESS pills, code-syntax accents (the POST verb, the leading terminal dot, active stat numbers), and the green→amber halftone-dot hero artwork. Everything else is white type on black, with a recurring pale-mint section band {colors.surface-light} #E4F2EA that flips the page to dark-on-light for emphasis.

Type is Inter for all UI, set big and confident: the hero h1 is 52px at weight 400 with very tight -2.08px tracking (~ -0.04em). The signature typographic move is the two-tone statement — a sentence whose lead clause is white and whose continuation is grey {colors.on-surface-secondary} #797D86 ("Manage your fleet via API. Neon databases spin up in milliseconds…"). A second family, GeistMono, carries the developer texture: code blocks, the orange-triangle eyebrows ("▶ AGENT PLATFORM"), the copy-pill $ npx neonctl init, and the cabinet-style terminal HUD ("SYSTEM: NEON DATABASE PLATFORM … STATUS: ONLINE"). Primary actions are white pills on black; shapes are otherwise nearly square (4px). The lone non-green accent is the orange-red {colors.accent-orange} #FF4C24 of the eyebrow triangles and the Databricks layers mark.

Colors

Brand. Neon green {colors.primary} #00E599 is the identity. Scarcity rule: green is reserved for the logo, EARLY-ACCESS badges, code accents (syntax verbs, the live dot, active counts in the fleet chart), and the halftone hero — never for body text, buttons, or borders. On the light-mint section, green deepens to {colors.primary-deep} #39A57D for legibility; {colors.primary-strong} #34D59A is the gradient mid-tone.

Eyebrow / Databricks accent. A single orange-red {colors.accent-orange} #FF4C24 marks the ▶ eyebrow triangles and the Databricks layers logomark — the only warm note in the chrome.

Surfaces. Canvas black {colors.surface} #000000; raised chrome (nav pills, code wells, the "Try it" footer bar) {colors.surface-raised} #18191B; code blocks {colors.surface-code} #0D0E10. The recurring pale-mint band {colors.surface-light} #E4F2EA carries dark ink {colors.on-surface-light} #0C0D0D.

Text. White {colors.on-surface} #FFFFFF for headings and lead clauses; grey {colors.on-surface-secondary} #797D86 for the continuation clause and muted h2; {colors.on-surface-tertiary} #C9CBCF for code/captions; pre blocks #F9FAFA.

Hairlines. Dividers, card edges, and the terminal frame use {colors.hairline} #1F2023 — a whisper against the black.

Typography

Two families. Inter for all UI text; GeistMono for code, eyebrows, and the terminal HUD. Weight strategy is unusual and deliberate: even the 52px hero runs at weight 400 (not bold), leaning on size + tight negative tracking rather than heaviness. Lead statements sit at 500. Closest open-source substitutes are already open-source — keep Inter + Geist Mono.

Token	Family	Size	Weight	Tracking	Usage
display	Inter	52px	400	-2.08px	Hero h1 ("Ship faster on the backend platform…")
headline-lg	Inter	40px	400	-1.6px	Two-tone section statements (white→grey)
headline-md	Inter	24px	500	-0.96px	Lead statements ("Manage your fleet via API.")
body-lg	Inter	18px	400	normal	Lead paragraphs
body-md	Inter	16px	400	normal	Default body
label	Inter	15px	500	-0.15px	Buttons, nav
card-title	Inter	16px	500	-0.4px	Feature heads ("Postgres Database")
eyebrow-mono	GeistMono	13px	400	+1px	▶ uppercase eyebrows, terminal HUD
code	GeistMono	14px	400	-0.22px	Code blocks, $ npx neonctl init, stat readouts

Layout

Base unit 8px, with generous xxxl 80px section rhythm. Content centers in a wide container (~1200px). The page alternates black and pale-mint full-bleed bands. The hero pairs the two-tone headline + white/black CTA pills against a green-bar audio-visualizer artwork; below it a 4-up feature row (Postgres Database / Authentication / Compute / Storage) with outline icons and EARLY-ACCESS pills. Recurring motifs: monospace data-viz (the green dot-matrix "Databases deployed" fleet chart with Active/Idle counts), numbered API steps (01 / 02) with code wells, and a thin terminal HUD bar spanning the width. Whitespace is abundant and the rhythm is loose and cinematic.

Elevation & Depth

Essentially flat. Depth comes from color-band contrast (black ↔ mint), hairline-framed cards and terminal panels, and the halftone-dot gradient rather than shadows. The only true overlay treatments are the floating "Try it" footer bar and code wells, which sit on #18191B/#0D0E10 with a 1px #1F2023 edge. No drop-shadow ladder, no neumorphism.

Shapes

Nearly square: {rounded.xs} 4px on nav buttons, badges, and code wells; {rounded.sm} 8px on feature/terminal cards; {rounded.none} on full-bleed bands and HUD bars. The exception is fully-pill hero CTAs, EARLY-ACCESS badges, and nav Log in / Sign up. The geometry reads technical and crisp — pills for actions, square for data.

Components

• button-primary — white pill, near-black label, full radius ("Get started", "I'm building an agent"). One per viewport.
• button-secondary — black pill, 1px #1F2023 border, white label ("Read the docs").
• nav-signup — small white pill ("Sign up"); "Log in" is its bordered-black sibling.
• badge-early-access — green pill #00E599, near-black uppercase mono text ("EARLY ACCESS").
• eyebrow — an orange ▶ triangle + uppercase GeistMono label ("AGENT PLATFORM", "BACKED BY GIANTS").
• two-tone-statement — the signature sentence: white lead clause, grey continuation, at 40px Inter.
• feature-card — outline icon, 16px white title, grey description; transparent on black.
• code-block — #0D0E10 well, mono text, green POST verb / leading dot, 4px radius, hairline border.
• terminal-hud — full-width mono bar, grey text + green accents ("SYSTEM: NEON DATABASE PLATFORM … STATUS: ONLINE").
• copy-pill — a pale-mint chip holding $ npx neonctl init with a copy glyph.
• halftone-hero — the radial dot-matrix fading green→amber on black.

Motion

Quick and functional: {motion.duration-fast} 150ms hovers, {motion.duration-standard} 250ms transitions on a standard ease. The hero audio-bar artwork and the fleet dot-matrix animate (bars pulse, cells light up green) — data-as-motion, reinforcing "live database." Numbered API steps reveal sequentially. No parallax or decorative scroll spectacle; motion signals system activity, not flourish.

Iconography

Thin outline glyphs (Lucide as the OSS substitute for Neon's line set — database, lock, chip, box), ~1.75px stroke, 16/20/24px. UI icons inherit white; EARLY-ACCESS pills and code accents carry Neon green; eyebrow triangles carry orange. Never multi-tinted.

Do's and Don'ts

• Do keep the canvas pure black and let Neon green #00E599 be the one voltage — logo, EARLY-ACCESS pills, code accents, halftone hero.
• Do carry primary actions on the white pill, not on green — keep the green precious.
• Do set big headlines in Inter at weight 400 with tight negative tracking; never bold them.
• Do use the two-tone statement (white lead clause → grey continuation) for section headers.
• Do lean on GeistMono for code, the ▶ eyebrows, and the terminal HUD — the developer texture is the brand.
• Do alternate black with the pale-mint band for rhythm.
• Don't use green for body text, buttons, or borders.
• Don't introduce a third accent — only green plus the single orange eyebrow/Databricks mark.
• Don't round things broadly; keep data/chrome near-square (4px) and reserve pills for actions and badges.
• Don't add drop-shadow elevation — depth comes from color bands, hairlines, and the halftone gradient.

Known Gaps

• Black canvas #000000, Inter family, the 52px/400/-2.08px hero, GeistMono code, the two-tone white→grey statement (#FFFFFF / #797D86), 4px button radius, and white-pill CTAs were read directly from computed styles. Neon green #00E599 is reconciled from on-page greens (rgb(0,229,153), rgb(52,213,154)) and Neon's published brand green. The orange #FF4C24, mint band #E4F2EA, and the green→amber halftone stops are eyeballed from the rendered hero/sections — treat as close approximations.
• The authenticated console (project dashboard, SQL editor, branching UI) was not probed; tokens describe the marketing home.