What does the Nerv Ui AI skill do?

NERV Operations Console aesthetic for web interfaces — Evangelion-inspired instrumentation UI with black void backgrounds, sparse high-contrast color coding (orange headers, green nominal data, cyan wireframes, red alerts), dense monospaced data readouts, measurement overlay grids, hex scanner patterns, CRT/VHS texture layers, escalating alert states, bilingual JP/EN institutional labeling, thermal imaging degradation, and the clinical authority of a fictional military-scientific organization's total visual identity system. Spans CRT terminals → tactical displays → physical infrastructure.

Why use Nerv Ui on TypingMind?

Because you install it once and use it with any model. Nerv Ui is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Nerv Ui in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/TheGreatGildo/nerv-ui/tree/main/v1-old. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Nerv Ui?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Nerv Ui?

As many as you like. As long as a model supports skills, you can use Nerv Ui with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Nerv Ui AI skill free?

Yes. It is published on GitHub by TheGreatGildo under the MIT license. You only pay your own AI provider for the tokens you use.

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Nerv Ui by TheGreatGildo — AI Skill for Any LLM

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

css
.id-block {
  border: 1px solid var(--nerv-orange-dim);
  padding: 0.8rem 1rem;
  font-family: var(--font-sys);
  background: var(--void);
  max-width: 280px;
}
.id-block .id-title {
  font-family: var(--font-label);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: var(--nerv-orange);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.id-block .id-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel-dim);
  padding: 0.15rem 0;
}
.id-block .id-row .value {
  color: var(--data-green);
}
.id-block .id-caution {
  margin-top: 0.4rem;
  padding: 0.2rem 0.5rem;
  background: var(--alert-red);
  color: var(--void);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
}

html
<div class="id-block">
  <div class="id-title">REI AYANAMI</div>
  <div class="id-row"><span>AGE</span><span class="value">14</span></div>
  <div class="id-row"><span>SAMPLE</span><span class="value">0001</span></div>
  <div class="id-row"><span>PATTERN</span><span class="value">BLOOD TYPE BLUE</span></div>
  <span class="id-caution">⚠ CAUTION</span>
</div>

Neuron Inventory (Data Cascade)

Dense multi-column data listing like the EVA sync diagnostic.

css
.neuron-cascade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 2rem;
  font-family: var(--font-sys);
  font-size: 0.6875rem;
  line-height: 1.6;
}
.neuron-cascade .col-header {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nerv-orange);
  border-bottom: 1px solid var(--nerv-orange-dim);
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
}
.neuron-cascade .entry {
  color: var(--data-green);
  padding: 0.1rem 0;
}
.neuron-cascade .entry.alert {
  color: var(--alert-red);
}
.neuron-cascade .entry .tag {
  color: var(--nerv-orange-dim);
  margin-right: 0.5rem;
  font-size: 0.5625rem;
}

System Boot / Diagnostics Block

DOS-style system check readout.

css
.boot-sequence {
  font-family: var(--font-sys);
  font-size: 0.75rem;
  color: var(--alert-red);
  line-height: 1.7;
  padding: 1.5rem;
  background: var(--void);
  overflow-x: auto;
}
.boot-sequence .check-ok {
  color: var(--data-green);
}
.boot-sequence .check-ok::after {
  content: ' Check OK';
  color: var(--data-green);
}
.boot-sequence .addr {
  color: var(--steel-dim);
  margin-right: 1em;
  font-variant-numeric: tabular-nums;
}
.boot-sequence .separator {
  border: none;
  border-top: 1px dashed var(--steel-dim);
  margin: 0.5rem 0;
}

Access Panel (Lock/Permission)

