Skip to content

CSS

Tokens and type. These islands are CSS only — they do not need nerv.js.

Tokens

Named data tokens (--nerv-green, --nerv-cyan, …) stay put in every alert state. Ambiance tokens (--nerv-primary, --nerv-bg) follow .nerv-state-*. Put factual color on named tokens.

AMBIANCE --nerv-primary

DATA --nerv-green

DATA --nerv-cyan

DATA --nerv-red

Spec: tokens live on :root. Named data colors never get overridden by the alert cascade. --nerv-primary defaults to --nerv-amber.

<p class="nerv-type-hud" style="color: var(--nerv-primary);">AMBIANCE --nerv-primary</p>
<p class="nerv-type-hud" style="color: var(--nerv-green);">DATA --nerv-green</p>

Type

Six roles. Each class sets font-family (and a little tracking / casing). Color is separate — pair with a token or .nerv-text-*.

NERV 本部

MAGI SYSTEM CHECK

CORE_TEMP: 227.4°C

04:00:00

NERV Mixed 第三次衝撃

NERV BIOS v3.14 — MAGI SYSTEM CHECK

Spec: .nerv-type-display Shippori, .nerv-type-hud Barlow Condensed uppercase, .nerv-type-data IBM Plex Mono, .nerv-type-segment DSEG7, .nerv-type-mixed the JP/EN HUD stack, .nerv-type-boot VT323 with pre-wrap.

<p class="nerv-type-hud">MAGI SYSTEM CHECK</p>
<p class="nerv-type-data">CORE_TEMP: 227.4°C</p>
<p class="nerv-type-segment">04:00:00</p>