36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
# 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:
|
|
|
|
```css
|
|
.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.
|