Neon Design System

Overview

Neon's marketing surface is the inverse of the developer-database category. Where most Postgres brands operate on a white canvas with a colored accent, Neon defaults to true {colors.canvas} (#000000) and treats white as the interruption — used only when a chart or product visualization needs a light backdrop to make the green graph spikes legible. The brand reads as phosphor-on-CRT: dark fields broken by emerald data lines, GeistMono captions, and Inter type compressed to editorial density.

Black-as-baseline: across the captured page, #000000 appears as a background in 8 contexts (hero, footer, code blocks, dark feature bands) and as a border or text color in 326 more. The system inverts the conventional polarity — the page IS dark, and any white surface is a deliberate spotlight on a graph or product mock.

Weight as restraint: Where most developer brands push 80px headlines to weight 600 or 700, Neon holds the hero {typography.display-xl} at weight 400 and earns presence through -3.2px tracking compression instead. The display tier never exceeds weight 500. This is not a brand that argues with bold type; it argues with letter-spacing math.

The single chromatic event is the emerald pair: {colors.primary} (#34d59a, declared in CSS as --shiki-token-keyword and --shiki-token-link) for code keywords and link underlines, and {colors.primary-bright} (#00e599) for the autoscaling-graph spikes. The two greens never overlap roles — one is for type, the other is for data viz. There is no second accent and no atmospheric gradient.

Key Characteristics:

• Black canvas as default ({colors.canvas} #000000) — white surfaces appear only as interruptions for chart visualizations and the autoscaling band.
• Single emerald voltage ({colors.primary} #34d59a) for code keywords and link text; {colors.primary-bright} (#00e599) reserved for graph spikes.
• Display tier at Inter weight 400 with -3.2px tracking at 80px — no bold display anywhere on the page.
• Flat 4px / 16px / pill radius scale — 63 of 73 captured radius events resolve to 4px.
• GeistMono captions and code blocks running 12-16px against #000000, with Shiki syntax tokens (#ff990a parameter, #ffed9c string) reused as the only secondary chromatics.
• A near-pure gray ladder from {colors.ink-faint} (#afb1b6) through {colors.ink-mute} (#94979e) down to {colors.hairline-darker} (#242628) and {colors.canvas-night} (#18191b) — eight steps, all neutral blue-cool, no warm grays.
• Light-band interruptions for charts use a tinted mint surface ({colors.surface-mint} #e4f1eb) rather than pure white — the brand never quite leaves the green family.

Colors

• Neon Emerald (#34d59a) — frequency 4. Used as text (1), bg (2), border (1). The brand voltage: declared in CSS as --shiki-token-keyword and --shiki-token-link. Reserved for code keywords and link underlines — never a CTA fill.
• Spike Green (#00e599) — frequency 12. Used as text (6), border (6). A cooler, brighter emerald that carries the autoscaling-chart graph lines and a handful of stroke accents. Where #34d59a is for type, this one is for data viz.
• Deep Emerald (#39a57d) — frequency 1, as gradient. The darker pair for hover and pressed states; never appears as a flat fill on the captured marketing track.
• Mint Surface (#e4f1eb) — frequency 4. Background-only. The tinted off-white panel under the autoscaling chart — proves the brand never lands on pure white even when going light.
• Pure White (#ffffff) — frequency 814. Used as text (413), bg (6), border (395). The dominant ink color, almost entirely as type on black canvas. Backgrounds are rare.
• Pure Black (#000000) — frequency 339. Used as text (165), bg (8), border (163). The canvas voltage. Carries hero, footer, code blocks, and feature bands.
• Mute Gray (#94979e) — frequency 159. Used as text (79), border (79). The workhorse mute color: secondary type on dark, hairlines on dark cards.
• Deep Mute (#797d86) — frequency 118. Used as text (57), border (61). Carries the "Postgres for the AI Engineering era" section heading — proves the brand uses muted grays for headlines, not pure white.
• Soft Gray (#c9cbcf) — frequency 44. Text and border ladder; appears in light-band interruptions.
• Faint Gray (#afb1b6) — frequency 11. Background-leaning gray for input fills and inactive states.
• Hairline Dark (#242628) — frequency 74. The 1px border color on every dark card — the visible scaffolding.
• Canvas Night (#18191b) — frequency 18. Used as text (6), bg (3), border (9). The near-black surface for elevated cards on top of the pure-black canvas.

Typography

The system runs Inter for every text role and GeistMono for code, eyebrow chips, and technical labels. There is no third typeface and no display-only face. The variation across the 11 tokens is weight (300 / 400 / 500) and size (10-80px), not family.

Display sizes stair-step display-xl 80px → display-lg 48px → display-md 28px → display-sm 24px, with letter-spacing compressed from -3.2px at the top to -0.56px at the bottom. Every display tier sits at weight 400 except the 24px tier at 500. Weight as restraint: the 80px hero refuses the conventional bold display weight — the brand earns presence through tracking math instead of stroke thickness.

Body runs 15-18px at weight 400 with -0.3px to -0.4px tracking. The eyebrow chips use GeistMono at 12px / weight 500 / 0.1em tracking — wide, uppercase, technical. Code blocks render GeistMono at 16px against the black canvas, with Shiki syntax tokens ({colors.primary} for keywords, {colors.code-parameter} #ff990a for parameters, {colors.code-string} #ffed9c for strings).

Layout

The page operates on a --spacing token of 0.25rem (4px), which makes the entire grid divisible by 4. Captured spacing values cluster at 12px (32 occurrences), 8px (14), 20px (11), 24px (9), and a recurring 80px section gap (8 occurrences). The container scale tops out at --container-7xl (80rem) but most hero content sits inside the 6xl (72rem) container with 0px 32px horizontal padding (12 captured events).

Hero composition is single-column centered: the 80px headline sits in a ~832px measure, the subhead below in a ~960px measure. Feature bands alternate orientation — chart cards run 2-up at hero width, while text-led bands stack centered with the same 80px section gap separating them.

Elevation & Depth

Neon's elevation system is hairline-led, not shadow-led. Every elevated card on the dark canvas uses a single 1px border in {colors.hairline-dark} (#242628) or {colors.hairline-darker} (#303236) against a {colors.canvas-night} (#18191b) fill — the slightly lifted near-black on pure black gives ~2 perceptual levels of elevation without a single shadow declaration. The extracted CSS confirms it: the default --tw-shadow resolves to transparent zero across nearly every elevated surface.

The result is a card system that reads as flat-but-distinct — exactly the right register for a database product. Heavy shadows would feel material and consumer; the hairline ladder reads as technical and CRT-like.

Shapes

Neon's radius scale is the flattest in the directory. Of 73 captured radius events, 63 resolve to 4px ({rounded.sm}), 9 to the pill scale ({rounded.full} 9999px, used only for tiny status chips), and 1 to 100% (avatars). There is no 8px, no 12px, no 16px-card-radius intermediate. The CSS variables expose a --radius-xl at 12px and --radius-2xl at 16px from the Tailwind config, but the page itself almost never reaches for them.

The 4px square-ish corners read as engineered rather than friendly — the right register for a database product. Where Supabase lands at 6px and Vercel pushes marketing CTAs to fully-pilled 100px, Neon stays at 4px on buttons, cards, inputs, and code blocks alike. The flatness is the voice.

Components

Eighteen recipes mapped from the captured ground truth, anchored to the dark canvas:

• button-primary: black-on-black with a {colors.hairline-darker} hairline border, 12px / 24px padding, Inter body-md type. The CTA reads as a lit panel inside the canvas, not as a colored chip.
• button-secondary: white fill with {colors.hairline} border, dark ink — the inverted variant for light-band interruptions.
• nav-link: ghost button with 0px 14px padding, 4px radius, sitting on the black top nav. No underline at rest; emerald appears on hover.
• link-emerald: inline link in {colors.primary-link} (#47d18c) against black body text, no padding, no radius — pure text decoration.
• hero-headline: 80px Inter at weight 400 with -3.2px tracking, white on black.
• card-feature-dark: {colors.canvas-night} fill, {colors.hairline-dark} 1px border, 4px radius, 32px padding — the standard elevated surface.
• card-autoscale-light: {colors.surface-mint} fill with {colors.surface-mint-soft} border, dark ink — the tinted mint panel under the chart band.
• badge-pill: GeistMono eyebrow chip in a pill radius, near-black fill with hairline-dark border.
• code-block: black fill with {colors.hairline-dark} border, GeistMono at 16px, syntax tokens in {colors.primary} / {colors.code-parameter} / {colors.code-string}.
• text-input: {colors.canvas-night} fill with {colors.hairline-darker} border, Inter body-md.
• graph-spike: the autoscaling-chart line itself — {colors.primary-bright} (#00e599) stroke against {colors.surface-mint} panel.

Do's and Don'ts

Do:

• Default to {colors.canvas} (#000000) for marketing surfaces — the brand inverts the developer-database convention by treating black as baseline.
• Hold display weights at 400 (or 500 at most) and compress letter-spacing to -3.2px at 80px — the typographic restraint is the voice.
• Reserve {colors.primary} (#34d59a) for code keywords and inline link text; reserve {colors.primary-bright} (#00e599) for chart strokes. The two greens are not interchangeable.
• Use {colors.hairline-dark} (#242628) 1px borders for card elevation instead of box-shadows — the captured CSS confirms the default --tw-shadow resolves to transparent zero.
• Set GeistMono eyebrow chips at 0.1em letter-spacing in uppercase — the only place wide tracking appears.

Don't:

• Don't fill the primary CTA with green — emerald is for type and chart lines, not buttons. The brand CTA is black-on-black with a hairline border; a green button would push the voice toward Slack or Linear rather than Neon.
• Don't reach for an 8px or 12px radius on cards — 63 of 73 captured radii are 4px. Adding a rounded-lg (8px) softens the engineered voice the system depends on.
• Don't pair #34d59a with white backgrounds — the green is calibrated for black canvas. On white it reads as a Slack/Notion-default green and loses the phosphor quality. Use {colors.primary-deep} (#39a57d) on light surfaces instead.
• Don't use {colors.ink-mute-deep} (#797d86) for body text — it's a heading color that carries the muted "Postgres for the AI Engineering era" section title. For body, use {colors.ink} (#ffffff) on dark or {colors.ink-on-light} (#000000) on light.
• Don't introduce a third typeface — the brand runs Inter and GeistMono only. Adding a serif or a second sans collapses the technical voice.

Known Gaps

• In-product console chrome: the database explorer, SQL editor, branch view, and query-history densities live inside the product app and weren't captured on the public marketing surfaces.
• Focus rings: no text input was visible on the captured landing page; the focus-ring color, width, and offset on :focus-visible aren't documented.
• Hover and pressed states: beyond the implied {colors.primary-deep} (#39a57d) gradient color, hover-state lifts on buttons and cards weren't consistently observable on the static capture.
• Empty / loading / skeleton screens: not visible on the captured marketing pages.
• Toast and inline-alert system: semantic info / success / warning / error treatments aren't represented in the marketing track.
• Secondary Shiki tokens: the operator (#ba8c5e), string-expression (#af93ea), and function (#f7b983) syntax colors appear in code blocks but weren't classified as brand layers — they exist in the spec but aren't exposed as top-level color tokens here.