Neon — design system & UI screens

Dev Tools · 2 screens · 18 sections · neon.com

Near-black landing page whose signature is a wide hero banner rendered as a vertical neon-green spectrum/waveform print (the brand's namesake "neon" light bars) sitting directly above the bold headline "Neon is the Postgres backend designed for apps and agents." Below, a long single-column scroll alternates dark feature blocks with light-mint section breaks, each pairing a short headline with a real artifact: a green area chart for autoscaling, a terminal/code block for the API, and a stats band ("12,000,000" projects, Databricks acquisition). Distinctive touches are the monochrome logo bar of customers, the tiny iconographic markers beside each feature, and the consistent neon-green-on-black accent system that ties the whole page to the product name.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/neon.

Decoded design system

Neon's decoded design system: background #000000, text #ECECEE, accent #34D59A, link #39A57D, primary #34D59A; type scale h1 68px / h2 48px / body 16px; 4px spacing base; 4px base radius. The single interactive/action color is #34D59A — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#000000`
surface	`#0E0E0E`
border	`#232323`
text	`#ECECEE`
text_muted	`#929293`
primary	`#34D59A`
accent	`#34D59A`
link	`#39A57D`
button_bg	`#34D59A`
button_text	`#000000`

Using these colors

Action color #34D59A — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #34D59A — one role, not several (the action color).
accent #34D59A — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #39A57D — inline text links and link-styled controls.

Typography

Heading: Inter
Body: Inter
Mono: GeistMono
h1: 68px
h2: 48px
body: 16px

Spacing

base unit: 4px
scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 24px, 25px

Radii

base: 4px
button: 9999px

Motion

Micro-interactions run at 200ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 200ms · 150ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · linear
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--shiki-foreground`	`#f9fafa`
`--shiki-token-embed`	`#fff`
`--shiki-token-parameter`	`#ff990a`
`--shiki-token-keyword`	`#34d59a`
`--shiki-token-constant`	`#94b5f7`
`--shiki-token-comment`	`#797d86`
`--error-tooltip-bg`	`#000`
`--shiki-token-operator`	`#ba8c5e`
`--shiki-token-string-expression`	`#af93ea`
`--shiki-token-string`	`#ffed9c`

…and 48 more measured on the page.

Button states (measured)

primary hover: background #C9CBCF
primary focus: outline 2px solid rgb(56, 165, 125)

Layout (measured)

container max-width: 1600px
nav: 64px sticky
common grid: 2 columns

Motion choreography (measured)

Load order: span.truncate → ul.logos-content×4 → div.transition-opacity

Scroll reveal: 6 elements rest at opacity 0, animate in over 0.2s cubic-bezier(0.4, 0, 0.2, 1).

Overlay recipe (measured)

dropdown panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 639px · 767px · 1023px · 1279px · 1599px
mobile (390px): hero 32px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →