Estándares - UI/UX Diseño Executive Suite / App

Este documento establece la guía de estilos visuales e interactivos de la intranet corporativa App, 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.

.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:

.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.

2.6 KiB Raw Blame History