css
.access-panel {
  background: linear-gradient(180deg, #1A1A18 0%, #0E0E0C 100%);
  border: 2px solid #333330;
  padding: 2rem;
  font-family: var(--font-sys);
  text-align: center;
  max-width: 360px;
  position: relative;
}
.access-panel .panel-title {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nerv-orange);
  margin-bottom: 1rem;
}
.access-panel .lock-status {
  font-family: var(--font-stamp);
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin: 0.5rem 0;
}
.access-panel .lock-status.locked { color: var(--alert-red); }
.access-panel .lock-status.open { color: var(--data-green); }
.access-panel .waiting {
  font-size: 0.6875rem;
  color: var(--nerv-orange-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* LED indicator */
.led {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50% !important;
  margin-right: 0.5rem;
}
.led.red { background: var(--alert-red); box-shadow: 0 0 6px var(--alert-red); }
.led.green { background: var(--data-green); box-shadow: 0 0 6px var(--data-green); }
.led.orange { background: var(--nerv-orange); box-shadow: 0 0 6px var(--nerv-orange); }

Tactical Map Overlay

css
.tac-map {
  position: relative;
  background: var(--void);
  border: 1px solid var(--wire-cyan-dim);
  overflow: hidden;
}
.tac-map .grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--wire-cyan-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--wire-cyan-dim) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.15;
}
.tac-map .entity {
  position: absolute;
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
}
.entity.friendly {
  color: var(--wire-cyan);
  border-color: var(--wire-cyan);
}
.entity.hostile {
  color: var(--alert-red);
  border-color: var(--alert-red);
  background: var(--alert-red-fill);
}
.entity.unknown {
  color: var(--nerv-orange);
  border-color: var(--nerv-orange);
}
/* Position marker (X) */
.tac-marker {
  position: absolute;
  color: var(--wire-cyan);
  font-family: var(--font-sys);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
/* Kanji badge */
.kanji-badge {
  position: absolute;
  font-family: var(--font-kanji);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--steel);
  background: var(--void);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--steel-dim);
}

Thermal Degradation State

When systems are stressed, visuals break down into stepped color blocks.

css
/* Stepped gradient — the system losing control */
.thermal-degrade {
  background: linear-gradient(
    135deg,
    var(--thermal-yellow) 0%,
    var(--thermal-yellow) 14%,
    var(--nerv-orange) 14%,
    var(--nerv-orange) 28%,
    var(--alert-red) 28%,
    var(--alert-red) 42%,
    var(--thermal-magenta) 42%,
    var(--thermal-magenta) 57%,
    var(--thermal-purple) 57%,
    var(--thermal-purple) 71%,
    var(--thermal-blue) 71%,
    var(--thermal-blue) 85%,
    #101030 85%,
    #101030 100%
  );
  image-rendering: pixelated;
}

/* Thermal grid — numbered crosshairs over heat */
.thermal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  position: relative;
}
.thermal-grid .cell {
  border: 1px solid rgba(200, 200, 192, 0.15);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.3rem;
  font-family: var(--font-sys);
  font-size: 0.5rem;
  color: var(--steel-dim);
  min-height: 80px;
}

Waveform Display

Oscilloscope-style animated sine waves.

css
.waveform-container {
  position: relative;
  height: 200px;
  background: var(--void);
  overflow: hidden;
  border: 1px solid var(--wire-cyan-dim);
}
.waveform-container canvas {
  width: 100%;
  height: 100%;
}
/* Timecode readout overlay */
.timecode {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  color: var(--nerv-orange);
  letter-spacing: 0.1em;
}

Navigation (Minimal)

css
.nerv-nav {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--void);
  border-bottom: 1px solid var(--nerv-orange-dim);
  gap: 1.5rem;
}
.nerv-nav .org-mark {
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--nerv-orange);
  text-transform: uppercase;
}
.nerv-nav a {
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-dim);
  text-decoration: none;
}
.nerv-nav a:hover,
.nerv-nav a.active {
  color: var(--nerv-orange);
}

Buttons

css
.nerv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.2em;
  font-family: var(--font-sys);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--nerv-orange-dim);
  background: transparent;
  color: var(--nerv-orange);
  cursor: pointer;
  transition: all 0.15s;
}
.nerv-btn:hover {
  background: rgba(232, 122, 32, 0.1);
  border-color: var(--nerv-orange);
}
.nerv-btn.primary {
  background: var(--nerv-orange);
  color: var(--void);
  border-color: var(--nerv-orange);
}
.nerv-btn.primary:hover {
  background: var(--nerv-orange-hot);
}
.nerv-btn.danger {
  border-color: var(--alert-red);
  color: var(--alert-red);
}
.nerv-btn.danger:hover {
  background: var(--alert-red-fill);
}

