# INNOVIUM — Design System > **Este documento es la fuente única de verdad visual para Innovium.** > Cualquier pantalla, componente o vista que se construya debe seguir estas reglas. No improvisar paletas, no usar Bootstrap, no caer en estilos genéricos. La estética está fijada — replicarla con precisión es parte del trabajo. **Producto:** Innovium · SaaS multi-tenant para funerarias **Empresa:** Crono Systems · Santiago, Chile **Versión:** 1.0 · Abril 2026 --- ## 0. Filosofía Innovium se ve como un producto de 2026, no como un sistema heredado. Estamos en la liga visual de **Linear, Vercel, Stripe, Arc, Raycast, Notion AI, Framer**. No en la de Bootstrap, AdminLTE, ni dashboards de los 2000s. Tres principios guían cualquier decisión visual: 1. **Restraint con personalidad.** Mucho espacio en blanco (o negro), pocos elementos por pantalla, pero cada uno con identidad clara. No saturar. No decorar por decorar. 2. **Profundidad sin 3D estridente.** Capas que parecen flotar, sombras suaves multi-nivel, glassmorphism. No volumen exagerado, no skeumorfismo, no degradados saturados. 3. **Tipografía con voz.** Una display serif (Georgia) que aporta carácter humano + un sans neutro para body. La tipografía hace la mayor parte del trabajo estético. --- ## 1. Soporte de temas — claro y oscuro El producto soporta **dark mode** (default, look hero) y **light mode** (alternativa diurna). Los componentes deben implementarse para ambos modos desde el día uno usando variables CSS o el modo `dark:` de Tailwind. - **Default app**: dark - **Pantallas de campo (tablet, OLED)**: dark - **PDFs generados, recibos, contratos impresos**: siempre en light - **Preferencia del usuario**: persistente, accesible desde el menú de perfil --- ## 2. Paleta de colores ### Neutros (escala completa, dark + light) | Token | Hex | Uso | |---|---|---| | `ink-950` | `#0A0A14` | Background app dark mode (base) | | `ink-900` | `#0F0F18` | Texto principal sobre claro / surface superficial | | `ink-800` | `#15151E` | Surface dark cards (gradient end) | | `ink-700` | `#1A1A24` | Surface dark cards (gradient start) | | `ink-600` | `#27272A` | Texto secundario sobre claro | | `ink-500` | `#52525B` | Texto muted / labels | | `ink-400` | `#71717A` | Texto muted intenso, eyebrows muted | | `ink-300` | `#A1A1AA` | Texto sobre dark, secundario | | `ink-200` | `#E4E4E7` | Texto sobre dark, body / borders light | | `ink-100` | `#F1F1F4` | Surface light alternativa | | `ink-50` | `#FAFAFA` | Texto principal sobre dark | | `surface-light` | `#F8F7FB` | Background app light mode | | `surface-card` | `#FFFFFF` | Cards en light mode | ### Accent colors (5 colores con par soft → strong para gradientes) Cada color tiene un **soft** (más claro, para fondos translúcidos y stops de gradiente iniciales) y un **strong** (más saturado, para texto, bordes de acento, stops finales). | Color | Soft | Strong | Significado de uso | |---|---|---|---| | **Purple** (primario) | `#A78BFA` | `#7C3AED` | Acción primaria, CTAs, branding, "tenant" | | **Cyan** | `#22D3EE` | `#0891B2` | Información, datos, técnico | | **Pink** | `#F472B6` | `#DB2777` | Alertas, atención, acompañamiento al duelo | | **Green** | `#34D399` | `#059669` | Éxito, confirmado, activo, "live" | | **Orange** | `#FB923C` | `#EA580C` | Advertencia, storage/archivos, en proceso | Color extra ocasional: **Yellow** (`#FBBF24` → `#F59E0B`) para "borrador" / draft. ### Reglas de uso - **Purple es el color de marca.** El primary CTA siempre es purple gradient. El item activo en sidebar siempre tiene barra lateral purple. - **No mezclar más de 2 accents** en una misma pantalla, salvo en KPI cards (donde cada card puede llevar el suyo). - **Sobre dark mode:** los accents se usan al 100% saturación. Para fondos de pills / icon backgrounds se usan al 15-20% de opacidad. - **Sobre light mode:** los accents al 100% para text/border, al 8-12% para backgrounds suaves. - **Nunca** usar gris corporativo plano (`#3B82F6`, `#0066CC`, ese tipo de azules de banca). Banned. ### Mesh gradients (para fondos hero y pantallas de marca) El fondo dark hero NO es plano — es un **mesh gradient** compuesto por 3 radial gradients superpuestos: ```css background: #0A0A14; background-image: radial-gradient(circle at 20% 15%, rgba(124, 58, 237, 0.55), transparent 60%), radial-gradient(circle at 85% 35%, rgba(6, 182, 212, 0.45), transparent 50%), radial-gradient(circle at 60% 85%, rgba(236, 72, 153, 0.35), transparent 55%); ``` Para pantallas de app (dashboard, listas), usar mesh **más suave** (opacidades 0.20-0.25 en vez de 0.45-0.55). --- ## 3. Tipografía ### Familias ```css --font-display: Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; ``` - **Georgia** — para titulares, números grandes (KPIs), branding, citas, montos. Aporta personalidad humana y elegancia editorial. - **System sans** — para todo el body, labels, botones, navegación. Neutro y legible. - **JetBrains Mono** — para IDs (CT-2026-1247), códigos hash, valores técnicos en metadata, códigos de error, números de RUT en algunos contextos. **No usar Inter como display.** Inter es perfecto para body y labels, no como hero typography. Innovium se distingue por usar Georgia donde otros usan Inter. ### Escala (mobile-first, en px de referencia) | Token | Tamaño | Uso | |---|---|---| | `text-2xs` | 10-11px | Eyebrows, char-spacing wide | | `text-xs` | 12px | Micro-labels, table headers, footers | | `text-sm` | 13-14px | Body small, secondary text | | `text-base` | 14-16px | Body principal | | `text-lg` | 18-20px | Subheaders, intro paragraphs | | `text-xl` | 22-24px | H4 | | `text-2xl` | 28-32px | H3, KPI numbers (Georgia) | | `text-3xl` | 36-40px | H2 (Georgia) | | `text-4xl` | 48-56px | H1 (Georgia) | | `text-5xl` | 76-100px | Display hero (login, portada) | ### Letter-spacing - **Eyebrows / labels uppercase**: `tracking-widest` (0.1em - 0.15em) - **Display Georgia**: `tracking-tight` (-0.02em a -0.03em) - **Body**: normal ### Weights - Georgia: 400 base, 500 énfasis suave, 600 fuerte (no usar 700, queda pesado en serif) - Sans: 400 body, 500-600 strong, 700 emphasis fuerte - Mono: 500-700 ### Patrón de jerarquía típico (usado en mockups) ``` EYEBROW EN UPPERCASE ← text-xs, weight 600, letter-spacing widest, color accent Título grande en Georgia. ← text-3xl/4xl, weight 400, color ink-50/ink-900 Subtítulo o descripción. ← text-sm/base, color ink-300/ink-500 ``` Este patrón se ve en login, dashboard, portada y todas las landing screens. --- ## 4. Espaciado y radius ### Border radius | Token | Valor | Uso | |---|---|---| | `rounded-md` | 8px | Pills pequeños (<32px alto), tags | | `rounded-lg` | 10-12px | Inputs, small cards | | `rounded-xl` | 14-16px | Botones, medium cards | | `rounded-2xl` | 18-22px | Large cards (KPI, dashboard widgets) | | `rounded-3xl` | 24-28px | Hero cards (login card) | | `rounded-full` | 9999px | Pills grandes, badges, avatars | **Bordes duros (rounded-sm o nada) están prohibidos** salvo en separadores horizontales finos. ### Spacing (Tailwind scale, base 4px) Generosidad por defecto. Mucho aire entre elementos. - `space-x/y-2` (8px) — entre elementos muy relacionados - `space-x/y-3` (12px) — botones internos, formulario denso - `space-x/y-4` (16px) — entre items de lista - `space-x/y-6` (24px) — entre secciones cercanas - `space-x/y-8` (32px) — entre cards - `space-x/y-12` (48px) — entre secciones distintas - `space-y-16/20` (64-80px) — entre bloques mayores en landing Padding interno de cards: **24-32px** (lg/xl). Nunca menos de 16px. --- ## 5. Sombras Sombras siempre **suaves** y **multi-capa**. Una sombra sola no, dos como mínimo. ```css /* Light mode */ --shadow-sm: 0 1px 2px rgba(15,15,24,0.05); --shadow-md: 0 4px 12px rgba(15,15,24,0.08), 0 2px 4px rgba(15,15,24,0.04); --shadow-lg: 0 8px 24px rgba(15,15,24,0.10), 0 4px 8px rgba(15,15,24,0.04); --shadow-xl: 0 12px 40px rgba(15,15,24,0.15), 0 6px 12px rgba(15,15,24,0.06); /* Dark mode (más fuertes) */ --shadow-dark-md: 0 4px 16px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.20); --shadow-dark-lg: 0 8px 32px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.20); /* Glow para CTAs purple */ --shadow-glow-purple: 0 0 24px rgba(167,139,250,0.40), 0 4px 12px rgba(124,58,237,0.30); ``` **Hover en cards:** `lift` de 2-4px (`translateY(-2px)`) + sombra una capa más alta. **Active (clicked):** `scale(0.98)`, sin sombra interna. **Prohibido:** sombras duras de 1px tipo `box-shadow: 0 1px 0 #000`. Eso es 2003. --- ## 6. Glassmorphism Componente central del lenguaje visual de Innovium. Se usa en: - Card de login sobre el mesh gradient - Sidebar (light glass sobre dark) - Modales sobre fondo opaco - Badges y pills de estado ### Glass dark (sobre fondo oscuro con mesh) ```css .glass-dark { background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.40); } ``` ### Glass light (sobre surface clara) ```css .glass-light { background: rgba(255,255,255,0.70); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(15,15,24,0.06); box-shadow: 0 8px 32px rgba(15,15,24,0.08); } ``` **Fallback**: en navegadores sin `backdrop-filter`, usar fondos sólidos al 95%. --- ## 7. Iconografía ### Librería **Lucide Icons** (`lucide-react`, `lucide-static`, o SVGs sueltos). Es la línea visual correcta: stroke fino (1.5-2px), terminaciones redondeadas (`stroke-linecap: round`), uniones redondeadas (`stroke-linejoin: round`). Alternativas aceptables: **Phosphor Icons** (en peso `regular`). ### Reglas - Stroke siempre `1.5px` o `2px`. Nunca rellenos. - Tamaños estándar: `16px`, `20px`, `24px`. Nada de 14 ni 22. - Color del icono = color del texto adyacente, salvo cuando es un icono dentro de un badge/pill con accent color. ### Prohibido - Emojis como iconos primarios en UI funcional. (Sí están permitidos en módulos descriptivos donde el emoji es decoración aspiracional, ej: 🕊️ en una card de "Operaciones del día" en una pantalla de marketing.) - Font Awesome 4/5 estilo solid filled. Anticuado. - Iconos de Material Design rellenos. Demasiado Google. --- ## 8. Componentes — especificación detallada ### 8.1 · Button #### Primary ``` Background: linear-gradient(135deg, #A78BFA, #7C3AED) Text: #FFFFFF, weight 600, size 13-14 Padding: 14px 24px (height ~44-48px en desktop) Border-radius: 12-14px Shadow: 0 0 24px rgba(167,139,250,0.4), 0 4px 12px rgba(124,58,237,0.3) Hover: brightness(1.08), shadow más intensa Active: scale(0.98) ``` #### Secondary (sobre dark) ``` Background: rgba(255,255,255,0.04) Border: 1px solid rgba(255,255,255,0.12) Text: #FAFAFA, weight 600 Padding: igual que primary Border-radius: 12-14px Hover: background rgba(255,255,255,0.08) ``` #### Secondary (sobre light) ``` Background: #F1F1F4 Border: 1px solid #E4E4E7 Text: #0F0F18, weight 600 ``` #### Ghost ``` Sin background, sin border. Solo color. Para acciones tertiary. Hover: background tenue del accent al 8-10% ``` #### Destructive ``` Mismo patrón que primary, pero gradient pink: #F472B6 → #DB2777 ``` ### 8.2 · Input field ``` Height: 48-52px en desktop, 44px en mobile Padding-x: 16px (más 32px de espacio para icono left si aplica) Background: rgba(255,255,255,0.04) en dark / #FFFFFF en light Border: 1px solid rgba(255,255,255,0.10) / #E4E4E7 Border-radius: 12px Text: 14px, color #FAFAFA / #0F0F18 Placeholder: color #71717A Icon left (opcional): 16px, color #A78BFA (purple soft) Focus state: border #7C3AED, ring 3-4px rgba(124,58,237,0.15) Error state: border #DB2777, helper text #F472B6 ``` Encima del input siempre va un **label uppercase eyebrow** estilo: ``` CORREO ← text-xs, weight 600, color #71717A, tracking 0.5em ``` ### 8.3 · Card (KPI) ``` Width: ~280-300px en grid de 4 Height: 160px aprox Padding: 24px Background: linear-gradient en dark (rgba(26,26,36,0.92) → rgba(21,21,30,0.96)) Border: 1px solid rgba(255,255,255,0.08) Border-radius: 20px Shadow: dark-md Layout interno: [Icon 44x44 con background accent al 15%, rounded-12px] [Trend pill arriba derecha] EYEBROW EN UPPERCASE ← text-xs purple/cyan/etc $48.250.000 ← text-3xl Georgia, color ink-50 descripción secundaria ← text-xs, color ink-300 ``` Trend pill arriba a la derecha: - Verde (`+12.4%`): bg `rgba(52,211,153,0.15)`, text `#34D399` - Pink (`24 venc.`): bg `rgba(244,114,182,0.15)`, text `#F472B6` - Live (`EN VIVO`): bg `rgba(52,211,153,0.15)`, dot pulsing verde ### 8.4 · Card (contenido) ``` Padding: 32px Background: linear-gradient dark / blanco light Border: 1px solid rgba(255,255,255,0.08) / #E4E4E7 Border-radius: 20-24px Shadow: dark-md / light-md ``` ### 8.5 · Sidebar Estilo Linear: ``` Width: 240-260px Background: #0F0F18 al 70% en dark / #FAFAFA en light Border-right: 1px solid rgba(255,255,255,0.06) / #E4E4E7 Estructura: - Logo (28-32px) + nombre app (Georgia) - Tenant switcher chip (40-48px alto, glass) - Search input compacto con kbd ⌘K - Sección "PRINCIPAL" eyebrow + items - Sección "GESTIÓN" eyebrow + items - User card al fondo Item de menú: Padding: 10px 16px Border-radius: 10px Icono left (16-18px) + texto (13-14px) Estado normal: color ink-300, sin background Hover: background rgba(255,255,255,0.04) Active: background rgba(124,58,237,0.15) + barra lateral 3px purple + texto purple soft Badge counter (opcional, derecha): text-xs purple weight 600 ``` ### 8.6 · Pill / Badge ``` Height: 22-28px según contexto Padding-x: 10-14px Border-radius: rounded-full Text: text-xs, weight 600 o 700, uppercase opcional ``` Variantes: - **Status active**: bg accent al 15%, text accent strong. Dot 4px del color al lado. - **Live (pulsing)**: dot verde sólido + dot fantasma 8px al 30% opacidad. - **Crítico**: bg rgba(167,139,250,0.20), border 1px rgba(167,139,250,0.50), text purple. Uppercase. ### 8.7 · Stepper (ej: pasos del contrato) Horizontal, espaciado uniforme: ``` Steps completados: Círculo 28px lleno verde gradient, checkmark blanco 14px Conector siguiente: línea 2.5px verde sólida (si llegó hasta aquí) Step activo: Círculo 28px lleno purple gradient Número blanco bold Conector siguiente: línea 2.5px gris (#E4E4E7) Steps futuros: Círculo 28px gris (#E4E4E7) Número en gris (#A1A1AA) Label debajo del círculo: text-xs, color ink-500, weight 500. Label del activo: text-xs purple weight 700. ``` ### 8.8 · Signature canvas Caja con borde dashed purple: ``` Aspect ratio: ~16:7 horizontal Background: rgba(255,255,255,0.02) en dark Border: 2px dashed rgba(167,139,250,0.40) Border-radius: 16px Padding: 24px Estado vacío: texto centro "Firma del contratante" en ink-500. Estado con firma: el trazo dibujado en gradient purple, stroke 3px, line-cap round, line-join round. Después de firmar, mostrar metadata pills debajo: TIMESTAMP (24/04/2026 11:48 — JetBrains Mono) IP DEL FIRMANTE (200.83.114.27) HASH SHA-256 (a3f2c9...8e1b4d) Cada uno en card pequeña (60px alto), background rgba(255,255,255,0.03), label eyebrow ink-300, valor en JetBrains Mono accent color. ``` ### 8.9 · Tabla ``` Header row: background: transparente text: text-2xs uppercase, weight 600, color ink-400, letter-spacing 0.5em padding: 16px 24px border-bottom: 1px solid rgba(255,255,255,0.04) / #E4E4E7 Row: padding: 20-24px border-bottom: 1px solid rgba(255,255,255,0.04) / #F1F1F4 hover: background rgba(255,255,255,0.02) / #F8F7FB Avatar circular 24-28px en columnas tipo "cliente": gradient accent + iniciales blancas bold. ID en columnas: JetBrains Mono purple-soft. Status en última columna antes de "hora": pill estilo 8.6. ``` ### 8.10 · Charts #### Area chart (tendencia) - Línea: stroke 3px del color principal accent - Fill: gradient vertical desde accent al 60% hasta accent al 2% opacidad - Si comparativa: dos áreas superpuestas con accents distintos (purple actual + cyan anterior) - Grid: lines dashed, opacity 0.04 - Datos points: círculos 3-4px sólidos, último punto destacado 5px con glow - Tooltip: dark surface, border accent, label en mono, valor en Georgia #### Donut chart - Stroke-based segments (no path, usar `stroke-dasharray`) - Stroke width: 22px - Radius: 65px típico - Cada segmento: gradient accent (soft → strong) - Track: rgba(255,255,255,0.04) - Centro: número grande Georgia + label ink-400 abajo #### Bar chart - Bars con esquinas superiores redondeadas (rx 8) - Fill: gradient vertical (soft top → strong bottom) - Grid mínimo, prefer no axis lines **Librerías recomendadas** (en orden de preferencia): 1. **ApexCharts** — más control de estilos, gradients fáciles 2. **Chart.js** v4 — más universal, requiere plugin para gradients 3. **Recharts** (si React) — declarativo limpio --- ## 9. Patrones de layout ### 9.1 · Landing/Login (split) ``` Pantalla full viewport, dark mode con mesh gradient como fondo. Lado izquierdo (storytelling): - Eyebrow CRONO SYSTEMS (purple) - Wordmark "Innovium" en Georgia gigante con gradient (purple → cyan) - Tagline en 2-3 líneas - Feature pills (4-6) sobre rgba(255,255,255,0.06) Lado derecho (acción): - Glass card centrada, padding 40px - Tenant badge arriba (avatar + nombre funeraria + dominio + dot live) - "Bienvenido" en Georgia - Inputs (email, password) - Remember + Forgot link - Botón primary "Ingresar" con flecha - Footer "Powered by Innovium · Crono Systems" ``` ### 9.2 · Dashboard ``` - Sidebar fija (8.5) - Topbar 88px alto: greeting personal en Georgia ("Buenos días, Ricci.") + descripción + actions (date selector, notif, primary CTA) - Grid de 4 KPI cards (ver 8.3) - Grid de 2 columnas: chart grande izquierda (área) + chart pequeño derecha (donut) - Tabla de últimos contratos full width ``` ### 9.3 · Form multi-step (ej: contrato) ``` - Steps horizontal arriba (8.7) - Card grande centrada con el contenido del step actual - Contenido jerarquizado por subsecciones con dividers dashed muy tenues - Footer fijo con "Volver" (secondary) + "Siguiente" o "Generar contrato" (primary) ``` ### 9.4 · List view ``` - Topbar con título + filtros + search + CTA "Nuevo X" - Filter pills horizontales debajo (estado, fecha, etc.) - Tabla 8.9 o card grid según el contenido - Empty state: icono grande accent al 30%, texto ink-300, CTA primary ``` --- ## 10. Microinteracciones y motion - **Transitions default**: `150ms ease-out` para color/bg/border. `250ms cubic-bezier(0.4, 0, 0.2, 1)` para transform/shadow. - **Hover en cards interactivas**: `translateY(-2px)` + sombra una capa más alta. - **Active en botones**: `scale(0.98)`, transition 80ms. - **Focus-visible en cualquier elemento**: ring 3px del accent del componente al 30% opacidad, offset 2px. - **Loading states**: skeleton screens con shimmer (gradient animado horizontal). NO usar spinners centrales — son anticuados. - **Toast notifications**: slide desde arriba-derecha, glass card 320px, 4s auto-dismiss. - **Modal entrance**: fade + scale 0.96 → 1, 200ms. **Sin motion innecesario.** No animar todo. Solo lo que aporta información (cambio de estado, llegada de notificación, cambio de tab). --- ## 11. Accesibilidad - Contraste mínimo: AA (4.5:1 para texto normal, 3:1 para text grande). Verificar especialmente texto sobre dark glass. - Focus visible siempre, nunca quitar outline sin reemplazo. - Labels asociados a inputs (`