nightwire

A dark-mode-only, AI-first cyberpunk UI design system

Nightwire is a framework-agnostic CSS design system built around one rule: the background is always pure #000000. Every color carries a semantic role, every component ships as plain CSS, and the whole thing is documented in a way LLMs can read.

Why I built it

Most "dark mode" CSS frameworks are actually navy or charcoal. I wanted a true void aesthetic — the kind of look you see in cyberpunk dashboards and terminal UIs — without the eye-burning neon or CRT gimmicks. I also wanted to ship a design system that AI agents like Claude, Cursor, Copilot, and v0 could consume directly: drop a SKILL.md into a project and the agent generates Nightwire-compliant UIs from natural-language prompts.

What it does

• Pure black void — #000000 everywhere, no gray, no navy, no compromises.
• Semantic palette — primary, success, info, danger, warning, accent. All colors pass WCAG AA on black (most exceed 7:1).
• 24+ pure CSS components — buttons, cards, panels, modals, tabs, sidebar nav, dropdowns, breadcrumbs, tooltips, data tables, metrics grids, badges, status LEDs, avatars, key-value rows, progress bars, skeletons, toasts.
• 42 design tokens mapped to a Tailwind preset (colors, fonts, spacing, radius, shadows).
• AI-readable spec — DESIGN.md follows Google's design.md standard; SKILL.md works as a Claude Code skill.
• Interactive installer — npx @cativo23/nightwire install detects Next.js, Vite, Astro, or plain HTML and copies the right files.
• Accessibility built-in — focus-visible outlines, reduced-motion support, semantic HTML examples for every component.

Stack

Pure CSS (no runtime), Tailwind preset, JetBrains Mono + Noto Serif Display + Saira Extra Condensed + Shippori Mincho B1.

Status

Published as @cativo23/nightwire on npm. Built on top of nerv-ui (MIT).