NERV Operations Console v2 — Evangelion-inspired UI component library. Data-driven Three.js MAGI visualization (yield surface mesh + organic flow curves + bar columns), blockchain event log terminal, dense metrics grid, vault cards, oracle consensus display, CRT effects, emergency mode. Noto Serif Display (weight 900) + Shippori Mincho B1 + JetBrains Mono. NO HELVETICA. Every pixel conveys information.
Build web interfaces that feel like NERV designed them. Dense, data-driven, clinical. Every visual element references real data — no decorative waste.
The screen is off until data demands it. Black void is the default state.
Live Demo: https://woody-cairn-ztqf.here.now/
Source: ~/clawd/nerv-ui/index.html
v1 Docs: See SKILL-v1.md for the original component library (Cormorant Garamond, hex grids, command blocks)
| v1 | v2 |
|---|---|
| Cormorant Garamond (max 700) | Noto Serif Display (up to 900) — much heavier |
| Decorative 3D wireframes |
| Data-driven MAGI visualization (yield surface + flow curves) |
| Generic icosphere globe | Animated terrain mesh with numbered vertices + organic curves |
| No event stream | Blockchain event log — scrolling terminal with typed events |
| Moderate density | Maximum density — every panel shows real protocol data |
| 3 vaults (alETH/alUSD/alBTC) | 2 vaults (alETH/alUSD) — matches current V3 scope |
| Hex grid scanner | Cut — replaced with MYT strategy performance table |
| Command block / ID block | Cut — decorative, replaced with data-driven metrics |
<link rel="stylesheet" href="nerv-ui.css">
Contains all design tokens, CRT effects, and component classes. 808 lines, zero dependencies (except fonts).
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Saira+Extra+Condensed:wght@400;600;700;800&family=Shippori+Mincho+B1:wght@500;700;800&display=swap" rel="stylesheet">
Just want the CRT look? Use components/crt-effects.css — scanlines, vignette, phosphor flicker, moving scan line. Add <div class="scan-line-overlay"></div> to your body.
nerv-ui/
├── SKILL.md ← This file (v2 documentation)
├── SKILL-v1.md ← Original v1 documentation (preserved)
├── nerv-ui.css ← Complete stylesheet (tokens + CRT + all components)
├── demo.html ← Full working dashboard demo
└── components/ ← Individual component demos (self-contained)
├── event-log.html ← Blockchain event log terminal
├── vault-card.html ← Vault unit status cards
├── magi-oracle.html ← Oracle price consensus display
├── metrics-grid.html ← Dense key metrics grid
├── data-table.html ← Strategy + Transmuter tables
└── crt-effects.css ← CRT overlay effects (standalone)
Each component HTML file is fully self-contained — open in browser, see it working, extract what you need.
scaleX(0.78-0.85). Signature EVA look.:root {
/* Void */
--void: #000000;
--void-warm: #080807;
--void-panel: #0C0C0A;
/* NERV Orange — headers, labels, classification */
--nerv-orange: #FF9830;
--nerv-orange-dim: #C87020;
--nerv-orange-hot: #FFCC50;
/* Nominal Green — data readouts, "system OK" */
--data-green: #50FF50;
--data-green-dim: #30BB30;
/* Cyan — wireframes, spatial data */
--wire-cyan: #20F0FF;
--wire-cyan-dim: #10A0B0;
/* Alert Red — emergencies only */
--alert-red: #FF3030;
/* Neutral */
--steel: #D8D8D0;
--steel-dim: #888880;
}
:root {
/* Heavy display serif (EVA English titles) — weight 900, mechanically compressed */
--font-title: 'Noto Serif Display', 'Times New Roman', serif;
/* Japanese institutional (Matisse EB equivalent) */
--font-mincho: 'Shippori Mincho B1', 'YuMincho', serif;
/* Terminal/data readouts */
--font-sys: 'JetBrains Mono', 'Cascadia Mono', monospace;
/* WARNING stamps, emergency banners */
--font-stamp: 'Saira Extra Condensed', 'Impact', sans-serif;
}
Mechanical compression (signature EVA):
.compressed-title {
font-family: var(--font-title);
font-weight: 900;
transform: scaleX(0.82);
transform-origin: left center;
letter-spacing: 0.2em;
text-transform: uppercase;
}
Scrolling blockchain event feed. Color-coded by type (DEPOSIT=green, BORROW=cyan, HARVEST=orange, REPAY=dim green, REDEEM=yellow, MINT=magenta). Shows timestamp, type, address/detail, amount, block number.
Demo: components/event-log.html
<div class="event-log">
<div class="el-header">
<span>Blockchain Event Log</span>
<span class="el-count">42 events</span>
</div>
<div class="el-body" id="logBody">
<div class="ev">
<span class="ev-time">12:04:22</span>
<span class="ev-type deposit">DEPOSIT</span>
<span class="ev-detail">0x7f2a…4c3b → alETH Vault</span>
<span class="ev-amount">142.5 ETH</span>
<span class="ev-block">#19284721</span>
</div>
</div>
</div>
EVA Unit-style status card for protocol vaults. Compressed serif title + Japanese katakana name + key-value stat rows.
Demo: components/vault-card.html
<div class="panel">
<div class="panel-header">
<span>Unit-00 — alETH</span>
<span class="tag"><span class="led green"></span>Operational</span>
</div>
<div class="vault-card">
<div class="vc-id">Primary — Ethereum</div>
<div class="vc-name">自己返済型ETH</div>
<div class="vc-row"><span class="lbl">TVL</span><span class="val">$142.8M</span></div>
<!-- ... more rows ... -->
</div>
</div>
Three-source oracle display (Chainlink, Uniswap TWAP, Internal) with price, data freshness, and agreement status. Updates in real-time.
Demo: components/magi-oracle.html
Dense 2×N grid of key protocol numbers. Uses the .highlight modifier for important values and .zero for the always-zero liquidation counter.
Demo: components/metrics-grid.html
NERV-styled tables for strategy performance and transmuter status. Orange headers, green data, hover highlighting, progress bars for utilization.
Demo: components/data-table.html
The hero visualization. Requires Three.js via CDN importmap. Elements:
See demo.html Three.js module for full implementation (~200 lines).
Toggle via data-mode="emergency" on <html>:
document.documentElement.dataset.mode = 'emergency';
Transforms: all green→red, cyan→red, scan line speeds up, emergency overlay appears, MAGI goes into conflict state.
| ❌ Don't | ✅ Do |
|---|---|
| Gray/navy backgrounds | True black (#000) |
| Helvetica anywhere | Use the specified font stack |
| Decorative 3D wireframes | Data-driven visualizations |
| Smooth gradients | Hard boundaries, stepped blocks |
| Rounded corners | Sharp corners (except LEDs) |
| Light mode | This aesthetic has no light mode |
| Decorative Japanese | Real institutional terms only |
| Low density layouts | Pack data — density = authority |
| Static numbers | Live-updating from shared data model |
All color combinations pass WCAG AA:
@media (prefers-reduced-motion: reduce) {
body, .scan-line-overlay, [data-mode="emergency"] * {
animation: none !important;
}
}
The screen is off until data demands it. The void is the default state.