NaderLabs

corpo

MIT · npm

A calm, light-first design system, and the business-friendly sibling of cyberdesign. It keeps the same skeleton — mono micro-labels, 1px borders, swappable accent themes — and reworks everything else for rooms where neon is a liability: Public Sans body copy, quiet elevation instead of glow, sentence-case voice, WCAG-AA contrast throughout.

license:MITcomponents:70+themes:5css:cp-*

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.

Why a second system

cyberdesign is not appropriate for every audience. A scanline overlay behind an access review is a distraction, and a neon accent on a white projector is unreadable. Rather than water down the cyber system with a “professional mode” that would compromise both, corpo is a separate system that borrows the structure and drops the theatrics.

What carries over, what does not

Kept

The uppercase mono micro-label, 1px borders instead of heavy shadows, dense data layouts, and accent themes driven entirely by custom properties.

Replaced

Glow becomes quiet elevation. Terminal type becomes Public Sans body copy with mono reserved for numbers and identifiers. Content voice moves from uppercase to sentence case.

Not ported

The cyber-only families — terminal, HUD bar and frame, scanner, interference, gauge, glow card, augmented panels and buttons, ticker. They have no meaning here, so they are absent rather than restyled.

Accessibility

Contrast is a constraint on the tokens, not a review step at the end. Text and interactive colors are chosen to meet WCAG-AA against the surfaces they are actually used on, and the categorical chart palette is validated for color vision deficiency by a six-check palette validator on both light and dark surfaces. Chart series keep a fixed order so the same category gets the same color across every chart in an application.

Accent themes

Teal is the default, with amber, green, red, and steel alternates, plus a separate dark scope for applications that need one. As with cyberdesign, a theme is a class on an ancestor.

teal
RunReady
amber
RunReady
green
RunReady
red
RunReady
steel
RunReady
corpo's accent themes — teal by default, plus amber, green, red, and steel. Same markup, one class apart.

Whole screens, not just parts

A component gallery does not tell you whether a system survives a real screen, so corpo ships composed examples alongside the primitives: an admin console, a billing workspace, and a program delivery view, plus multi-step flows covering access clearance, decommissioning, an executive briefing, and an incident console. They double as the place where layout bugs show up before a consuming project finds them.

Packages

The split mirrors cyberdesign: @nukleas/corpo carries the tokens, the cp-* stylesheet, and thin React class bindings, while @nukleas/react-corpo adds the full React API and Storybook. The sample at the top of this page is the published stylesheet, rescoped so its light-first base styles stay inside their own container instead of repainting this dark page.

Note: both packages are at 0.2.0 and still moving. The component list in the repository README lags what is actually shipped — the package is the source of truth.