NaderLabs

Design Systems

Two design systems with the same bones and opposite temperaments. I build interfaces for both a cyberpunk terminal and a compliance review, so I maintain one of each. Both are MIT, published to npm, and the samples below are live components rather than screenshots.

cyberdesign

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. This site runs on it — the panel headers, HUD bars, and glow cards you have been reading through are all cd-* classes.

reactor / diagnostics
corestabledraw2.4 GWstatusonline
uptime99.98%
throughput1.2k/s+4.1%
latency8ms
queue14-2

containment

Field integrity holding across all six segments.

activedegradedfault
EngageVentScram
cyberdesign: panel header, HUD bar, stat block, glow card, badges, buttons, and a progress bar, in the cyan accent theme.
license:MITthemes:5components:90+css:cd-*

corpo

The business-friendly sibling. Same skeleton — mono micro-labels, 1px borders, swappable accent themes — reworked for rooms where neon is a liability: Public Sans body copy, quiet elevation instead of glow, sentence-case voice, and WCAG-AA contrast throughout. The cyber-only families (terminal, HUD, scanner, gauge) are deliberately not ported.

Vendor access review

Quarterly attestation, due 30 September.

In review
Accounts1,284+62
Pending37Awaiting owner sign-off
VendorOwnerSeats
Northwind LogisticsA. Okonkwo412
Cormorant AnalyticsJ. Reyes86

Visible to the vendor contact.

Evidence retained
Attestations are kept for seven years.
corpo: card, section header, stat row, data table, form field, status pill, buttons, and an info alert, in the default teal accent.
license:MITthemes:5components:70+contrast:WCAG-AA

Note: corpo is light-first by design, so its sample sits on a pale surface inside this dark page. That contrast is the point — the two systems share a skeleton and almost nothing else.