Night Grid cyberpunk style guide

Spec, stylesheet, glitch script, Claude Code skill and the design
canvas source.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bgrollemanandClaude Opus 5.5 committed 2026-11-01 09:21:37 +01:00
commit 94832d861b
8 files changed
+845

No files matched your search

+13
View File
@@ -0,0 +1,13 @@
---
name: night-grid
description: Night Grid, Bas's cyberpunk / dark neon HUD style for dashboards, tools and pages (yellow, cyan and red neon on near-black, clipped corners, mono labels). Use when asked for a cyberpunk, neon, HUD or "Night Grid" look, or when building a dashboard or UI with no other style given.
---
# Night Grid
1. Read `NIGHT-GRID.md` in this folder: the full spec (principles, colors, type, shapes, components, charts, motion, do/don't). Follow it.
2. Use `night-grid.css` from this folder: copy it into the project (or inline it in a single-file page) and build with its `ng-*` classes and `--ng-*` variables. Don't redefine the tokens.
3. Load the two Google Fonts listed at the top of the CSS.
4. For the ambient glitch, include `night-grid.js` (copy or inline it, `defer`) and mark a few headings or values `.ng-glitch`.
Dark theme only: this style has no light mode.