// open-source design system

Nocturne.

A Cyberpunk 2077 / Night City visual language. Near-black surfaces, one hot neon accent, clipped corners, machine-voice type. Tokens, framework-agnostic CSS and React components, all from a single source of truth.

Browse components Brand guidelines

[Foundations]

tokens

Neutrals

#07070b

surface

#10101a

elevated

#2a2a3d

border

#3d3d52

text

#f4f4f8

text-muted

#c4c4d4

text-dim

#8a8aa0

border-strong

#5a5a78

Accents

primary

#fcee0a

info

#00f0ff

danger

#ff003c

success

#00ff9d

violet

#7a3cff

pink

#ff2e88

orange

#ff8a00

Typography

display 4xlNight City

display 2xlJack into the net

bodyRajdhani for headings and UI. The quick brown fox.

mono labelSystem / status / metadata

glitchSignal lost

Shape & effects

clip-corner

clip-corner-sm

grid-lines

[Components]

css + react

Buttons

Badges

yellow online error ready beta pending dim

Cards & stat tiles

Signal locked. Throughput nominal.

ICE detected on subnet 3.

Uptime

99.9

+0.2 vs last week

Alerts

[INFO]Sync complete

42 sessions indexed.

[WARN]Low signal

Reconnecting to relay.

[ERROR]Flatlined

Index rebuild failed, timeout after 30s.

[OK]Saved

Config written to disk.

Form controls

Handle

Your street name.

District

▾

Note

Encrypt uplink

Invalid

This field is required.

Tabs

Overview content.

Progress & skeleton

Sync62%

Upload88%

Task chips & disclosure

TASKt-4821running

Rebuilding search index…

TASKt-4820completed

Synced 42 sessions.

▶Advanced

Hidden configuration lives here.

▶Danger zone

Irreversible operations.

Panel

§03

System core

v0.1

A panel frames a major section with a glowing rail, a corner notch and a tinted wash.

Radio, switch & slider

Watson Westbrook Pacifica

Encrypt uplink

Combobox & dropdown menu

Toasts, tooltip & spinner

[OK]

Uplink stable

Handshake complete.

[ERR]

Trace detected

Jack out now.

Table

Gig	Fixer	District	Payout
The Pickup	Dex	Watson	12,000
Ghost Town	Rogue	Badlands	28,500
Riders on the Storm	Panam	Badlands	17,250

Tags & avatars

default samurai netrunner beta hostile JS VS AC

Code block

const uplink = await net.connect("watson-3");
uplink.inject(daemon);

Breadcrumbs & stepper

Brief
Infiltrate
Extract

Accordion & empty state

Uplink