design.md
Back to directory
dark · gaming · event · bold · premium

Arcade Night.

Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events.

01 · Preview

The kitchen sink.

Arcade.app
ProductPricingDocsAbout
Sign inGet started
dark · gaming · event

Build with Arcade Night.

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
#EEF0E6
secondary
#8A8F80
tertiary
#EEF0E6
neutral
#11120F
surface
#0A0B08
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
0px
md
0px
lg
2px
pill
9999px
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 · Pro tokens

The states behind the resting style.

ArchetypePlayful

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Arcade Night"
3description: "Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events."
4tags: [dark, gaming, event, bold, premium]
5colors:
6  primary:   "#eef0e6"
7  secondary: "#8a8f80"
8  tertiary:  "#eef0e6"
9  neutral:   "#11120f"
10  surface:   "#0a0b08"
11typography:
12  display: "Big Shoulders Display"
13  body:    "JetBrains Mono"
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 0.92 / 800 / -0.02em"
17    h1:   "3rem / 1 / 800 / -0.015em"
18    h2:   "1.875rem / 1.15 / 700 / -0.01em"
19    body: "0.9375rem / 1.55 / 400 / 0"
20radius:
21  sm: 0px
22  md: 0px
23  lg: 2px
24  pill: 9999px
25shadows:
26  card:   "rgba(238,240,230,0.06) 0 0 0 1px"
27  button: none
28borders:
29  card:    "1px solid rgba(238,240,230,0.06)"
30  divider: rgba(238,240,230,0.06)
31buttons:
32  primary:
33    background: #c8ff3a
34    color: #0a0b08
35    border: none
36    shape: sharp
37    padding: 12px 22px
38    font: 700 / 0.8125rem
39  secondary:
40    background: transparent
41    color: #eef0e6
42    border: 1px solid rgba(238,240,230,0.18)
43    shape: sharp
44    padding: 12px 22px
45    font: 600 / 0.8125rem
46  outline:
47    background: transparent
48    color: #c8ff3a
49    border: 1px solid #c8ff3a
50    shape: sharp
51    padding: 12px 22px
52    font: 600 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #8a8f80
56    border: none
57    shape: sharp
58    padding: 12px 18px
59    font: 600 / 0.75rem
60charts:
61  variant: flat
62  stroke_width: 2
63  fill_opacity: 0.18
64  gridlines: false
65  bar_gap: 4px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Arcade Night
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Arcade Night** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — sharp shape, bg `#c8ff3a`, text `#0a0b08`, padding `12px 22px`, weight `700`.
110- **Secondary** — sharp shape, text `#eef0e6`, border `1px solid rgba(238,240,230,0.18)`, padding `12px 22px`, weight `600`.
111- **Outline** — sharp shape, text `#c8ff3a`, border `1px solid #c8ff3a`, padding `12px 22px`, weight `600`.
112- **Ghost** — sharp shape, text `#8a8f80`, padding `12px 18px`, weight `600`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#0a0b08`
121- Border: `1px solid rgba(238,240,230,0.06)`
122- Shadow: `rgba(238,240,230,0.06) 0 0 0 1px`
123- Radius: `radius.lg` (`2px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `flat`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`Big Shoulders Display`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`JetBrains Mono`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## 1. Atmosphere
166 
167Arcade Night is the broadcast aesthetic of a competitive event — late-night arenas, scoreboard overlays, the moment before a tournament starts. The page is near-black `#0a0b08` (a hair warmer than pure to feel cinematic), text is bone-white, and one electric lime `#c8ff3a` carries every primary action. There are no gradients, no glows, no rounded corners. The system is sharp by design.
168 
169The display face is a condensed industrial sans (Big Shoulders Display) at heavy weights — built for scorecards and arena banners. Body and labels run in JetBrains Mono with uppercase tracking, reinforcing the broadcast-overlay feel. Cards have no shadow; they sit on hairlines at 6% bone, and the only depth comes from the lime accent.
170 
171**Signature moves**
172- Big Shoulders Display 800 at 88px hero — condensed, athletic, uncompromising
173- One lime accent (`#c8ff3a`), used for primary CTA and active state — never decorated, never tinted
174- Knife-edge corners (0px radius) on every surface except the small 2px lift on featured cards
175- Mono body with uppercase 0.10em tracking — every label reads like a broadcast lower-third
176- Cards as 1px bone-on-black hairlines, no fill, no shadow
177 
178## 2. Palette
179 
180### Core
181- **Surface** `#0a0b08` — page background, near-black with a warm cast
182- **Surface Lift** `#11120f` — modals, elevated cards
183- **Bone** `#eef0e6` — text, headings (never pure white)
184- **Bone 60** `rgba(238,240,230,0.6)` — secondary text
185- **Hairline** `rgba(238,240,230,0.06)` — every divider, every card edge
186 
187### Accent
188- **Volt Lime** `#c8ff3a` — primary CTA, active tab, score highlight
189- **Volt Lime 12** `rgba(200,255,58,0.12)` — focus ring, hovered tab fill
190 
191### Status
192- **Live Red** `#ff3b3b` — live indicator only, never as decoration
193 
194## 3. Typography
195 
196| Role | Font | Size | Weight | Leading | Tracking |
197|------|------|------|--------|---------|----------|
198| Hero | Big Shoulders Display | 88px | 800 | 0.92 | -0.02em |
199| H1 | Big Shoulders Display | 48px | 800 | 1.0 | -0.015em |
200| H2 | Big Shoulders Display | 30px | 700 | 1.15 | -0.01em |
201| Body | JetBrains Mono | 15px | 400 | 1.55 | 0 |
202| Label / UI | JetBrains Mono | 12px | 500 | 1.0 | 0.10em uppercase |
203| Score | Big Shoulders Display | 64px | 800 | 1.0 | -0.02em tabular |
204 
205Two weights for display: 700 / 800. One weight for body: 400. Labels are always uppercase, always tracked, always mono.
206 
207## 4. Buttons
208 
209### Primary (Volt)
210```css
211background: #c8ff3a;
212color: #0a0b08;
213padding: 12px 22px;
214border-radius: 0;
215font-family: "JetBrains Mono";
216font-weight: 700;
217text-transform: uppercase;
218letter-spacing: 0.10em;
219```
220 
221### Secondary (Bone Outline)
222- Transparent, 1px bone hairline at 18%, bone text
223- Same padding, same uppercase mono treatment
224 
225### Outline (Volt)
226- Transparent, 1px lime border, lime text — used only for "Watch live" / "Join queue"
227 
228## 5. Cards
229 
230- Background `#0a0b08` (or `#11120f` for elevated)
231- 1px hairline at 6% bone
232- NO radius (or 2px on featured)
233- NO shadow, ever — the lime accent is the only emphasis allowed
234 
235## 6. Charts
236 
237Flat solid bars with a 4px gap (broadcast scoreboard rhythm). One bar in volt lime, the rest in 18% bone. No gridlines, no dots — labels are mono uppercase along the baseline. Line charts run at 2px in volt lime with an 18% fill underneath. The chart is a scorecard, not a graph.
238 
239## 7. Tabs
240 
241Underline at 2px in volt lime for the active state. Inactive tabs are mono uppercase at 60% bone. No pill tabs.
242 
243## 8. Spacing
244 
245- Base 4px
246- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96`
247- Section padding: 96px desktop, 48px mobile — the dark surface needs air
248 
249## 9. Do's & don'ts
250 
251✅ **Do**
252- Use Big Shoulders Display only at 700/800 — anything lighter loses the broadcast weight
253- Keep every label uppercase mono with 0.10em tracking
254- Reserve the volt lime for one element per screen
255- Use sharp 0px radius everywhere except featured cards (2px)
256 
257❌ **Don't**
258- Use any radius above 2px — the system is sharp by design
259- Use a second accent color — Live Red exists ONLY for live indicators
260- Use shadows or glows on the lime — flat fill, always
261- Use a proportional sans for body — mono carries the broadcast feel
262 
263---
264 
265## Tokens
266 
267> Generated from the same source the live preview renders from.
268> Treat the values below as the contract — never substitute approximations.
269 
270### Colors
271 
272| Role      | Value |
273|-----------|-------|
274| primary   | `#eef0e6` |
275| secondary | `#8a8f80` |
276| tertiary  | `#eef0e6` |
277| neutral   | `#11120f` |
278| surface   | `#0a0b08` |
279 
280### Typography
281 
282- **Display:** Big Shoulders Display
283- **Body:** JetBrains Mono
284- **Mono:** JetBrains Mono
285 
286| Role | size / leading / weight / tracking |
287|------|------------------------------------|
288| Hero | 5.5rem / 0.92 / 800 / -0.02em |
289| H1   | 3rem / 1 / 800 / -0.015em |
290| H2   | 1.875rem / 1.15 / 700 / -0.01em |
291| Body | 0.9375rem / 1.55 / 400 / 0 |
292 
293### Radius
294 
295- sm: `0px`
296- md: `0px`
297- lg: `2px`
298- pill: `9999px`
299 
300### Shadows
301 
302- **card:** `rgba(238,240,230,0.06) 0 0 0 1px`
303- **button:** `none`
304 
305### Borders
306 
307- **card:** `1px solid rgba(238,240,230,0.06)`
308- **divider:** `rgba(238,240,230,0.06)`
309 
310### Buttons
311 
312Four variants, each fully tokenized. The preview renders from these exact values.
313 
314#### Primary
315 
316| Property | Value |
317|----------|-------|
318| shape | `sharp` |
319| background | `#c8ff3a` |
320| color | `#0a0b08` |
321| border | `none` |
322| padding | `12px 22px` |
323| fontWeight | `700` |
324| fontSize | `0.8125rem` |
325 
326#### Secondary
327 
328| Property | Value |
329|----------|-------|
330| shape | `sharp` |
331| background | `transparent` |
332| color | `#eef0e6` |
333| border | `1px solid rgba(238,240,230,0.18)` |
334| padding | `12px 22px` |
335| fontWeight | `600` |
336| fontSize | `0.8125rem` |
337 
338#### Outline
339 
340| Property | Value |
341|----------|-------|
342| shape | `sharp` |
343| background | `transparent` |
344| color | `#c8ff3a` |
345| border | `1px solid #c8ff3a` |
346| padding | `12px 22px` |
347| fontWeight | `600` |
348| fontSize | `0.8125rem` |
349 
350#### Ghost
351 
352| Property | Value |
353|----------|-------|
354| shape | `sharp` |
355| background | `transparent` |
356| color | `#8a8f80` |
357| border | `none` |
358| padding | `12px 18px` |
359| fontWeight | `600` |
360| fontSize | `0.75rem` |
361 
362### Charts
363 
364| Property | Value |
365|----------|-------|
366| variant | `flat` |
367| strokeWidth | `2` |
368| fillOpacity | `0.18` |
369| gridlines | `false` |
370| barGap | `4px` |
371| highlight | `single` |
372| dotMarker | `false` |
373 
374---
375 
376## Pro tokens
377 
378> Production-fidelity tokens. States, density, motion, elevation,
379> content rules and a measured WCAG contract — derived from the
380> resting tokens unless explicitly authored.
381 
382### States
383 
384#### Button
385 
386- **hover** — shadow: `4px 6px 0 0 #eef0e6`, transform: `translateY(-2px) rotate(-1deg)`
387- **focus** — outline: `3px solid #eef0e6`, outline-offset: `3px`
388- **active** — shadow: `1px 2px 0 0 #eef0e6`, transform: `translateY(1px) scale(0.96)`
389- **disabled** — opacity: `0.4`
390- **loading** — opacity: `0.7`
391- **selected** — bg: `#eef0e6`, color: `#eef0e6`, transform: `rotate(-2deg)`
392 
393#### Input
394 
395- **hover** — border: `2px solid #eef0e6`
396- **focus** — border: `2px solid #eef0e6`, shadow: `3px 3px 0 0 #eef0e6`
397- **disabled** — opacity: `0.4`
398- **error** — border: `2px solid #EF4444`, shadow: `3px 3px 0 0 #EF4444`
399 
400#### Card
401 
402- **hover** — shadow: `6px 8px 0 0 #eef0e6`, transform: `translateY(-4px) rotate(-1deg)`
403- **selected** — border: `2px solid #eef0e6`, transform: `rotate(-1deg)`
404- **dragging** — transform: `rotate(-3deg) scale(1.05)`, opacity: `0.85`
405 
406#### Tab
407 
408- **hover** — color: `#eef0e6`, transform: `translateY(-1px)`
409- **focus** — outline: `3px solid #eef0e6`, outline-offset: `2px`
410- **selected** — bg: `#eef0e6`, color: `#eef0e6`, transform: `rotate(-1deg)`
411 
412### Density
413 
414| Mode | padding × | row × | body | radius × | Use for |
415|------|-----------|-------|------|----------|---------|
416| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
417| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
418| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
419 
420### Motion
421 
422**Signature — Bounce.** Exaggerated spring easing with a slight rotational tilt. Every interaction feels physical and playful.
423 
424```css
425transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
426```
427 
428| Token | Value |
429|-------|-------|
430| duration.instant | `100ms` |
431| duration.fast | `200ms` |
432| duration.base | `320ms` |
433| duration.slow | `500ms` |
434| easing.standard | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
435| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
436| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
437| easing.spring | `cubic-bezier(0.5, 2, 0.4, 1)` |
438 
439### Elevation
440 
441Five-level scale, system-specific recipe.
442 
443| Level | Shadow | Recipe |
444|-------|--------|--------|
445| level0 | `none` | Flat — the tone separates. |
446| level1 | `2px 3px 0 0 #eef0e6` | Hard offset, slight shift. |
447| level2 | `4px 6px 0 0 #eef0e6` | Cards — visible offset. |
448| level3 | `6px 8px 0 0 #eef0e6` | Dialog — strong offset. |
449| level4 | `8px 12px 0 0 #eef0e6` | Modal — maximum offset, scrim required. |
450 
451### Content
452 
453- **measure:** `62ch` (max line length for body prose)
454- **paragraph spacing:** `1.25em`
455- **list indent:** `1.5em`
456- **list gap:** `0.55em`
457- **link:** color `#eef0e6`, underline `always`
458- **blockquote:** border `3px solid #eef0e6`, padding `0.8em 1.2em`
459- **code:** background `#eef0e6`, color `#eef0e6`
460 
461### Accessibility (WCAG 2.1)
462 
463**Overall:** AA
464 
465| Pair | Ratio | Required | Grade | Suggested fix |
466|------|-------|----------|-------|---------------|
467| Body text on surface | 17.14:1 | AA | AAA | — |
468| Body text on canvas | 16.33:1 | AA | AAA | — |
469| Muted text on surface | 5.94:1 | AA | AA | — |
470| Accent on surface | 17.14:1 | AA-Large | AAA | — |
471| Accent on canvas | 16.33:1 | AA-Large | AAA | — |
472
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

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

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Big Shoulders Display"', 'serif'],
        sans:    ['"JetBrains Mono"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#eef0e6',
        secondary: '#8a8f80',
        accent:    '#eef0e6',
        neutral:   '#11120f',
        surface:   '#0a0b08',
      },
      borderRadius: {
        sm: '0px',
        md: '0px',
        lg: '2px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Citrine IDE

Premium IDE light theme. Warm paper canvas, three syntax-color tokens (amber, teal, plum) used semantically, JetBrains Mono for structure, IBM Plex Sans for body, refined 4-6px corners. Editor-aesthetic with warmth.

codinglightdeveloperpremiumwarm
Citrine.app
ProductPricingDocsAbout
Sign inGet started
coding · light · developer

Build with Citrine IDE.

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

Acid Chrome

Liquid chrome and oil-slick iridescence on onyx — holographic gradients, polished metal CTAs, and prismatic accents. Y2K reborn as molten metal, not neon. Chrome is the color.

darkfuturisticpremiumy2kmodern
Acid.app
ProductPricingDocsAbout
Sign inGet started
dark · futuristic · premium

Build with Acid Chrome.

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