Color Palette
Background Colors
Dark Green
#2C6D4C · ×1800
Cyan 2 (Brand)
#00E599 · ×17
Text Colors
Light Gray 2
#E4E5E7 · ×22
Border & Fill Colors
Cyan 4
rgba(57,165,125,.6)
Typography
Primary · Inter
Inter
Serverless Postgres that scales to zero. The fastest way to ship with Postgres.
Regular · 400
Medium · 500
Semibold · 600
Mono · GeistMono
GeistMono
psql postgres://user:pass@ep-cool.us-east-2.aws.neon.tech/neondb
Variable weight
Ship faster
72px · Semibold · line-height: 72px · tracking: −2.88px (tightest in series)
Serverless Postgres
52px · Semibold · line-height: 58.5px · tracking: −2.08px
Scale to zero instantly
36px · Semibold · line-height: 40.5px · tracking: −0.96px
Neon separates compute from storage, giving you instant database provisioning, autoscaling, and point-in-time recovery.
20px · Regular · line-height: 30px · tracking: −0.4px
Last backup: 2 minutes ago · compute: active · 47 connections
16px · Regular · line-height: 24px · tracking: −0.32px
14px · Medium · tracking: −0.1px
14px · Medium · line-height: 16px · tracking: −0.1px
POSTGRES · SERVERLESS · AUTOSCALE
11px · Semibold · line-height: 11px · smallest size in the system
Line Heights — 25 tokens (9px → 72px)
Letter Spacing — 22 tokens (all negative, −2.88px → −0.1px)
Neon
Tight (−2.88px)
Display hero — tightest in the 67-brand series
Serverless
ls-6 (−0.96px)
Section headings
Ship faster
ls-22 (−0.1px)
Body text, minimal tightening
Spacing
Spacing Scale
40 tokens — 1px → 271.055px
Borders
Border Radii
lg (~∞ Pill)
1.67772e+07px
Neon uses only 3 radius tokens — one of the most minimal radius systems. The --radius-lg value is 1.67772e+07px (≈16.7 million px), the same extreme value seen in Prisma — suggesting shared CSS framework origin. The --radius-md: 100% creates perfect circles for avatar and icon elements.
Border Width
Single 1px hairline. Neon's border system is highly minimal — no thick borders, no border-width variety. All visual definition comes from background color stepping through the dark surface hierarchy.
Shadows / Elevation
Shadow Tokens
1 token
sm
×1
rgba(0,0,0,.4) 8px 20px — deep drop shadow for elevated panels and modals. Strong opacity (0.4) consistent with Neon's very dark backgrounds.
Only 1 shadow token detected. Like most dark-theme systems in this series, Neon relies on background color stepping — #0A0A0B → #111215 → #18191B — for elevation rather than drop shadows.
Z-Index
| Layer | Value | Usage |
|---|
| z-1 | -10 | Background canvas decorations |
| z-2 | 1 | Base content layer |
| z-3 | 10 | Navigation, sticky headers |
| z-4 | 20 | Dropdowns, popovers |
| z-5 | 30 | Overlays, drawers |
| z-6 | 40 | Dialogs, toasts |
| z-7 | 50 | Top-level system panels |
| z-8 | 2,147,483,647 | Absolute maximum — INT_MAX (signed 32-bit) |
The z-8 value of 2,147,483,647 is the signed 32-bit integer maximum (2³¹ − 1) — the mathematical upper bound that browsers accept for z-index. This is the browser-maximum approach, contrasting with Prisma's 999,999,999 which is just under the limit. The gap from z-7 (50) to z-8 (2.1 billion) is the largest jump in the entire series.
Breakpoints
6 breakpoints spanning 413px–1919px — the widest coverage range in the series. Starts at 413px (narrower than standard 480px mobile), reaches 1919px for near-4K layouts. Unlike Prisma's mobile-only cluster, Neon's breakpoints cover the full responsive spectrum, reflecting a marketing site designed for all screen sizes.
Opacity
Opacity Tokens
4 tokens — 10%, 30%, 60%, 80%
Lean, semantic opacity scale — only 4 tokens at coarse steps (10/30/60/80%). This contrasts sharply with Prisma's 80-token 1%-increment system. Opacity-60 (×4) is the workhorse, used for overlay backgrounds and dimmed states.
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
⚠️ Mid-gray text (#797D86) fails on both white and cyan — confirming Neon's gray scale is calibrated for dark backgrounds only.
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Gray (#242628) | White (#FFF) | 15.19:1 | AAA |
| Dark Gray (#242628) | Cyan (#34D59A) | 8.05:1 | AAA |
| Dark Gray (#242628) | Mid Gray (#94979E) | 5.19:1 | AA |
| Dark Gray (#242628) | Black (#000) | 1.38:1 | Fail |
| Dark Gray 2 (#61646B) | White (#FFF) | 5.93:1 | AA |
| Dark Gray 2 (#61646B) | Cyan (#34D59A) | 3.14:1 | AA Large |
| Dark Gray 2 (#61646B) | Black (#000) | 3.54:1 | AA Large |
| Light Gray (#C9CBCF) | Black (#000) | 12.93:1 | AAA |
| Light Gray (#C9CBCF) | Dark Green (#2C6D4C) | 3.8:1 | AA Large |
| Light Gray (#C9CBCF) | White (#FFF) | 1.62:1 | Fail |
| Light Gray 2 (#E4E5E7) | Black (#000) | 16.66:1 | AAA |
| Light Gray 2 (#E4E5E7) | Dark Green (#2C6D4C) | 4.9:1 | AA |
| Mid Gray 2 (#797D86) | Black (#000) | 5.09:1 | AA |
| Mid Gray 2 (#797D86) | White (#FFF) | 4.13:1 | AA Large |
| Mid Gray 2 (#797D86) | Cyan (#34D59A) | 2.19:1 | Fail |
CSS Variables Reference
White--color-white#FFFFFF
Dark Green--color-dark-green#2C6D4C
Black--color-black#000000
Mid Gray--color-mid-gray#94979E
Cyan 2 (Brand)--color-cyan-2#00E599
Dark Gray 3--color-dark-gray-3#303236
Dark Gray 4--color-dark-gray-4#18191B
Dark Gray 8--color-dark-gray-8#111215
Black 3--color-black-3#0A0A0B
Light Gray 3--color-light-gray-3#E4F1EB
Light Cyan--color-light-cyan#CAE6D9
Mid Gray 2--color-mid-gray-2#797D86
Light Gray--color-light-gray#C9CBCF
Dark Gray--color-dark-gray#242628
Dark Gray 2--color-dark-gray-2#61646B
Light Gray 2--color-light-gray-2#E4E5E7
Dark Cyan--color-dark-cyan#285D49
Light Orange--color-light-orange#F7B983
Light Blue--color-light-blue#94B5F7
Cyan 3--color-cyan-3#37C38F
Cyan 4 (Fill)--color-cyan-4rgba(57,165,125,.6)
Inter--font-family-baseInter
GeistMono--font-family-2GeistMono
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
2xs (min: 9px)--font-size-2xs9px
3xl (UI base)--font-size-3xl16px
6xl--font-size-6xl24px
36px--font-size-36px36px
52px--font-size-52px52px
64px--font-size-64px64px
72px (Display)--font-size-72px72px
Tight--letter-spacing-tight−2.88px
ls-22 (min)--letter-spacing-ls-22−0.1px
Hairline--border-width-hairline1px
md (100% Circle)--radius-md100%
lg (~∞ Pill)--radius-lg1.67772e+07px
Instant--duration-instant150ms
Fast (×830)--duration-fast200ms
Normal--duration-normal300ms
No easing tokens defined
opacity-10--opacity-1010%
opacity-30--opacity-3030%
opacity-60--opacity-6060%
opacity-80--opacity-8080%
Background--z-1-10
Base--z-21
Navigation--z-310
Popovers--z-530
Dialogs--z-750
INT_MAX--z-82,147,483,647
Design System Preview · Neon (Dark) · Generated 19/04/2026 · 31 color tokens · 16 font-size · 2 font-family · 3 font-weight · 25 line-height · 22 letter-spacing · 40 spacing · 3 radius · 1 border-width · 1 shadow · 3 duration · 0 easing · 8 z-index · 6 breakpoints · 4 opacity