/
design.md
Back to directory
dark · maximalist · y2k · playful · modern

Neon Y2K.

Hot magenta and cyber-lime on absolute black. Oversized monospace, chrome gradients, hard-edged buttons, glowing accents. Built for clubs and clients with attitude.

01 · Preview

The kitchen sink.

Neon.app
ProductPricingDocsAbout
Sign inGet started
dark · maximalist · y2k

Build with Neon Y2K.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#EAF2FF
secondary
#7B86A8
tertiary
#FF2E97
neutral
#000000
surface
#0A0A12
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
0
md
2px
lg
4px
pill
999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · The file

DESIGN.md

markdown
1---
2name: "Neon Y2K"
3description: "Hot magenta and cyber-lime on absolute black. Oversized monospace, chrome gradients, hard-edged buttons, glowing accents. Built for clubs and clients with attitude."
4tags: [dark, maximalist, y2k, playful, modern]
5colors:
6  primary:   "#EAF2FF"
7  secondary: "#7B86A8"
8  tertiary:  "#FF2E97"
9  neutral:   "#000000"
10  surface:   "#0A0A12"
11typography:
12  display: "JetBrains Mono"
13  body:    "Space Grotesk"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5rem / 1 / 700 / -0.02em"
17    h1:   "3rem / 1.05 / 700 / -0.015em"
18    h2:   "1.25rem / 1.2 / 600 / 0.04em"
19    body: "1rem / 1.55 / 400 / 0"
20radius:
21  sm: 0
22  md: 2px
23  lg: 4px
24shadows:
25  card:   "0 0 0 1px rgba(255, 46, 151, 0.20), 0 12px 32px -12px rgba(255, 46, 151, 0.30)"
26  button: "0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)"
27borders:
28  card:    "1px solid rgba(255, 46, 151, 0.20)"
29  divider: "rgba(0, 229, 255, 0.20)"
30buttons:
31  primary:
32    background: linear-gradient(180deg, #DDFF66 0%, #B8E600 100%)
33    color: #000000
34    border: 1px solid #CCFF00
35    shape: sharp
36    padding: 12px 22px
37    font: mono / 700 / 0.875rem / 0.10em
38    uppercase: true
39    shadow: 0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)
40    hover: glow
41  secondary:
42    background: #0A0A12
43    color: #FF2E97
44    border: 1px solid #FF2E97
45    shape: sharp
46    padding: 12px 22px
47    font: mono / 700 / 0.875rem / 0.10em
48    uppercase: true
49    shadow: 0 0 16px -4px rgba(255, 46, 151, 0.50)
50  outline:
51    background: transparent
52    color: #EAF2FF
53    border: 1px solid rgba(234, 242, 255, 0.25)
54    shape: sharp
55    padding: 12px 22px
56    font: mono / 600 / 0.875rem / 0.10em
57    uppercase: true
58  ghost:
59    background: transparent
60    color: #00E5FF
61    border: none
62    shape: sharp
63    padding: 10px 4px
64    font: mono / 600 / 0.8125rem / 0.12em
65    uppercase: true
66    hover: underline
67charts:
68  variant: "thin-bars"
69  gridlines: false
70  bar_radius: 0
71  bar_gap: 10px
72  highlight: all
73  axis_color: "#7B86A8"
74  palette: ["#FF2E97", "#CCFF00", "#00E5FF", "#FF2E97", "#CCFF00", "#00E5FF", "#FF2E97"]
75fonts_url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
76dependencies: ["lucide-react"]
77---
78 
79# Neon Y2K
80 
81## AI Build Instructions
82 
83> **Read this section before writing any code.** The rules below
84> are non-negotiable. Every value used in the UI must come from this
85> file's frontmatter — never substitute, approximate, or invent new
86> colors, fonts, radii, or shadows. If a value is missing, ask the
87> user before adding one.
88 
89### 1 · Your role
90 
91You are building UI for a project that has adopted **Neon Y2K** as its
92design system. Treat `DESIGN.md` as the single source of truth.
93Your job is to translate the user's product requirements into
94components and pages that look like they were designed by the same
95person who authored this file.
96 
97### 2 · Token compliance
98 
99- Pull every color, font family, radius, shadow, and spacing value
100  from the frontmatter at the top of this file.
101- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
102  hard-code hex values that bypass the system.
103- When a token can be expressed as a CSS variable, declare it once
104  in your global stylesheet and reference it everywhere downstream.
105- The Google Fonts `<link>` is provided in the Typography section.
106  Add it to `<head>` before any component renders.
107 
108### 3 · Component recipes
109 
110Use these recipes verbatim when building the corresponding component.
111 
112#### Buttons
113 
114Four variants are defined. Pick one — never blend variants or invent a fifth.
115 
116- **Primary** — sharp shape, bg `linear-gradient(180deg, #DDFF66 0%, #B8E600 100%)`, text `#000000`, border `1px solid #CCFF00`, padding `12px 22px`, weight `700`, uppercased, shadow `0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)`.
117- **Secondary** — sharp shape, bg `#0A0A12`, text `#FF2E97`, border `1px solid #FF2E97`, padding `12px 22px`, weight `700`, uppercased, shadow `0 0 16px -4px rgba(255, 46, 151, 0.50)`.
118- **Outline** — sharp shape, text `#EAF2FF`, border `1px solid rgba(234, 242, 255, 0.25)`, padding `12px 22px`, weight `600`, uppercased.
119- **Ghost** — sharp shape, text `#00E5FF`, padding `10px 4px`, weight `600`, uppercased.
120 
121Reach for **primary** as the single dominant CTA per screen.
122**Secondary** for the supporting action. **Outline** for tertiary
123actions in toolbars. **Ghost** for inline links and table actions.
124 
125#### Cards
126 
127- Background: `#0A0A12`
128- Border: `1px solid rgba(255, 46, 151, 0.20)`
129- Shadow: `0 0 0 1px rgba(255, 46, 151, 0.20), 0 12px 32px -12px rgba(255, 46, 151, 0.30)`
130- Radius: `radius.lg` (`4px`)
131- Internal padding: `20px` for compact cards, `24–28px` for content cards.
132 
133#### Tabs
134 
135Variant: `brutalist`. Hard rectangular tabs with thick borders. Active tab is fully filled in the primary color.
136Tabs are uppercased with `0.1em` tracking.
137 
138#### Charts
139 
140- Bar/line variant: `thin-bars`
141- Bar radius: `0`
142- No gridlines — let the bars/lines carry the data.
143- Highlight strategy: `all` — emphasize a single bar/point per chart.
144- Use the declared palette in order: `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97`.
145 
146#### Typography pairings
147 
148- **Display (`JetBrains Mono`)** — h1, h2, hero headlines, brand wordmarks.
149- **Body (`Space Grotesk`)** — paragraphs, labels, button text, form inputs.
150- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
151 
152### 4 · Hard constraints
153 
154Never do any of the following without explicit instruction from the user:
155 
156- Introduce a new color, font, radius, or shadow that isn't declared above.
157- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
158- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
159- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
160- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
161 
162### 5 · Before you finish — verify
163 
164Run through this checklist for every screen you produce:
165 
166- [ ] Every color used appears in the Colors table above.
167- [ ] Headlines use the display font; body copy uses the body font.
168- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
169- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
170- [ ] Cards and dividers use the declared border + shadow tokens.
171- [ ] No values were invented; if you needed something missing, you stopped and asked.
172 
173---
174 
175## Overview
176Neon Y2K is loud. It is loud on purpose. Three accents — **hot magenta #FF2E97**, **cyber lime #CCFF00**, **CRT cyan #00E5FF** — burn against absolute black, each with a defined role. The display font is oversized monospace at +10% tracking; the body is Space Grotesk for geometric edge. Corners are sharp. Glows are real.
177 
178This is a system for product launches, club nights, music landings, and brands who want to be seen from across the room.
179 
180## Color (the trinity)
181- **Magenta #FF2E97** — secondary buttons, card border halos, primary brand accent. The everyday energy.
182- **Lime #CCFF00** — the primary CTA gradient. Used once per screen, max. The weapon.
183- **Cyan #00E5FF** — ghost links, dividers, tertiary highlights. The cool counterweight.
184 
185Black is **pure #000000**. Surfaces sit at **#0A0A12** — a microscopic blue cast so cards lift without leaving the void.
186 
187## Typography
188- **Display: JetBrains Mono** at 5rem / 700, -2% tracking. Uppercase headlines run +4% to +10% depending on size.
189- **Body: Space Grotesk** at 1rem for paragraphs and UI labels.
190- **Mono is the lead.** Body is the supporting cast.
191 
192| Role | Font | Size | Weight | Tracking |
193|------|------|------|--------|----------|
194| Hero | Mono | 5rem | 700 | -0.02em |
195| H1 | Mono | 3rem | 700 | -0.015em |
196| H2 | Body | 1.25rem | 600 | +0.04em UPPER |
197| Body | Body | 1rem | 400 | 0 |
198| Label | Mono | 0.875rem | 700 | +0.10em UPPER |
199 
200## Buttons
201- **Primary** — chrome-lime gradient (180° lime to deep-lime), 1px lime border, **24px lime glow** + 1px ring. Sharp corners, mono uppercase, +10% tracking. The single loudest element on any screen.
202- **Secondary** — void fill with **magenta neon outline** + 16px magenta glow. Use for high-engagement secondary calls.
203- **Outline** — cool blue-white 25% hairline, no glow. Tertiary actions.
204- **Ghost** — cyan mono label, hover underline. For chrome and inline links.
205 
206All buttons are **sharp** (0–4px radius). Pills are forbidden — they don't belong in the Y2K language.
207 
208## Cards
209**Surface #0A0A12** with a **1px magenta-20% border** and a **12px magenta drop-shadow at 30% opacity**. The card looks lit from within. Radius is **4px maximum**.
210 
211## Charts & Data
212Bars rotate through the trinity — magenta, lime, cyan, repeat. No gridlines (the void is the grid). Bar gap 10px. Sharp 0px corners. Axis labels in cool blue-grey #7B86A8.
213 
214## Do's and Don'ts
215- ✅ Use the trinity: magenta + lime + cyan. Each has a defined role; don't substitute.
216- ✅ Glow your primary CTA. The 24px lime halo is the system's signature.
217- ✅ Keep monospace as the display family. It IS the Y2K voice.
218- ✅ Sharp corners. 0px on bars, 0–4px on everything else.
219- ❌ No pill buttons. No rounded cards above 4px.
220- ❌ No body text in any of the three accents — they're for action and signal only.
221- ❌ No more than one lime CTA per view. Lime earns its loudness by being rare.
222- ❌ No drop-shadow without a colored ring underneath. The combo is what makes it look lit.
223 
224---
225 
226## Tokens
227 
228> Generated from the same source the live preview renders from.
229> Treat the values below as the contract — never substitute approximations.
230 
231### Colors
232 
233| Role      | Value |
234|-----------|-------|
235| primary   | `#EAF2FF` |
236| secondary | `#7B86A8` |
237| tertiary  | `#FF2E97` |
238| neutral   | `#000000` |
239| surface   | `#0A0A12` |
240 
241### Typography
242 
243- **Display:** JetBrains Mono
244- **Body:** Space Grotesk
245- **Mono:** JetBrains Mono
246 
247| Role | size / leading / weight / tracking |
248|------|------------------------------------|
249| Hero | 5rem / 1 / 700 / -0.02em |
250| H1   | 3rem / 1.05 / 700 / -0.015em |
251| H2   | 1.25rem / 1.2 / 600 / 0.04em |
252| Body | 1rem / 1.55 / 400 / 0 |
253 
254### Radius
255 
256- sm: `0`
257- md: `2px`
258- lg: `4px`
259 
260### Shadows
261 
262- **card:** `0 0 0 1px rgba(255, 46, 151, 0.20), 0 12px 32px -12px rgba(255, 46, 151, 0.30)`
263- **button:** `0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)`
264 
265### Borders
266 
267- **card:** `1px solid rgba(255, 46, 151, 0.20)`
268- **divider:** `rgba(0, 229, 255, 0.20)`
269 
270### Buttons
271 
272Four variants, each fully tokenized. The preview renders from these exact values.
273 
274#### Primary
275 
276| Property | Value |
277|----------|-------|
278| shape | `sharp` |
279| background | `linear-gradient(180deg, #DDFF66 0%, #B8E600 100%)` |
280| color | `#000000` |
281| border | `1px solid #CCFF00` |
282| padding | `12px 22px` |
283| fontFamily | `mono` |
284| fontWeight | `700` |
285| fontSize | `0.875rem` |
286| tracking | `0.10em` |
287| uppercase | `true` |
288| shadow | `0 0 24px -4px rgba(204, 255, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.40)` |
289| hoverHint | `glow` |
290 
291#### Secondary
292 
293| Property | Value |
294|----------|-------|
295| shape | `sharp` |
296| background | `#0A0A12` |
297| color | `#FF2E97` |
298| border | `1px solid #FF2E97` |
299| padding | `12px 22px` |
300| fontFamily | `mono` |
301| fontWeight | `700` |
302| fontSize | `0.875rem` |
303| tracking | `0.10em` |
304| uppercase | `true` |
305| shadow | `0 0 16px -4px rgba(255, 46, 151, 0.50)` |
306 
307#### Outline
308 
309| Property | Value |
310|----------|-------|
311| shape | `sharp` |
312| background | `transparent` |
313| color | `#EAF2FF` |
314| border | `1px solid rgba(234, 242, 255, 0.25)` |
315| padding | `12px 22px` |
316| fontFamily | `mono` |
317| fontWeight | `600` |
318| fontSize | `0.875rem` |
319| tracking | `0.10em` |
320| uppercase | `true` |
321 
322#### Ghost
323 
324| Property | Value |
325|----------|-------|
326| shape | `sharp` |
327| background | `transparent` |
328| color | `#00E5FF` |
329| border | `none` |
330| padding | `10px 4px` |
331| fontFamily | `mono` |
332| fontWeight | `600` |
333| fontSize | `0.8125rem` |
334| tracking | `0.12em` |
335| uppercase | `true` |
336| hoverHint | `underline` |
337 
338### Charts
339 
340| Property | Value |
341|----------|-------|
342| variant | `thin-bars` |
343| gridlines | `false` |
344| barRadius | `0` |
345| barGap | `10px` |
346| highlight | `all` |
347| axisColor | `#7B86A8` |
348| palette | `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97`, `#CCFF00`, `#00E5FF`, `#FF2E97` |
349
03 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
04 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"JetBrains Mono"', 'serif'],
        sans:    ['"Space Grotesk"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#EAF2FF',
        secondary: '#7B86A8',
        accent:    '#FF2E97',
        neutral:   '#000000',
        surface:   '#0A0A12',
      },
      borderRadius: {
        sm: '0',
        md: '2px',
        lg: '4px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Risograph Press

Two-color spot print, halftone vibes. Fluorescent pink + ink-black on cream paper, 3px misregistration outlines, hand-cut chunky type.

printplayfuleditorialmaximalist
Risograph.app
ProductPricingDocsAbout
Sign inGet started
print · playful · editorial

Build with Risograph Press.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Dawn Gradient

Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type.

minimallightpremiumsaasmodern
Dawn.app
ProductPricingDocsAbout
Sign inGet started
minimal · light · premium

Build with Dawn Gradient.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational