▲ NERV UI

Sistema de diseño de terminal con estética MAGI (inspirado en la interfaz de Neon Genesis Evangelion). Tokens + componentes en CSS puro, framework-agnóstico. Copia una hoja de estilos y listo — sin build, sin dependencias.

🔴 Demo en vivo: https://owito.github.io/nerv-ui/

Ámbar sobre negro, paneles biselados, franjas de peligro, LEDs de estado, nodos MAGI, alertas por "patrón" y scanlines CRT. Pensado para dashboards, paneles de datos, herramientas de dev y proyectos con carácter.

Instalación

CDN (jsDelivr, sirve el repo de GitHub):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Owito/nerv-ui@main/nerv-ui.css">

o copia el archivo nerv-ui.css a tu proyecto.

o npm:

npm install nerv-ui-css

Uso rápido

<body class="nerv nerv-bg nerv-scanlines">
  <div class="nerv-hazard"></div>

  <div class="nerv-panel nerv-panel--tagged" data-tag="MAGI // VEREDICTO">
    <h1 class="nerv-title">PATRÓN AZUL</h1>
    <button class="nerv-btn">▶ TRANSMITIR</button>
  </div>
</body>

• nerv en un contenedor (o body) aplica tipografía monoespaciada y color base.
• nerv-bg añade el fondo oscuro con rejilla hexagonal (A.T. Field).
• nerv-scanlines (opcional) añade el overlay CRT; respeta prefers-reduced-motion.

Tokens

Todos son variables CSS; sobrescríbelas para tematizar.

| Token | Valor | Uso | |---|---|---| | --nerv-bg | #050503 | Fondo | | --nerv-panel | #0a0a07 | Superficies | | --nerv-amber | #FF7A18 | Color primario / texto | | --nerv-amber-hi | #FFB300 | Énfasis / títulos | | --nerv-amber-dim | #8a4d16 | Texto secundario | | --nerv-red | #F0321E | Alerta / "Patrón Azul" | | --nerv-green | #35FFA0 | OK / hazard / acento | | --nerv-line | rgba(255,122,24,.32) | Bordes | | --nerv-mono | monospace stack | Tipografía | | --nerv-cut | 14px | Tamaño del bisel de esquina |

/* Ejemplo de re-tematizado (verde fósforo) */
:root { --nerv-amber:#39FF14; --nerv-amber-hi:#7CFF00; }

Componentes

| Clase | Descripción | |---|---| | .nerv-panel · .nerv-panel--tagged[data-tag] | Panel biselado, con etiqueta opcional en el borde | | .nerv-hazard · --amber · --red | Franja de peligro diagonal | | .nerv-btn · .nerv-btn--ghost | Botones biselados | | .nerv-field · .nerv-label | Inputs / selects | | .nerv-led · --warn · --alert | Indicador de estado con glow | | .nerv-node | Tarjeta tipo nodo MAGI | | .nerv-alert · --blue · --green | Caja de alerta por "patrón" | | .nerv-gauge (__track / __marker / __scale) | Medidor horizontal | | .nerv-range (__track / __mid) | Barra de rango P25–P75 | | .nerv-tag | Chip / etiqueta pequeña | | .nerv-title · .nerv-kicker · .nerv-eyebrow · .nerv-kata | Tipografía | | .nerv-blink | Utilidad de parpadeo (se desactiva con reduced-motion) |

Consulta index.html para ejemplos de cada componente.

Accesibilidad

• Animaciones (scanlines, parpadeo) se desactivan con prefers-reduced-motion: reduce.
• La paleta prioriza contraste ámbar-sobre-negro; verifica el contraste al re-tematizar.

Créditos y licencia

Código bajo MIT — úsalo libremente, incluso comercialmente.

⚠️ Aviso: "NERV", "MAGI" y Neon Genesis Evangelion son marcas de sus respectivos titulares (Khara/Gainax). Este proyecto es un homenaje fan-made, no oficial y sin afiliación. Eres responsable del uso que le des a nombres, marcas y estética en tus productos.

Hecho con vibe coding. Extraído del proyecto SUELDAZO // MAGI.