wave-ai/standards/04-ui-ux-neon.md

Estándares - UI/UX Diseño Cyberpunk / Neon / Vercel

Este documento establece la guía de estilos visuales de la intranet corporativa Kinetix.

---

1. Paleta de Colores (Estilo Neón)

Para lograr el estilo neón premium e interactivo, la interfaz debe utilizar un fondo oscuro profundo con bordes y brillos acentuados en colores cian, magenta y verde neón.

• Fondo Principal (Deep Dark): HSL(240, 10%, 4%)
• Fondo Secundario (Card Background): HSL(240, 10%, 9%)
• Acento Primario (Cian Neón): HSL(180, 100%, 50%)
• Acento Secundario (Magenta Neón): HSL(320, 100%, 50%)
• Acento de Éxito (Verde Neón): HSL(140, 100%, 50%)

---

2. Efecto Glassmorphism (Vercel Style)

Utilizar bordes ultra finos semitransparentes combinados con desenfoque de fondo (backdrop-filter) para crear profundidad tridimensional en los paneles:

.glass-panel {
  background: rgba(15, 15, 20, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

---

3. Micro-animaciones e Interactividad

• Hover Glow: Los botones interactivos y tarjetas deben tener transiciones suaves (transition: all 0.3s ease) que agreguen un brillo sutil al pasar el cursor.
• Transición de Rutas: Usar animaciones fluidas en Angular al alternar vistas.
• Efectos de Foco: Utilizar anillos de foco cian neón en entradas de texto y controles interactivos para garantizar accesibilidad.