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,27 @@
|
||||
# Night Grid — Cyberpunk style guide
|
||||
|
||||
A dark neon HUD style for dashboards and tools: yellow, cyan and red neon on near-black, clipped corners, 45° stepped edges, mono machine labels and a rare random glitch.
|
||||
|
||||
| File | What |
|
||||
|---|---|
|
||||
| [`NIGHT-GRID.md`](NIGHT-GRID.md) | The full spec. Hand this to any agent or designer. |
|
||||
| [`night-grid.css`](night-grid.css) | Tokens (`--ng-*`) and components (`.ng-*`). |
|
||||
| [`night-grid.js`](night-grid.js) | Optional: glitches one random `.ng-glitch` element every 6–14s. |
|
||||
| [`SKILL.md`](SKILL.md) | Claude Code skill wrapper. |
|
||||
| [`canvas/`](canvas) | Source of the visual style guide and sample dashboard (Claude Design canvas). |
|
||||
|
||||
## Use it
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="night-grid.css">
|
||||
<script src="night-grid.js" defer></script>
|
||||
```
|
||||
|
||||
As a Claude Code skill:
|
||||
|
||||
```bash
|
||||
ln -s "$PWD" ~/.claude/skills/night-grid
|
||||
```
|
||||
|
||||
Inspired by the look of near-future noir games; no game logos, fonts or assets are used.
|
||||
Reference in new issue
Block a user