---
version: alpha
name: Neon
website: "https://neon.com"
description: >-
  An inspired interpretation of Neon's design language — a serverless Postgres platform whose marketing surface commits to a black canvas, an Inter display tier that pulls 80px headlines into -3.2px tracking at weight 400, and a single emerald voltage (#34d59a) that surfaces as keyword highlights, link underlines, and the lit-green graphs that argue for the product. Where most database brands paint dashboards on white, Neon paints them on black and lets the green do the talking.

seo:
  title: "Neon Design System for React — Emerald #34d59a, Inter, 18 components"
  metaDescription: "Neon's serverless Postgres design language as a DESIGN.md file. Black canvas, emerald #34d59a, Inter at 80px / -3.2px, GeistMono code, 18 components."
  highlights:
    - "Black canvas as default — #000000 carries hero, footer, and feature bands; the white sections are interruptions, not the baseline"
    - "Inter at weight 400 / 80px / -3.2px — the display tier refuses bold weights and earns presence by tracking compression instead"
    - "Two greens, two jobs — #34d59a (CSS --shiki-token-keyword) for code and links; #00e599 reserved for autoscaling-graph spikes"
    - "Square 4px radii everywhere — 63 of 73 captured radius events resolve to 4px; pills exist only on a handful of badge chips"
    - "GeistMono at 12px / 16px for technical labels and code blocks — the brand's developer DNA is visible in every snippet"
  tags:
    - "Backend, Database & DevOps"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Neon's marketing surface is the inverse of the developer-database category. Where Supabase commits to a white canvas with a green accent and Postgres-the-marketing-site usually leans editorial-light, Neon defaults to true black (#000000) and lets a single emerald (#34d59a) carry every link underline, every code-keyword highlight, and the lit autoscaling-graph spikes that visualize the product. Type runs Inter at weight 400 across the entire display tier — the 80px hero pulls -3.2px tracking out of the geometric letterforms to compensate for the absent weight. There's no second accent color, no gradient mesh, no brand-blue link. The greens, the black, and the gray ladder from #94979e to #18191b are the entire palette.

    This page packages that system into a single DESIGN.md file in the Google Labs open spec. Inside: 22 color tokens (2 emerald variants, 8 grays, 4 surface fills, dark and light ink pairs, and the 4 Shiki syntax-highlight hues the brand reuses from its code blocks), 11 typography styles split between Inter and GeistMono, 4 radius tokens anchored at 4px, an 8-step spacing scale rooted on the brand's 4px grid, and 18 component recipes spanning the dark primary CTA, the inverted light-band autoscaling card, the GeistMono code block at #000000, and the underline-only nav link pattern that does most of the chrome work.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Neon's specific discipline — black-first marketing, weight-400 displays with aggressive negative tracking, emerald reserved for code and graphs, square 4px corners instead of pills. Reference the tokens directly inside a Tailwind config, or audit an existing React app against them. The system is worth studying because it proves a Postgres brand can ship a serious marketing track without a white canvas and without a single bold weight — the graph spikes do the work that bold type usually does.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://neon.com"
      title: "Neon — official site"
      description: "The serverless Postgres platform built for teams and AI agents — branching, autoscaling, and instant provisioning."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Neon's primary brand color?"
      answer: "Neon's signature voltage is an emerald green at #34d59a — declared in CSS as --shiki-token-keyword and --shiki-token-link, which tells you exactly where the brand wants it: code keywords and link underlines. A second slightly cooler green at #00e599 carries the autoscaling-graph spikes and a handful of borders (12 captured occurrences, half as text and half as border). The brand pairs both greens against #000000 backgrounds rather than white, which gives the color a phosphor-on-CRT quality rather than a Slack-green chip feel. There is no secondary accent — across the entire marketing track, green is the only chromatic event."
    - id: "dark-mode"
      title: "Is Neon's marketing dark by default?"
      answer: "Yes — and that's the brand's most distinctive choice. The hero, footer, instant-branching band, and Postgres-AI-Engineering pitch all sit on pure #000000 with #ffffff text and the emerald link color. White surfaces appear only as interruptions for product visualizations (the autoscaling chart sits on a tinted off-white at #e4f1eb / #f9fafa to make the green graph readable). The mainline marketing canvas is black; the polarity-flip is the exception, not the rule. The product app itself follows the same dark-first convention."
    - id: "typography"
      title: "What font does Neon use, and how does the display tier work?"
      answer: "The system runs Inter (with an Inter Fallback face) for every text role, and GeistMono for code and technical labels. Display tiers stair-step 80px / 48px / 28px at weight 400 with tracking compressed to -3.2px / -1.92px / -0.56px. The 80px hero is the most distinctive call — most developer brands would push that size to weight 600 or 700, but Neon holds it at 400 and earns the presence through letter-spacing compression instead. Body runs 15-18px at weight 400 with -0.3px tracking. Code blocks render GeistMono at 12-16px against a black background with Shiki syntax tokens (keyword #34d59a, parameter #ff990a, string #ffed9c)."
    - id: "shape-language"
      title: "Why are Neon's corners almost all 4px?"
      answer: "Of the 73 captured border-radius events, 63 resolve to 4px and 9 to the pill scale (~9999px) reserved for tiny status chips. There is no 8px or 12px intermediate; the system runs a flat 0px / 4px / 16px / pill scale and uses 4px for buttons, cards, and inputs alike. The square-ish 4px reads as engineered rather than friendly — the right register for a database product whose dashboard sits adjacent to the marketing copy. A 12px or 16px card radius would soften the technical voice; the 4px holds the brand on the developer-tool side of the line."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a React app that looks like Neon?"
      answer: "Yes — feed the file to Claude, Cursor, or any AI agent that reads structured design tokens and it will reproduce Neon's specific discipline: black canvas, weight-400 display at -3.2px tracking, emerald (#34d59a) reserved for code keywords and links, square 4px corners, GeistMono captions on technical labels. Every hex (#000000, #34d59a, #00e599, #18191b, #94979e) is quoted so it pastes straight into a Tailwind config or CSS variable file. The 18 component recipes give you the primary dark button, the autoscaling chart card, the GeistMono code block, the underline nav link, and the light-band interruption pattern ready to wire onto shadcn primitives."
    - id: "known-gaps"
      title: "What's missing from this Neon DESIGN.md spec?"
      answer: "Several items the captured marketing surface doesn't expose: the in-product console chrome (the database explorer, SQL editor row densities, log-stream cursor states), the focus-ring system on form inputs (no input element was visible on the captured landing page), the hover-state colors beyond the documented #34d59a default, full empty / loading / skeleton screens, the toast and inline-alert color system, and the 4 secondary Shiki syntax-token colors (#ba8c5e operator, #af93ea string-expression, #f7b983 function) which appear in code blocks but weren't classified as brand layers."

