bgrollemanandClaude Opus 5.5
94832d861b
Spec, stylesheet, glitch script, Claude Code skill and the design canvas source. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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 |
The full spec. Hand this to any agent or designer. |
night-grid.css |
Tokens (--ng-*) and components (.ng-*). |
night-grid.js |
Optional: glitches one random .ng-glitch element every 6–14s. |
SKILL.md |
Claude Code skill wrapper. |
canvas/ |
Source of the visual style guide and sample dashboard (Claude Design canvas). |
Use it
<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:
ln -s "$PWD" ~/.claude/skills/night-grid
Inspired by the look of near-future noir games; no game logos, fonts or assets are used.