The Cyberpunk 2077 interface look is everywhere in games and film, and almost nobody ships it as something you can actually build on.
It is easy to fake: near-black background, one hot neon accent, a glow filter, done. That is also exactly where almost every attempt stops. A palette and a glow are not a design system.
So I built Nocturne, an open-source design system for that Night City look: 40 components, one source of truth for color, type, spacing, radii, shadows, and motion. And honestly, the neon was the easy part.
The hard part was contrast. Neon-on-black looks incredible and fails accessibility contrast checks constantly. A hot yellow on near-black works as an accent; use that same yellow for body text and it quietly drops below the ratio that keeps it readable for real people. So the system treats contrast as a first-class constraint, with an actual contrast table, not a "we care about a11y" line in the README.
The other decision that ate the time: every component is built twice. Once as a framework-agnostic CSS class API, once as a typed React wrapper over the exact same classes. Same visual language either way, so you adopt a layer, not a framework.
That is the whole point of the three-package split. Take just the tokens to theme something you already have. Drop the plain CSS into any stack, Vue, Svelte, Astro, or raw HTML:
<link rel="stylesheet" href="https://unpkg.com/nocturne-css/dist/nocturne.css" />
<button class="noct-btn noct-btn--primary">Jack in</button>
Or pull in the React components if that is your stack. Nothing forces a rewrite to get the look.
The full write-up has all three packages, the complete component list, the quick-start for each layer, and the under-the-hood choices (Rajdhani, JetBrains Mono, zero-runtime CSS): https://mederic.me/blog/nocturne-design-system
Honest question: what visual style do you wish shipped as a real, accessible component library, instead of a Dribbble shot you have to rebuild from scratch every time?
Top comments (0)