Neon

---
version: alpha
name: "Neon Dark-First Developer"
description: "Neon's design system is a dark-first developer brand built on a near-black canvas (#000000, #18191b) with a vivid neon-green primary (#00e599) and a supporting mid-green (#34d59a). The typographic system pairs Inter (UI/body) with GeistMono (code/data), both with tight negative letter-spacing. Spacing follows a 4px base grid. Border radius is uniformly minimal at 4px. Elevation is achieved through border contrast rather than shadows, with a single ambient drop-shadow used sparingly. The hero section features a full-bleed animated data-visualization background, reinforcing the database/infrastructure brand identity."
colors:
  background-base: "#000000"
  brand-green-dark: "#2c6d4c"
  surface-elevated: "#18191b"
  surface-mid: "#242628"
  brand-green: "#00e599"
  brand-green-mid: "#34d59a"
  error-red: "#ff3621"
  text-muted: "#61646b"
  text-primary: "#ffffff"
  text-secondary: "#94979e"
  text-tertiary: "#797d86"
  border-default: "#c9cbcf"
  border-subtle: "#303236"
  surface-green-tint: "#e4f1eb"
  surface-subtle: "#f9fafa"
typography:
  display-hero:
    fontFamily: "Inter"
    fontSize: "68px"
    fontWeight: "400"
    lineHeight: "1.0"
    letterSpacing: "-1.92px"
  heading-xl:
    fontFamily: "Inter"
    fontSize: "48px"
    fontWeight: "400"
    lineHeight: "54px"
    letterSpacing: "-1.92px"
  heading-lg:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "18px"
    letterSpacing: "-0.13px"
  body-base:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-sm:
    fontFamily: "Inter"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "22.5px"
    letterSpacing: "-0.3px"
  label-sm:
    fontFamily: "Inter"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "16.25px"
    letterSpacing: "-0.13px"
  code-base:
    fontFamily: "GeistMono"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "-0.32px"
  code-lg:
    fontFamily: "GeistMono"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "27.5px"
    letterSpacing: "-0.32px"
  code-sm:
    fontFamily: "GeistMono"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "23.1px"
    letterSpacing: "-0.28px"
  code-xs:
    fontFamily: "GeistMono"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "12px"
    letterSpacing: "-0.32px"
rounded:
  radius-sm: "4px"
  radius-xl: "12px"
spacing:
  space-1: "4px"
  space-2: "8px"
  space-3: "12px"
  space-4: "16px"
  space-5: "20px"
  space-6: "24px"
  space-7: "28px"
  space-8: "32px"
  space-9: "36px"
  space-10: "64px"
  space-11: "80px"
  space-12: "160px"
  space-13: "240px"
---

## Overview

Neon's design system is a dark-first developer brand built on a near-black canvas (#000000, #18191b) with a vivid neon-green primary (#00e599) and a supporting mid-green (#34d59a). The typographic system pairs Inter (UI/body) with GeistMono (code/data), both with tight negative letter-spacing. Spacing follows a 4px base grid. Border radius is uniformly minimal at 4px. Elevation is achieved through border contrast rather than shadows, with a single ambient drop-shadow used sparingly. The hero section features a full-bleed animated data-visualization background, reinforcing the database/infrastructure brand identity.

**Signature traits:**
- Dual typeface system: Pairs Inter and GeistMono across the type hierarchy.

## Colors

The palette uses 21 validated color tokens across 2 theme profiles. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `background-base`: Role "background" is grounded by usage context "Primary page background, hero section, nav overlay".
- **action-background** maps to `surface-elevated`: Role "background" is grounded by usage context "Card and link group backgrounds, slightly elevated surfaces".
- **action-border** maps to `border-subtle`: Role "border" is grounded by usage context "Hairline dividers, nav link bottom borders, card outlines".
- **action-text** maps to `text-primary`: Role "text" is grounded by usage context "All primary headings, body text, nav labels, button labels".

### Dark Theme

