/nerv-ui

name: nerv-ui
description: "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."

NERV UI v2 — Operations Console Component Library

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)

---

What's New in v2

| 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 |

---

Quick Start

Drop-in Stylesheet

<link rel="stylesheet" href="nerv-ui.css">

Contains all design tokens, CRT effects, and component classes. 808 lines, zero dependencies (except fonts).

Required 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">

CRT Effects (standalone)

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.

---

File Structure

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.

---

Core Principles

1. **The void is the default.** Elements emerge from true black (#000), not a surface. 2. **Color = function.** Orange for labels/headers, green for nominal data, cyan for wireframes, red for alerts only. 3. **Every visual conveys data.** 3D scenes reference real metrics. No decorative wireframes. 4. **Density = authority.** More data per pixel = more credible. 5. **Mechanical compression.** Text squeezed via `scaleX(0.78-0.85)`. Signature EVA look. 6. **Bilingual is institutional.** Japanese text = the org operates in Japanese. Not decoration. 7. **CRT texture is always present.** Scanlines, vignette, phosphor flicker.

---

Design Tokens

: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;
}

---

Typography — NO HELVETICA

: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;
}

---

Components

Event Log Terminal

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>
      <spa