CyberpunkStyleGuide/NIGHT-GRID.md

# Night Grid style guide

Instructions for building UIs (dashboards, tools, pages) in the Night Grid style: a dark neon HUD look in the spirit of near-future noir games. Dark ground, neon signal, hard edges.

- Stylesheet: `night-grid.css` (same folder). Use its classes and `--ng-*` variables; don't redefine them.
- Script: `night-grid.js` (same folder, optional, `defer`). Drives the random glitch; nothing else needs JS.
- Visual reference: https://claude.ai/artifact/AT2mCxMkeLFzkife1rAuLk (private; the spec below is complete without it).

## Principles

1. **Signal over noise.** About 70% of the screen is near-black void. Data glows; the background doesn't.
2. **Hard edges.** No rounded corners, soft shadows or gradients. Panels get one 45° clipped corner (top-right) and 1px hairline borders.
3. **Color is meaning, never decoration.** Yellow = act/focus. Cyan = info and live data. Red = danger. Green = OK.
4. **Diegetic data.** Labels read like machine output: uppercase mono, IDs, timestamps, `//` separators (`01 // NETWORK`, `ALERT // DISK FULL`).

## Colors

| Token | Hex | Use |
|---|---|---|
| `--ng-void` | `#050508` | Page background |
| `--ng-panel` | `#0E1016` | Cards, panels |
| `--ng-raise` | `#1C2029` | Meter tracks, gridlines, hover |
| `--ng-line` | `#2A2F3A` | 1px borders, dividers |
| `--ng-text` | `#E6E8EC` | Primary text (never pure white) |
| `--ng-soft` | `#C3C8D1` | Secondary body text |
| `--ng-dim` | `#8A93A3` | Labels, axis text |
| `--ng-yellow` | `#FCEE0A` | Primary action, focus, page title |
| `--ng-cyan` | `#02D7F2` | Info, links, live data, chart series 1 |
| `--ng-red` | `#FF003C` | Danger fills/borders, thresholds |
| `--ng-red-txt` | `#FF3B5C` | Danger text (better contrast than `--ng-red`) |
| `--ng-green` | `#00FF9F` | Nominal/success, sparingly |

Screen budget, roughly: void 70%, panel 15%, yellow 8%, cyan 4%, red 3%.

## Typography

- **UI and display:** Rajdhani 500/600/700. Headings and buttons uppercase; anything longer than one line in sentence case.
- **Data and labels:** JetBrains Mono 400/600, `font-variant-numeric: tabular-nums` for every metric.
- **Labels:** mono 12–13px, uppercase, `letter-spacing: 0.15em`, `--ng-dim`.
- **Scale (px):** 13, 15, 18 (body), 24, 32, 48, 72, 120. Body text at least 16px.
- Fonts: `https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap`

## Shape and line

- Clipped corner: `clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%)`. 16px for cards, 24px for big sections, 12px for buttons. One cut per shape.
- Borders 1px `--ng-line`. Live/active dividers can be cyan.
- Selection or focus: yellow 2px corner brackets or a 2px yellow outline.
- Section headings can end in a broken yellow dash: a long line, then 8px, then 4px segments.
- **Diagonal structure:** edges step at 45°. Use `.ng-rule` under headings (thick bar stepping down into a hairline), `.ng-edge` for a stepped band along a section's bottom (`.ng-edge--hot` makes it yellow), and `.ng-panel--notched` for a panel with several cuts. One or two of these per screen; they frame, they don't fill.

## Components (classes in `night-grid.css`)

| Component | Class | Notes |
|---|---|---|
| Panel | `.ng-panel` | Clipped card |
| Button | `.ng-btn` + `--primary` / `--info` / `--danger` | Min height 48px. One `--primary` per view |
| Tag | `.ng-tag` + `--priority` / `--live` / `--ok` / `--breach` | Status chips |
| Meter | `.ng-meter` with 10 `<i>`, lit ones get `.on` | Add `.ng-meter--danger` past a threshold |
| Alert | `.ng-alert` | Red border, 8% red fill. Say the thing, the number and the time |
| Input | `.ng-input` | Yellow underline on focus, red when `aria-invalid="true"` |
| Label | `.ng-label` | Mono machine label |
| Data | `.ng-data` | Mono, tabular numbers |
| Glow | `.ng-glow` | Only on the single most important value per screen |
| Fold panel | `<details class="ng-fold"><summary>Title</summary>…</details>` | Yellow corner chip with `»`: points down when folded, up when open. Native, keyboard-accessible, no JS |
| Glitch | `.ng-glitch` | Marks a heading or value as a glitch candidate; `night-grid.js` glitches one at random every 6–14s |
| Scanlines | `.ng-scanlines` on `<body>` | Optional; disabled with reduced motion |

A stat tile is a `.ng-panel` holding a `.ng-label`, a big `.ng-data` value (about 40px, unit at 18px in `--ng-dim`), a `.ng-meter`, and a short status line.

## Charts

- Series 1 cyan, series 2 yellow, threshold/alert red. At most three series.
- Gridlines `--ng-raise`, axis labels mono 12px `--ng-dim`. No chart background.
- Square bars with 2px gaps. Lines 2px, no smoothing.

## Motion

- Fast and stepped: 120ms, `linear` or `steps(4)`. No easing bounces.
- Glitch (skew, RGB split, sliced, 360ms) on a state change, plus an ambient glitch: one random `.ng-glitch` element every ~10s. Put `.ng-glitch` on 3–6 headings or key values, never on body text or controls.
- Numbers tick up when they change; panels wipe in left to right.
- Respect `prefers-reduced-motion`: no animation, no scanlines.

## Accessibility

- Text contrast at least 4.5:1 (all text tokens above pass on `--ng-void` and `--ng-panel`).
- Never use color alone: every state also has a label or icon.
- Real `<button>`, `<a>`, `<label>` elements; touch targets at least 44px.

## Do / Don't

**Do**
- One yellow call to action per view.
- Separate groups with empty space before adding lines.
- Keep everything dark: this style has no light theme.

**Don't**
- Rounded corners, soft shadows, gradients, emoji.
- Yellow text on cyan or red.
- Glow everything.
- Use any game's logos, fonts or UI assets. Inspired by, never copied.