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:
commit
94832d861b
8 files changed
+845
No files matched your search
@@ -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.
|
||||
Reference in new issue
Block a user