UI States — Escalating Intensity

NERV UIs have 5 visual states that escalate in intensity. The UI literally degrades as severity increases.

State	Background	Primary Color	Texture	Animation
Nominal	`--void`	`--data-green`	Clean scanlines	None
Active	`--void`	`--nerv-orange`	Scanlines	Subtle data flicker
Caution	`--void`	`--nerv-orange-hot`	Scanlines + hex glow	LED blink
Alert	`--alert-red-fill`	`--alert-red`	Heavy scanlines	Pulse animation
Critical	`--thermal-degrade`	White on thermal	Pixelated, stepped	Full screen flash

css
/* State classes — apply to containers */
.state-nominal  { /* default — no extra styles */ }
.state-active   { border-color: var(--nerv-orange) !important; }
.state-caution  { border-color: var(--nerv-orange-hot) !important; box-shadow: 0 0 20px rgba(232, 122, 32, 0.1); }
.state-alert    { background: var(--alert-red-fill) !important; border-color: var(--alert-red) !important; }
.state-critical { animation: critical-flash 0.5s ease-in-out infinite; }

@keyframes critical-flash {
  0%, 100% { background: var(--void); }
  50% { background: var(--alert-red-fill); }
}

Layout

Full-Screen Console

css
body.nerv-console {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--data-green);
  font-family: var(--font-sys);
  font-size: 0.8125rem;
  overflow-x: hidden;
  cursor: default;
}

Panel Grid

css
.console-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  padding: 2px;
  height: 100vh;
}
.console-grid > .panel {
  background: var(--void-warm);
  border: 1px solid var(--steel-faint);
  padding: 1rem;
  overflow: hidden;
  position: relative;
}

Ticker Tape (Running Text)

css
.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--void);
  border-top: 1px solid var(--nerv-orange-dim);
  border-bottom: 1px solid var(--nerv-orange-dim);
  padding: 0.3rem 0;
  font-family: var(--font-sys);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nerv-orange);
}
.ticker .scroll {
  display: inline-block;
  animation: ticker-scroll 30s linear infinite;
}
@keyframes ticker-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

Image Generation Prompts

When using Nano Banana or other image generators to create assets for this style, use these prompt templates:

Background Textures


NERV operations console CRT screen, [SUBJECT], black void background, 
scanline texture overlay, [COLOR] monochrome data visualization, 
no text, no UI chrome, dark atmospheric, film grain, 1990s anime 
production design quality, Hideaki Anno visual style

Subject Overlays (wireframe/thermal)


[SUBJECT] rendered as [wireframe mesh / thermal heatmap / contour map], 
[cyan/orange/green] lines on pure black background, crosshair 
registration markers, scale bar annotations, scientific instrumentation 
aesthetic, CRT monitor capture, retro digital imaging, high contrast

Alert/Status Graphics


Warning screen, industrial hazard aesthetic, bold [red/orange] 
typography on black, diagonal hazard stripes, institutional signage, 
NERV Evangelion UI style, minimal, stark contrast, Japanese and 
English bilingual text

Hex Grid / Scanner


Hexagonal grid scanner display, [cyan/green] hex mesh on black, 
[red/orange] anomaly glow bleeding through [N] cells, scientific 
monitoring interface, CRT texture, dark atmospheric, clean geometric

Bilingual Labeling

NERV interfaces mix Japanese and English systematically:

css
/* Japanese institutional badge */
.jp-badge {
  font-family: var(--font-kanji);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--steel);
  writing-mode: horizontal-tb;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--steel-dim);
  background: var(--void);
}

/* Bilingual label pair */
.bilingual {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bilingual .en {
  font-family: var(--font-sys);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nerv-orange);
}
.bilingual .jp {
  font-family: var(--font-kanji);
  font-size: 0.75rem;
  color: var(--steel-dim);
}

Pattern: English for technical/operational labels. Japanese for organizational/institutional labels. Never decorative — every Japanese string should be a real term.

Common terms:

