SYS.STYLE REV 1.0 // 2026-10-31 STATUS: ONLINE

Night Grid

A visual language for dashboards and tools: dark streets, neon signal, hard edges. Inspired by the HUD look of near-future noir games, built to stay readable at 3 a.m.

01 // PRINCIPLES

Signal over noise

The city is dark so the data can glow. 70% of any screen is near-black void.

Hard edges

No rounded corners. Panels get one 45° clipped corner and 1px hairlines.

Color is meaning

Yellow = act or focus. Cyan = info and live data. Red = danger. Never decorative.

Diegetic data

Labels read like machine output: uppercase mono, IDs, timestamps, // separators.

02 // COLOR

{{c.name}}
{{c.hex}} · {{c.token}}
{{c.role}}
SCREEN BUDGET
VOID 70%PANEL 15%YELLOW 8%CYAN 4%RED 3%

03 // TYPE

DISPLAY + UI — RAJDHANI 500/600/700
Wake up
Section heading 32
Body 18/1.5. Condensed, squared shapes; uppercase for headings and buttons, sentence case for anything longer than a line.
DATA + LABELS — JETBRAINS MONO 400/600
98.6%
LABEL 13 · +0.15EM · UPPERCASE
[22:41:07] node-03 > sync complete
SCALE 13 · 15 · 18 · 24 · 32 · 48 · 72 · 120TABULAR NUMBERS FOR ALL METRICS

04 // SHAPE + LINE

Clipped panel
Top-right cut, 16px (cards) or 24px (sections). One cut per shape.
Target brackets
Marks focus or selection. Yellow only, 2px.
Hairlines
1px #2A2F3A dividers; cyan for live; broken yellow dash as a header tail.
Network
Stepped rule .ng-rule
Under headings: a thick bar that steps down at 45° into a hairline.
Edge band .ng-edge
Stepped band along a section's bottom. Line grey by default, yellow with --hot.
Notched panel .ng-panel--notched
Several cuts for a hero panel. One or two diagonal pieces per screen.

05 // COMPONENTS

PRIORITY LIVE NOMINAL BREACH IDLE
STAT TILE // CPU LOAD
42%
▲ SEGMENTED METER · 10 STEPS
ALERT // ICE BREACH
Disk /dev/nvme0 at 94%
Alerts state the thing, the number and the time. Red border, 8% red fill.
Focus = yellow underline. Errors swap it to red with a mono message.
Fold panel · open

Corner chip » points up: click to fold. Native <details>, works with the keyboard, no script.

Fold panel · folded

Folded, the chip points down: click to unfold.

06 // CHARTS + MOTION

  • Series 1 cyan, series 2 yellow, threshold/alert red. Max three series per chart.
  • Gridlines #1C2029, axis labels mono 12px #8A93A3. No chart backgrounds.
  • Bars squared, 2px gaps. Lines 2px, no smoothing: the data is jagged, show it.
  • Glow only on the single most important value: text-shadow 0 0 12px at 60%.
  • Motion is fast and stepped: 120ms, steps(4) or linear. No bounces.
  • Glitch (skew, RGB split, slices, 360ms) on state change, plus one random marked heading every 6–14s. Watch this page's title and principles.
  • Numbers tick up when they change; panels wipe in left to right.
  • Scanlines at 2.5% white, toggleable, off under prefers-reduced-motion.

07 // TOKENS

:root {
  --ng-void:    #050508;  /* page ground */
  --ng-panel:   #0E1016;  /* cards, panels */
  --ng-raise:   #1C2029;  /* tracks, grid, hover */
  --ng-line:    #2A2F3A;  /* 1px borders */
  --ng-text:    #E6E8EC;
  --ng-dim:     #8A93A3;  /* labels, 6.5:1 on void */
  --ng-yellow:  #FCEE0A;  /* action, focus */
  --ng-cyan:    #02D7F2;  /* info, live data */
  --ng-red:     #FF003C;  /* danger fill/border */
  --ng-red-txt: #FF3B5C;  /* danger text */
  --ng-green:   #00FF9F;  /* ok */
  --ng-font-ui:   'Rajdhani', sans-serif;
  --ng-font-data: 'JetBrains Mono', monospace;
  --ng-cut: 16px;         /* clip-path corner */
}

08 // DO + DON'T

DO
One yellow call to action per view.
Pair every color state with a label or icon.
Keep body text sentence case and ≥16px.
Let empty void separate groups before adding lines.
DON'T
Use rounded corners, soft shadows or gradients.
Put yellow text on cyan or red (it vibrates).
Glow everything: if all of it shines, nothing does.
Copy game logos, fonts or UI assets: inspired by, never lifted.