Design System inspired by Neon

Serverless Postgres. Neon green on dark, glow effects, futuristic aesthetic.

Usage

npx getdesign@latest add neon

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Neon design system. A curated starting point for building Neon-like UIs with your AI coding agent.

Serverless Postgres. Neon green on dark, glow effects, futuristic aesthetic.

Preview

neon.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF NEON

Serverless Postgres. Neon green on dark, glow effects, futuristic aesthetic.

Explore the system View tokens

Color Palette

Serverless Postgres. Neon green on dark, glow effects, futuristic aesthetic.

Primary

Neon Green

#00e699

Brand color

Dark BG

#0a0a0a

Brand color

Surface

#131313

Brand color

Border

#242424

Brand color

White

#ffffff

Brand color

Gray

#909090

Brand color

Glow

#00e69940

Brand color

Code BG

#0d0d0d

Brand color

Typography

A type system inspired by Neon.

Inter

Inter, Inter

IBM Plex Mono

IBM Plex Mono, Inter

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Neon.

Not detected on this URL

Components

Other component primitives mapped from the Neon spec.

Not detected on this URL

Design System Inspired by Neon

1. Visual Theme & Atmosphere

Serverless Postgres. Neon green on dark, glow effects, futuristic aesthetic.

Key Characteristics:

Neon green (#00E699) with glow effects on dark

Futuristic terminal-inspired aesthetic

Glow/bloom effects around interactive elements

Developer-centric code-forward layouts

PostgreSQL branching visualized as tree diagrams

2. Color Palette & Roles

Primary

Neon Green (#00E699): Brand color
Dark BG (#0A0A0A): Brand color
Surface (#131313): Brand color
Border (#242424): Brand color
White (#FFFFFF): Brand color
Gray (#909090): Brand color
Glow (#00E69940): Brand color
Code BG (#0D0D0D): Brand color

3. Typography Rules

Font Family

Display & UI: Inter, IBM Plex Mono

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth is communicated through background color shifts and subtle shadows or borders.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Neon Green: #00E699
Dark BG: #0A0A0A
Surface: #131313
Border: #242424
White: #FFFFFF
Gray: #909090

Typography

Font: Inter, IBM Plex Mono