@cativo23/nightwire

v2.0.1

Published

2 months ago

CLI installer for the Nightwire cyberpunk UI design system

0High
0Medium
0Low

cativo23

nightwire design-system cyberpunk cli dark-mode

Nightwire

A dark-mode-only cyberpunk UI design system. Framework-agnostic. Pure #000000 void. Semantic neon palette. AI-first.

Built on top of nerv-ui by TheGreatGildo.

Design Principles

Pure black void — Background is always #000000. No gray, no navy.
Color = function — Every color has a semantic role. Don't use color decoratively.
Readable first — 14px base font, 1.5 line-height. Legibility over density.
No CRT effects — No scanlines, no flicker, no vignette. Clean modern look.
Soft neon — Cyberpunk-inspired but not eye-burning. Vibrant, not harsh.

Installation

CLI Installer (Recommended)

npx @cativo23/nightwire install

Interactive prompts detect your project type (Next.js, Vite, Astro, plain HTML) and copy the right files:

nightwire.css — 50+ pure CSS components, 60+ design tokens (v1 + v2 Layer 2)
DESIGN.md — AI-readable design spec (Google design.md standard)
skill/nightwire/SKILL.md — AI skill for Claude, Cursor, Copilot, v0

Manual Installation

Quick Start

Vanilla CSS

<link rel="stylesheet" href="nightwire.css">

Tailwind CSS

// tailwind.config.js
import nightwirePreset from './tailwind.preset.js';
export default { presets: [nightwirePreset] };

Fonts

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Saira+Extra+Condensed:wght@400;600;700;800&family=Shippori+Mincho+B1:wght@500;700;800&display=swap" rel="stylesheet">

AI Agents (Claude Code, etc.)

Drop SKILL.md into your project as a skill. The agent can then generate Nightwire-compliant UIs from natural language prompts.

What's Included

Design tokens — Colors, semantic roles, surfaces, type scale, spacing, border radius.

Utility classes — Text color, glow effects, surface levels, borders, grid layouts.

Component styles — Buttons, cards, panels, modals, tabs, sidebar nav, dropdowns, breadcrumbs, tooltips, data tables, metrics grids, badges, tags, status LEDs, avatars, key-value rows, progress bars, skeleton loaders, toasts, dividers.

Tailwind preset — All tokens mapped to Tailwind's config (colors, fonts, spacing, radius, shadows).

Accessibility — All colors pass WCAG AA on black. Focus-visible outlines. Reduced-motion support.

Color Palette

| Role | Color | Hex | Contrast on Black | |---|---|---|---| | Primary | Blue | #6699ff | 7.5:1 | | Success | Green | #7aed7a | 11.2:1 | | Info | Cyan | #66ddff | 10.8:1 | | Danger | Red/Pink | #ff6688 | 6.4:1 | | Warning | Yellow | #e8993a | — | | Accent | Purple | #b266e0 | — |

File Structure

nightwire/
├── nightwire.css                      <- Design tokens, utilities & component styles
├── tailwind.preset.js                 <- Tailwind CSS preset with all tokens
├── DESIGN.md                          <- AI-readable design spec
├── CHANGELOG.md
├── docs/                              <- React docs site (Vite + Tailwind)
├── examples/
│   └── html/
│       ├── dashboard.html             <- Full demo (blockchain dashboard)
│       ├── neural-ops.html            <- Full demo (neural ops center)
│       ├── workshop.html              <- v2 component showcase (alpha)
│       └── components/                <- Standalone component snippets
├── skill/nightwire/
│   ├── SKILL.md                       <- Claude Code skill (full design system spec)
│   └── references/                    <- Examples & layout docs
└── src/                               <- CLI installer source

v2-alpha — preview

See examples/html/workshop.html or the live /intensity / /layer2-tokens pages.

A v2-alpha branch is in flight with 100% additive changes (zero rename, no breaking):

Layer 2 semantic tokens (--nw-chrome, --nw-data, --nw-signal-*, --nw-ai)
Intensity system via <html data-intensity="archive|operator|combat"> — one attribute reconfigures glow, motion, density, kanji visibility, padding
New components: command palette (.cmdk), drawer, form suite (.field/.switch/.check/.combo), code/diff/steps, button & tag variants, layout primitives
Motion vocabulary (--nw-tick/--nw-sweep/--nw-uplink) + prefers-reduced-motion contract

Preview the v2 workshop in examples/html/workshop.html. See CHANGELOG.md for the full additive surface.

Credits

Built on nerv-ui by TheGreatGildo. Licensed under MIT.