### Text Scale
- **Brand Green** (#00e599): Primary CTA buttons, brand highlights, logo accent. Role: text. {authored: rgb(0, 229, 153), space: rgb}
- **Brand Green Mid** (#34d59a): Syntax keyword highlighting, secondary green accents. Role: text. {authored: rgb(52, 213, 154), space: rgb}
- **Error Red** (#ff3621): Error states, destructive action indicators. Role: text. {authored: rgb(255, 54, 33), space: rgb}
- **Text Muted** (#61646b): Disabled states, very muted secondary text. Role: text. {authored: rgb(97, 100, 107), space: rgb}
- **Text Primary** (#ffffff): All primary headings, body text, nav labels, button labels. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.02}
- **Text Secondary** (#94979e): Secondary body text, metadata, muted labels. Role: text. {authored: rgb(148, 151, 158), space: rgb}
- **Text Tertiary** (#797d86): Code comments, placeholder text, de-emphasized labels. Role: text. {authored: rgb(121, 125, 134), space: rgb}

### Interactive
- **Border Default** (#c9cbcf): Visible borders on interactive elements in lighter contexts. Role: border. {authored: rgb(201, 203, 207), space: rgb}
- **Border Subtle** (#303236): Hairline dividers, nav link bottom borders, card outlines. Role: border. {authored: rgb(48, 50, 54), space: rgb}

### Surface & Shadows
- **Background Base** (#000000): Primary page background, hero section, nav overlay. Role: background. {authored: rgb(0, 0, 0), space: rgb}
- **Brand Green Dark** (#2c6d4c): Localized surface accent, footer decorative elements. Role: background. {authored: rgb(44, 109, 76), space: rgb}
- **Surface Elevated** (#18191b): Card and link group backgrounds, slightly elevated surfaces. Role: background. {authored: rgb(24, 25, 27), space: rgb}
- **Surface Mid** (#242628): Secondary surface, footer elements, subtle containers. Role: background. {authored: rgb(36, 38, 40), space: rgb}

### Light Theme

### Text Scale
- **Brand Green** (#00e599): Primary CTA, brand accent on light backgrounds. Role: text. {authored: rgb(0, 229, 153), space: rgb}
- **Brand Green Mid** (#34d59a): Secondary green accent, syntax highlighting. Role: text. {authored: rgb(52, 213, 154), space: rgb}
- **Text Primary** (#000000): Primary headings and body text on light backgrounds. Role: text. {authored: rgb(0, 0, 0), space: rgb}
- **Text Secondary** (#94979e): Secondary and muted text on light surfaces. Role: text. {authored: rgb(148, 151, 158), space: rgb}

### Interactive
- **Border Subtle** (#e4e5e7): Light-mode hairline dividers and card borders. Role: border. {authored: rgb(228, 229, 231), space: rgb}

### Surface & Shadows
- **Background Base** (#ffffff): Page background in light mode contexts. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.02}
- **Surface Green Tint** (#e4f1eb): Light green tinted surface for callouts or highlights. Role: background. {authored: rgb(228, 241, 235), space: rgb}
- **Surface Subtle** (#f9fafa): Subtle off-white surface for cards and sections. Role: background. {authored: rgb(249, 250, 250), space: rgb}

## Typography

Typography uses Inter, GeistMono across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes Inter and GeistMono for visual contrast. Weight range spans regular, medium. Sizes range from 12px to 68px.

### Font Roles
- **Headline Font**: Inter
- **Body Font**: Inter

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — large display text for primary page statement | Inter | 68px | 400 | 1.0 | -1.92px | Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Section headings, major content titles | Inter | 48px | 400 | 54px | -1.92px | Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Card titles, sub-section headings, nav group labels | Inter | 18px | 500 | 18px | -0.13px | Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Primary body copy, nav items, general UI text | Inter | 16px | 400 | 24px | normal | Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Secondary body text, button labels, compact UI text | Inter | 15px | 400 | 22.5px | -0.3px | Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Metadata labels, tags, small captions | Inter | 13px | 400 | 16.25px | -0.13px | Inter, Inter Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Primary monospace code, terminal output, data display | GeistMono | 16px | 400 | 16px | -0.32px | GeistMono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace | Extracted token |
| Larger code blocks, featured code snippets | GeistMono | 20px | 400 | 27.5px | -0.32px | GeistMono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace | Extracted token |
| Inline code, small terminal text, compact data | GeistMono | 14px | 400 | 23.1px | -0.28px | GeistMono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace | Extracted token |
| Micro labels, version numbers, compact code annotations | GeistMono | 12px | 400 | 12px | -0.32px | GeistMono, ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace | Extracted token |

## Layout

Responsive system uses 2 breakpoint tier(s): mobile, desktop.

This system uses a 4px base grid with scale values 1, 2, 3, 4, 5, 6, 7, 8, 9, 16, 20, 40, 60.

### Responsive Strategy
- **mobile (<= 1919px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 4px | 4 | Extracted spacing token |
| space-2 | 8px | 8 | Extracted spacing token |
| space-3 | 12px | 12 | Extracted spacing token |
| space-4 | 16px | 16 | Extracted spacing token |
| space-5 | 20px | 20 | Extracted spacing token |
| space-6 | 24px | 24 | Extracted spacing token |
| space-7 | 28px | 28 | Extracted spacing token |
| space-8 | 32px | 32 | Extracted spacing token |
| space-9 | 36px | 36 | Extracted spacing token |
| space-10 | 64px | 64 | Extracted spacing token |
| space-11 | 80px | 80 | Extracted spacing token |
| space-12 | 160px | 160 | Extracted spacing token |
| space-13 | 240px | 240 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(15px) |
| Light | outline-style | solid |
| Light | outline-color | rgb(255, 255, 255) ; rgb(0, 0, 0) ; rgb(148, 151, 158) |
| Light | outline-width | 3px ; 1px |
| Light | outline-offset | 0px |
| Light | transform | matrix(0.33, 0, 0, 0.33, 0, 0) ; matrix(1, 0, 0, 1, -132.853, 0) ; matrix(1, 0, 0, 1, -169.546, 0) |
| Dark | backdrop-filter | blur(15px) |
| Dark | outline-style | solid |
| Dark | outline-color | rgb(255, 255, 255) ; rgb(0, 0, 0) ; rgb(148, 151, 158) |
| Dark | outline-width | 3px ; 1px |
| Dark | outline-offset | 0px |
| Dark | transform | matrix(0.33, 0, 0, 0.33, 0, 0) ; matrix(1, 0, 0, 1, -168.477, 0) ; matrix(1, 0, 0, 1, -215.01, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-xl | 12px | 12 | Control corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-xl | 12px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 413px | (max-width: 413px) |
| Mobile | <= 767px | (max-width: 767px) |
| Breakpoint 3 | <= 1023px | (max-width: 1023px) |
| Breakpoint 4 | <= 1279px | (max-width: 1279px) |
| Breakpoint 5 | <= 1599px | (max-width: 1599px) |
| Breakpoint 6 | <= 1919px | (max-width: 1919px) |
| Breakpoint 7 | Unknown | (max-width: 39.9375rem) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.