cyberdesign
MIT · npm
A cyber/terminal design system: neon glow, CRT scanlines, clip-path augmented panels, five accent themes. It started as the look for one project and became the thing every other one imports — including this site. Every panel header, HUD bar, and glow card you are reading through comes from it.
containment
Field integrity holding across all six segments.
Two layers
The system ships as two packages so a project can take only what it needs. A plain HTML page or a non-React framework can use the stylesheet on its own; a React app gets typed components on top of the same classes.
@nukleas/cyberdesign
Design tokens, the cd-* stylesheet, and thin React class bindings. Subpath exports cover the raw CSS, variables-only CSS, a Tailwind v4 theme, and the token objects.
@nukleas/react-cyberdesign
The full React API — semantic props rather than class strings — documented in Storybook and published alongside the CSS package.
Token discipline
Component CSS never hard-codes a hex value or a named color. Rules reference --cd-accent and friends, which is what makes a whole theme swap on one class.
Accent themes
Five accents ship in the box. Because every component reads its color from custom properties, changing themes is a class on an ancestor — not a rebuild, and not a second stylesheet. This site runs the green theme.
Component families
Most of the library is the ordinary furniture any application needs — buttons, inputs, tables, tabs, modals, pagination, breadcrumbs. What makes it a cyber system is the second half: terminals, HUD bars and frames, augmented clip-path panels and buttons, glow cards, scanners, interference and scanline overlays, gauges, tickers, and a set of game-flavored pieces like tech trees and inventory grids.
Beyond components
A few subsystems go past styling widgets, each exposed as its own subpath export.
Isometric diagrams
A scene builder for isometric architecture maps — infrastructure drawn as a place you can look at rather than a box-and-arrow chart.
Atlas maps
An SVG world and US projector built on vendored d3-geo and topojson-client. Basemaps ship with the package: no tile servers, no API keys, no network calls at render time.
Charts and tech trees
Lightweight chart drawing and a tech-tree renderer, both styled from the same tokens as everything else.
Where it is used
This site is the reference implementation. It consumes cyberdesign as a workspace package and imports the stylesheet once in the root layout; everything else is markup using cd-* classes. If you want to know how the system behaves across a real set of pages rather than a component gallery, you are already looking at it.
Note: both packages are at 0.1.0. The API is still moving, and I bump it when a consuming project needs something rather than on a schedule.