NERV UI — Operations Console Aesthetic
Build web interfaces that feel like they were designed by engineers inside NERV — not by graphic designers outside it. This is the total visual identity of a fictional military-scientific organization: CRT terminals, tactical maps, neural sync diagnostics, contamination scanners, and access control panels. Every screen assumes the operator already knows what they're looking at.
The screen is off until data demands it. Black void is the default state.
Design Tokens
Color Palette
css
:root {
/* Void — the screen is OFF until data appears */
--void: #000000; /* True black — primary background */
--void-warm: #0A0A08; /* Slightly warm black for panels */
--void-panel: #111110; /* Raised surface (rare) */
/* NERV Orange — headers, labels, institutional text */
--nerv-orange: #FF9830; /* Primary labeling color — high contrast */
--nerv-orange-dim: #D08028; /* Secondary labels */
--nerv-orange-hot: #FFCC50; /* Highlighted/active labels */
/* Nominal Green — data readouts, "system OK" — full phosphor intensity */
--data-green: #50FF50; /* Primary data color */
--data-green-dim: #30BB30; /* Secondary data */
--data-green-faint: rgba(80, 255, 80, 0.1); /* Table row hover */
/* Cyan — wireframes, maps, spatial data */
--wire-cyan: #20F0FF; /* Wireframe lines */
--wire-cyan-dim: #10A8B8; /* Construction lines */
--wire-cyan-glow: rgba(32, 240, 255, 0.15); /* Subtle glow */
/* Alert Red — warnings, refusals, critical states */
--alert-red: #FF4840; /* Primary alert */
--alert-red-dim: #CC3028; /* Background alert panels */
--alert-red-hot: #FF6858; /* Flashing/urgent */
--alert-red-fill: rgba(255, 72, 64, 0.18); /* Alert zone background */
/* Thermal spectrum — for degradation/heatmap states */
--thermal-yellow: #FFE820;
--thermal-magenta: #F030C0;
--thermal-blue: #3060F0;
--thermal-purple: #A030E0;
/* Neutral — secondary text, rules */
--steel: #E0E0D8; /* Primary readable text */
--steel-dim: #9A9A90; /* Muted annotations */
--steel-faint: rgba(224, 224, 216, 0.08); /* Grid lines */
}
Rules:
- Background is ALWAYS true black or near-black. Never gray, never navy.
- Orange is for labels and headers only — never data values.
- Green is for data and nominal status — numbers, readouts, "OK" states.
- Cyan is for spatial/structural — wireframes, maps, grids, containment lines.
- Red is for alerts and refusals only — never decoration.
- Colors exist in isolation. They don't blend, gradient, or harmonize. Each serves one function.
- Phosphor-bright, not muted. These are CRT colors — they glow. If it looks dim against black, bump it up. Readability always beats subtlety.
- When a system is under stress, colors invade each other's space — red bleeds into green zones, thermal spectrum replaces orderly color coding.
Typography
css
:root {
--font-sys: 'IBM Plex Mono', 'Courier New', monospace; /* Primary — everything */
--font-label: 'Bebas Neue', 'Arial Narrow', sans-serif; /* Institutional labels */
--font-stamp: 'Bebas Neue', 'Impact', sans-serif; /* REFUSED / WARNING stamps */
--font-kanji: 'Noto Sans JP', sans-serif; /* Japanese institutional text */
}
html
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Bebas+Neue&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
Monospace dominates everything. Bebas Neue is ONLY for large institutional labels and status stamps. The UI assumes fixed-width alignment is load-bearing — columns must align perfectly.
Type Scale
| Role | Font | Size | Weight | Spacing | Transform | Color | |
|---|
| Stamp | stamp | clamp(3rem, 8vw, 6rem) | 400 | 0.08em | uppercase | --alert-red | |
| Institutional label | label | clamp(1.2rem, 3vw, 2rem) | 400 | 0.15em | uppercase | --nerv-orange | |
| Section header | sys | 0.875rem | 700 | 0.12em | uppercase | --nerv-orange | |
| Data value | sys | 0.8125rem | 500 | 0em | none | --data-green | |
| Data label | sys | 0.6875rem | 400 | 0.08em | uppercase | --nerv-orange-dim | |
| Annotation | sys | 0.625rem | 400 | 0.05em | uppercase | --steel-dim | |
| Scale marker | sys | 0.5rem | 400 | 0.1em | none | --nerv-orange | |
| Kanji badge | kanji | 0.75rem | 700 | 0.05em | none | --steel | |
CRT / Scanline Texture Layer
Every NERV screen has a CRT texture. This is non-negotiable.
css
/* Scanline overlay — apply to body or main container */
.crt-overlay {
position: relative;
}
.crt-overlay::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.06) 2px,
rgba(0, 0, 0, 0.06) 4px
);
pointer-events: none;
z-index: 9999;
}
/* CRT vignette — darkened edges */
.crt-vignette::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 60%,
rgba(0, 0, 0, 0.35) 100%
);
pointer-events: none;
z-index: 9998;
}
/* Phosphor flicker (subtle) */
@keyframes phosphor {
0%, 100% { opacity: 1; }
50% { opacity: 0.97; }
}
.crt-flicker {
animation: phosphor 0.08s infinite;
}
css
/* Reduced motion: kill flicker, keep scanlines */
@media (prefers-reduced-motion: reduce) {
.crt-flicker { animation: none !important; }
}
Grid Systems
Hex Grid Scanner
For detection/anomaly displays — a regular hexagonal mesh where individual cells light up.
css
.hex-grid {
--hex-size: 40px;
--hex-gap: 4px;
--hex-color: var(--wire-cyan-dim);
--hex-alert: var(--alert-red);
display: grid;
grid-template-columns: repeat(auto-fill, var(--hex-size));
gap: var(--hex-gap);
position: relative;
}
.hex-cell {
width: var(--hex-size);
height: calc(var(--hex-size) * 1.1547);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: var(--void-panel);
border: 1px solid var(--hex-color);
transition: background 0.3s, box-shadow 0.3s;
}
.hex-cell.alert {
background: var(--alert-red-fill);
border-color: var(--alert-red);
box-shadow: 0 0 12px rgba(232, 48, 32, 0.4);
}
.hex-cell.nominal {
background: rgba(48, 200, 48, 0.06);
border-color: var(--data-green-dim);
}
Measurement Grid Overlay
Crosshair markers, scale bars, and registration marks.
css
.measurement-overlay {
position: relative;
}
.measurement-overlay::before {
content: '';
position: absolute;
inset: 0;
background-image:
/* Major grid */
linear-gradient(var(--steel-faint) 1px, transparent 1px),
linear-gradient(90deg, var(--steel-faint) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
z-index: 1;
}
/* Crosshair registration mark */
.crosshair {
position: absolute;
width: 24px;
height: 24px;
}
.crosshair::before,
.crosshair::after {
content: '';
position: absolute;
background: var(--data-green);
}
.crosshair::before {
width: 1px; height: 100%;
left: 50%; top: 0;
}
.crosshair::after {
width: 100%; height: 1px;
top: 50%; left: 0;
}
/* Scale bar */
.scale-bar {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-sys);
font-size: 0.5rem;
letter-spacing: 0.1em;
color: var(--nerv-orange);
}
.scale-bar::before {
content: '';
width: 60px;
height: 1px;
background: var(--nerv-orange);
}
Axis Scale (Y-axis ruler)
css
.y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: var(--font-sys);
font-size: 0.5rem;
color: var(--nerv-orange);
padding: 0 0.5rem;
border-right: 1px solid var(--nerv-orange-dim);
}
.y-axis .tick {
position: relative;
}
.y-axis .tick::after {
content: '';
position: absolute;
right: -0.5rem;
top: 50%;
width: 6px;
height: 1px;
background: var(--nerv-orange);
}
Components
Data Table (Column-Aligned Terminal)
css
.nerv-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sys);
font-size: 0.8125rem;
}
.nerv-table th {
font-size: 0.625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: left;
padding: 0.5rem 0.8rem;
color: var(--nerv-orange);
border-bottom: 1px solid var(--nerv-orange-dim);
font-weight: 400;
}
.nerv-table td {
padding: 0.4rem 0.8rem;
color: var(--data-green);
border-bottom: 1px solid rgba(48, 200, 48, 0.06);
font-variant-numeric: tabular-nums;
}
.nerv-table td.label {
color: var(--nerv-orange-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.6875rem;
}
.nerv-table tr:hover td {
background: var(--data-green-faint);
}
/* Alert row */
.nerv-table tr.alert td {
color: var(--alert-red);
background: var(--alert-red-fill);
}
Command/Response Block
The from/to/command structured header with a giant status stamp.
css
.command-block {
border-top: 2px solid var(--nerv-orange);
padding: 1.5rem;
position: relative;
background: var(--void);
}
.command-block .cmd-header {
font-family: var(--font-sys);
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--nerv-orange);
line-height: 1.8;
}
.command-block .cmd-header span {
color: var(--steel);
}
.command-block .cmd-stamp {
position: absolute;
top: 50%; right: 2rem;
transform: translateY(-50%) rotate(-5deg);
font-family: var(--font-stamp);
font-size: clamp(3rem, 8vw, 5rem);
letter-spacing: 0.08em;
padding: 0.2em 0.5em;
border: 4px solid;
}
.cmd-stamp.refused {
color: var(--alert-red);
border-color: var(--alert-red);
}
.cmd-stamp.approved {
color: var(--data-green);
border-color: var(--data-green);
}
.cmd-stamp.pending {
color: var(--nerv-orange);
border-color: var(--nerv-orange);
}
html
<div class="command-block">
<div class="cmd-header">
from: <span>BALTHASAR DIRECT CONNECTION NO. 102</span><br>
to: <span>EVA-01 ENTRY PLUG SYSTEM LINK 2</span><br>
cmd: <span>ENTRY PLUG EJECT</span>
</div>
<div class="cmd-stamp refused">REFUSED</div>
</div>
Alert Banner (Full-Width Warning)
css
.alert-banner {
background: var(--alert-red);
color: var(--void);
padding: 0.6rem 1.5rem;
font-family: var(--font-stamp);
font-size: clamp(1.5rem, 4vw, 2.5rem);
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
position: relative;
overflow: hidden;
}
/* Chevron arrows flanking */
.alert-banner::before { content: '◀ ◀ ◀ '; }
.alert-banner::after { content: ' ▶ ▶ ▶'; }
/* Pulsing variant */
@keyframes alert-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.alert-banner.pulse {
animation: alert-pulse 1s ease-in-out infinite;
}
Hazard Stripe Pattern
Environmental/signage stripes — red diagonal on black.
css
.hazard-stripe {
background: repeating-linear-gradient(
-45deg,
var(--alert-red) 0px,
var(--alert-red) 20px,
var(--void) 20px,
var(--void) 40px
);
padding: 1rem 2rem;
}
.hazard-stripe .label {
font-family: var(--font-stamp);
font-size: clamp(1.5rem, 4vw, 3rem);
letter-spacing: 0.15em;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 2px 2px 0 var(--void);
}
Institutional Label Block
The NERV subject identification panel — SAMPLE 0001 / PATTERN: BLUE TYPE