64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
# Estándares - UI/UX Diseño Executive Suite / Kinetix
|
|
|
|
Este documento establece la guía de estilos visuales e interactivos de la intranet corporativa Kinetix, adaptada al **Executive Suite Design System**.
|
|
|
|
---
|
|
|
|
## 1. Paleta de Colores (Diseño Elegante y Sofisticado)
|
|
El diseño evoluciona de un fondo oscuro a una combinación de fondos claros premium (Ivory/Blanco cálido) con tarjetas oscuras sofisticadas en tonos joya y acentos dorados/índigo.
|
|
|
|
### Fondo y Superficies (Light Mode)
|
|
- **Fondo Principal (Ivory):** `#F5F4F1`
|
|
- **Superficie Principal (White):** `#FFFFFF`
|
|
- **Superficie Secundaria (Warm Grey):** `#F0EEE9`
|
|
|
|
### Tarjetas Joya (Blackjack System)
|
|
Tarjetas de fondo oscuro profundo utilizadas para resaltar elementos clave:
|
|
- **Azul Marino (Navy):** `#0D1B2A`
|
|
- **Ciruela (Plum):** `#1A0E2E`
|
|
- **Verde Viridian (Forest):** `#0A2520`
|
|
- **Marrón Ébano (Espresso):** `#1C0E08`
|
|
|
|
### Acentos de Lujo y Elegancia
|
|
- **Oro Antiguo (Gold Luxe):** `#C9973C` (utilizado para botones primarios, bordes y foco)
|
|
- **Índigo Profundo (Indigo Rich):** `#3730A3` (acentos interactivos y botones secundarios)
|
|
- **Zafiro (Sapphire):** `#1E3A8A`
|
|
- **Esmeralda Profundo (Emerald Deep):** `#065F46`
|
|
|
|
---
|
|
|
|
## 2. Componentes y Efecto Glassmorphism
|
|
El efecto de cristal se adapta para ofrecer limpieza y legibilidad sobre el fondo claro, utilizando bordes sutiles y sombras suaves.
|
|
|
|
```css
|
|
.glass-panel {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 1px 3px rgba(15, 13, 10, 0.06),
|
|
0 8px 24px rgba(15, 13, 10, 0.06);
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
```
|
|
|
|
### Tarjetas Blackjack (`.card-blackjack`)
|
|
Tienen un borde interno fino, un leve zoom al pasar el cursor y sombras tridimensionales al ser interactivas:
|
|
```css
|
|
.card-blackjack {
|
|
position: relative;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Botones, Entradas e Interactividad
|
|
- **Botón Primario (Gold):** Gradiente de oro (`#C9973C` a `#A67C28`) con sombras proyectadas.
|
|
- **Botón Secundario (Indigo):** Sólido índigo (`#3730A3`) para acciones de flujo secundario.
|
|
- **Entradas Luxe (`.input-luxe`):** Bordes completamente redondeados, foco en color oro con un anillo suave de resplandor.
|
|
- **Micro-animaciones:** Todas las transiciones de tarjetas, botones y campos interactivos deben durar entre `0.2s` y `0.35s` con curvas suavizadas (`ease` o `cubic-bezier`).
|
|
- **Tipografía Premium:** Títulos en fuente **Inter** (peso de 900 para máxima jerarquía) y texto de cuerpo en **Outfit** para asegurar elegancia y alta legibilidad.
|