colors:
  primary: "#34d59a"
  primary-deep: "#39a57d"
  primary-bright: "#00e599"
  primary-link: "#47d18c"
  on-primary: "#000000"
  ink: "#ffffff"
  ink-on-light: "#000000"
  ink-mute: "#94979e"
  ink-mute-deep: "#797d86"
  ink-faint: "#afb1b6"
  ink-dim: "#61646b"
  ink-low: "#494b50"
  hairline: "#c9cbcf"
  hairline-cool: "#e4e5e7"
  hairline-dark: "#303236"
  hairline-darker: "#242628"
  canvas: "#000000"
  canvas-night: "#18191b"
  canvas-deep: "#0a0a0b"
  canvas-soft: "#ffffff"
  surface-mint: "#e4f1eb"
  surface-mint-soft: "#cae6d9"
  surface-mint-deep: "#285d49"
  code-parameter: "#ff990a"
  code-string: "#ffed9c"

typography:
  display-xl:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "-3.2px"
  display-lg:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.125
    letterSpacing: "-1.92px"
  display-md:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: "-0.56px"
  display-sm:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: "-0.96px"
  body-lg:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.36px"
  body-md:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.4px"
  body-sm:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.3px"
  button-md:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.15px"
  caption:
    fontFamily: "Inter, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: "-0.26px"
  eyebrow-mono:
    fontFamily: "GeistMono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: "0.1em"
  code:
    fontFamily: "GeistMono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.32px"

rounded:
  none: "0px"
  sm: "4px"
  xl: "16px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    border: "1px solid {colors.hairline-darker}"
  button-primary-hover:
    backgroundColor: "{colors.canvas-night}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
  button-secondary:
    backgroundColor: "{colors.canvas-soft}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    border: "1px solid {colors.hairline}"
  button-ghost-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
    border: "1px solid {colors.hairline-dark}"
  nav-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "0px 14px"
    border: "0"
  link-emerald:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary-link}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0"
    border: "0"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "20px 32px"
  hero-headline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "0"
  section-heading-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mute-deep}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: "0"
  card-feature-dark:
    backgroundColor: "{colors.canvas-night}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: "32px"
    border: "1px solid {colors.hairline-dark}"
  card-autoscale-light:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: "32px"
    border: "1px solid {colors.surface-mint-soft}"
  badge-pill:
    backgroundColor: "{colors.canvas-night}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow-mono}"
    rounded: "{rounded.full}"
    padding: "4px 10px"
    border: "1px solid {colors.hairline-dark}"
  code-block:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.code}"
    rounded: "{rounded.sm}"
    padding: "20px 24px"
    border: "1px solid {colors.hairline-dark}"
  code-keyword:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.code}"
    rounded: "{rounded.none}"
    padding: "0"
    border: "0"
  text-input:
    backgroundColor: "{colors.canvas-night}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    border: "1px solid {colors.hairline-darker}"
  caption-mute:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mute}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: "0"
    border: "0"
  divider-hairline-dark:
    backgroundColor: "{colors.hairline-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: "0"
    height: "1px"
    border: "0"
  graph-spike:
    backgroundColor: "{colors.surface-mint}"
    textColor: "{colors.primary-bright}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: "0"
    border: "0"
---

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