作戦行動 (sakusen kōdō) — Operational Action
警告 (keikoku) — Warning
認証システム (ninshō shisutemu) — Authentication System
汚染区域 (osen kuiki) — Contaminated Area
緊急 (kinkyū) — Emergency

Anti-Patterns

❌ Don't	✅ Do
Gray or navy backgrounds	True black (`#000`) always
Gradients between colors	Hard color boundaries, stepped blocks
Rounded corners anywhere	Sharp corners only (except LEDs/dots)
Colorful decorative elements	Color = function (label/data/alert/spatial)
Smooth animations	Stepped/flickering/CRT-style motion
Friendly/casual copy	Cold, institutional, technical
Multiple fonts per context	Mono everywhere, Bebas for stamps only
Light/white UI variants	This aesthetic has no light mode
Decorative Japanese text	Real terms only, institutional labeling
Clean, pixel-perfect rendering	Scanlines, grain, phosphor glow

Accessibility

Contrast is king. These are CRT phosphor colors — they should GLOW against the void. If text looks dim or washed out, you've gone too dark. Err on the side of too bright.

Orange #FF9830 on black #000: 8.2:1 ✅ (AAA)
Green #50FF50 on black: 13.8:1 ✅ (AAA)
Cyan #20F0FF on black: 13.1:1 ✅ (AAA)
Red #FF4840 on black: 5.9:1 ✅ (AA) — pair with text label for small text
Steel #E0E0D8 on black: 16.2:1 ✅ (AAA)
Steel-dim #9A9A90 on black: 7.1:1 ✅ (AAA) — safe for annotations

Scanline overlay must be subtle (≤6% opacity). Heavier scanlines kill readability on small text. The CRT effect is atmosphere, not a readability obstacle.

Vignette must not darken text areas. Keep the clear zone at ≥60% of the viewport.

css
@media (prefers-reduced-motion: reduce) {
  .crt-flicker,
  .alert-banner.pulse,
  .state-critical { animation: none !important; }
  .ticker .scroll { animation-duration: 60s; }
}
@media (prefers-contrast: more) {
  :root {
    --nerv-orange: #FFB030;
    --alert-red: #FF6050;
    --data-green: #40FF40;
  }
}

Composition Rules

The void is the default. Elements emerge from blackness, not sit on a surface.
Color = function. If you can't name why something is orange vs green, it's wrong.
Density = authority. More data on screen = more credible. Don't spread things out.
Alignment is sacred. Monospaced columns must align. Pixel-level precision.
Escalation is visual. As severity increases, the UI literally breaks down — color bleeds, pixelation increases, animation intensifies.
Everything is labeled. Scale bars, grid coordinates, sample numbers, pattern types. If it's on screen, it has an identifier.
Bilingual is institutional, not decorative. Japanese text means the organization operates in Japanese. It's not wallpaper.
The CRT texture is always present. Scanlines, vignette, subtle phosphor flicker. The interface exists on a physical monitor inside the fiction.

Publisher	TheGreatGildo
Repository	`nerv-ui`
Skill name	`nerv-ui`
Stars	231
Forks	13
Bundled files	Instructions only
License	MIT
Links	Skill source Repository

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

NERV UI — Operations Console Aesthetic

Design Tokens

Color Palette

Typography

Type Scale

CRT / Scanline Texture Layer

Grid Systems

Hex Grid Scanner

Measurement Grid Overlay

Axis Scale (Y-axis ruler)

Components

Data Table (Column-Aligned Terminal)

Command/Response Block

Alert Banner (Full-Width Warning)

Hazard Stripe Pattern

Institutional Label Block

Neuron Inventory (Data Cascade)

System Boot / Diagnostics Block

Access Panel (Lock/Permission)

Tactical Map Overlay

Thermal Degradation State

Waveform Display

Navigation (Minimal)

Buttons

UI States — Escalating Intensity

Layout

Full-Screen Console

Panel Grid

Ticker Tape (Running Text)

Image Generation Prompts

Background Textures

Subject Overlays (wireframe/thermal)

Alert/Status Graphics

Hex Grid / Scanner

Bilingual Labeling

Anti-Patterns

Accessibility

Composition Rules

Frequently asked questions

Related AI Skills

Set up your own AI workspace now