Neon Design System

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.