# InQ ROI — Sistema de Diseño > Documento de referencia visual para Sprint 2+. > Fuente de verdad para la paleta, tipografía y componentes. > Actualizar en cada sprint que modifique la identidad visual. --- ## 1. Identidad de Marca ### Nombre del producto **InQ ROI** — herramienta interna de InQuality para cuantificación de ROI de automatización. ### Regla de ortografía (NO NEGOCIABLE) ``` ✅ InQ ← I mayúscula, n minúscula, Q mayúscula ✅ InQuality ← nombre completo ❌ INQ / Inq / inq / inQ ← cualquiera es bug ``` ### Tagline en footers PDF `"Powered by InQuality"` — obligatorio en todos los footers de PDF. --- ## 2. Paleta Cromática ### 2.1 InQ Orange — Color protagonista | Token Tailwind | CSS Var | Hex | HSL | Uso | |---|---|---|---|---| | `bg-inq-orange` | `--inq-orange` | `#F59845` | 28° 90% 62% | Principal: logo, KPIs hero, CTAs primarios | | `bg-inq-orange-dark` | `--inq-orange-dark` | `#B45309` | 34° 93% 37% | Texto sobre fondos claros, hover de CTAs | | `bg-inq-orange-light` | `--inq-orange-light` | `#FEF3E2` | 36° 95% 88% | Fondos de KPI cards | | `bg-inq-orange-lighter` | `--inq-orange-lighter` | `#FFF8ED` | 36° 100% 94% | Fondos de banner narrativo, hover sutiles | ### 2.2 InQ Magenta — Gradiente identidad | Token Tailwind | CSS Var | Hex | Uso | |---|---|---|---| | `bg-inq-magenta` | `--inq-magenta` | `#ED3E8F` | Segundo color del gradiente identidad | #### Gradiente identidad ```css background: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%); ``` **Uso exclusivo:** KPI Hero "Ahorro proyectado" en PDF y web. NUNCA en bordes, separadores ni fondos secundarios. ### 2.3 Semánticos | Token Tailwind | CSS Var | Hex | Uso | |---|---|---|---| | `bg-success` | `--color-success` | `#16A34A` | Ahorros positivos, payback alcanzado | | `bg-success-light` | `--color-success-light` | `#F0FDF4` | Fondos de mensajes positivos | | `bg-warning` | `--color-warning` | `#F59E0B` | Advertencias, sección transparencia | | `bg-warning-bg` | `--color-warning-bg` | `#FFFBEB` | Fondo de sección transparencia | | `bg-destructive` / `--color-danger` | — | `#EF4444` | Costos altos, valores negativos | | `--color-danger-light` | — | `#FEE2E2` | Fondos de heatmap alto costo | ### 2.4 Heatmap — Paleta saturada (FIJA hasta Sprint 3-4) | Token Tailwind | Hex | RGB | Uso | |---|---|---|---| | `bg-heatmap-low` | `#10B981` | (16, 185, 129) | Actividades de bajo costo | | `bg-heatmap-mid` | `#F59E0B` | (245, 158, 11) | Actividades de costo medio | | `bg-heatmap-high` | `#EF4444` | (239, 68, 68) | Actividades de alto costo | #### Decisión sobre paleta de heatmap **Se mantiene saturada** (verde-ámbar-rojo) en lugar de la variante pastel del brief por dos razones: 1. **Tests E2E calibrados**: los análisis de píxeles del heatmap (`export-pdf.spec.ts`, `validate-dod-etapa4.spec.ts`) tienen umbrales calibrados para estos colores. Cambiar la paleta requiere recalibrar todos esos umbrales. 2. **Visibilidad en pantallas grandes**: el producto se usa en talleres y charlas InQuality proyectadas en pantalla. Los colores saturados mantienen contraste a distancia. Los pasteles se "lavan" a 3+ metros. **Revisión programada**: Sprint 3-4 con feedback real de uso en talleres. **Invariante crítica**: los valores de `tailwind.config.js` `heatmap.*` DEBEN coincidir con las constantes `HEATMAP_LOW/MID/HIGH` en `src/lib/colors.ts`. Si se modifica uno, debe actualizarse el otro. ### 2.5 Neutrales | Hex | Tailwind equivalente | Uso | |---|---|---| | `#0F172A` | `slate-900` | Títulos, números importantes | | `#475569` | `slate-600` | Texto del cuerpo | | `#64748B` | `slate-500` | Labels, metadatos | | `#94A3B8` | `slate-400` | Placeholders, texto muy secundario | | `#E2E8F0` | `slate-200` | Bordes generales | | `#F1F5F9` | `slate-100` | Separadores sutiles | | `#F8FAFC` | `slate-50` | Fondo de la app, canvas BPMN | ### 2.6 Colores que NO usar ``` ❌ #572FA2 Morado primario de CONCILIA — marca hermana, no mezclar ❌ #CB1889 Magenta de CONCILIA ❌ azul shadcn por defecto (221.2 83.2% 53.3%) — reemplazado por InQ orange ``` --- ## 3. Tipografía ### 3.1 Familias ```css /* Primaria — web app y body de PDFs */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; /* Mono — números en tablas, datos financieros */ font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; ``` Tailwind: `font-sans` / `font-mono` ### 3.2 Escala PDF | Elemento | Tamaño | Peso | Tracking | |---|---|---|---| | Logo "InQ ROI" en header | 22px | 700 | −0.8px | | Título de sección | 16px | 500 | normal | | KPI Hero (cifra) | 30px | 700 | −1px | | KPI secundario (cifra) | 16px | 700 | normal | | Body text | 11px | 400 | normal | | Labels en cards | 8px | 500 | 1px uppercase | | Tabla header | 10px | 500 | normal | | Tabla body | 10px | 400 | normal | | Footer | 9px | 400 | normal | ### 3.3 Escala Web App | Elemento | Tamaño | |---|---| | Logo header | 18px / 700 | | Page title | 16px / 500 | | KPI Hero | 28px / 700 | | KPI secundario | 16px / 700 | | Nav / Tabs | 12px / 400-500 | | Body | 12-13px / 400 | | Labels en panels | 10-11px / 400-500 | --- ## 4. Componentes ### 4.1 KPI Hero (gradiente naranja → magenta) ``` Fondo: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%) Padding: 16-18px Border-radius: 6-8px Label: 9-10px / uppercase / letter-spacing 1.2px / white opacity 0.9 Cifra: 28-30px / 700 / letter-spacing −1px / white Subtítulo: 10-11px / white opacity 0.85 ``` Uso: el KPI "Ahorro proyectado a N años" — el más importante del reporte ROI. ### 4.2 KPI Card (secundario, fondo naranja claro) ``` Fondo: #FEF3E2 (inq-orange-light) Padding: 10px 12px Border-radius: 6px Label: 8px / 500 / letter-spacing 1px / color #92400E / uppercase Cifra: 16px / 700 / color #0F172A Delta: 10px / 500 / color #B45309 ``` ### 4.3 Banner narrativo (resumen ejecutivo) ``` Fondo: #FFF8ED (inq-orange-lighter) Border-left: 3px solid #F59845 Padding: 10-12px 14px Border-radius: 0 4px 4px 0 Texto: 11px / 400 / line-height 1.55 / color #475569 ``` ### 4.4 Sección Transparencia Metodológica ``` Fondo: #FFFBEB (warning-bg) Border: 0.5px solid #F59E0B Padding: 12px 14px Border-radius: 6px Título: 11px / 500 / color #92400E / con ícono ⚠ Texto: 10px / 400 / line-height 1.6 / color #78350F ``` 4 condiciones que activan la sección: 1. Actividades `automatable=true` con `automatedCostFixed=0` y `automatedTimeMinutes=0` 2. `automationInvestment=0` 3. `roiAnnualPercent > 1000` (finito) 4. (reservado para futuras reglas) ### 4.5 Tabla comparativa PDF ``` Header row: Fondo: #FFF8ED Border-bottom: 1px solid #F59845 Texto: 10px / 500 / #92400E Body row — automatizable: Fondo: white Body row — no automatizable: Fondo: #F8FAFC Texto: color #64748B (más tenue) Total row: Fondo: #FFF8ED Border-top: 1.5px solid #F59845 Texto: 10px / 500 / #0F172A ``` ### 4.6 Header PDF ``` Layout: flex justify-between Border-bottom: 3px solid #F59845 (pág. 1) / 2px (otras) Padding-bottom: 10-12px Margin-bottom: 14-16px Izquierda: "InQ ROI" 18-22px / 700 / #F59845 Tagline: 9px / letter-spacing 1.5px / #94A3B8 (solo pág. 1) Derecha: "UN PRODUCTO DE" 9px / letter-spacing 1px / #94A3B8 "InQ" 16px / 700 / #475569 "InQuality" 9px / #64748B ``` ### 4.7 Footer PDF ``` Position: absolute bottom 14-16mm Padding-top: 6-8px Border-top: 0.5px solid #E2E8F0 Layout: flex justify-between Font: 9px / 400 / #94A3B8 Izquierda: "InQ ROI" bold #F59845 " · Powered by InQuality · " cliente · fecha Derecha: "Página X de Y" ``` ### 4.8 Badge ⚡ (Automatizable) #### En canvas BPMN overlay ``` Diámetro: 14px Fondo: #F59845 (naranja sólido) Border: 1.5px solid white Posición: { top: -8, left: nodeWidth - 12 } Símbolo: ⚡ blanco 8px ``` Nota: en Sprint 1 el badge usa fondo `#fffbeb` (ámbar-50) con ícono ámbar. La migración a naranja sólido se hace en **Etapa 9** de Sprint 1.5. #### En tablas y leyendas ``` Diámetro: 14px inline Fondo: #F59845 Color: white ``` ### 4.9 Layout híbrido de PDFs (portrait + landscape) Los PDFs combinan orientaciones por página: - **Páginas SIN diagrama**: A4 vertical (210×297mm) — texto, tablas, KPIs - **Página DEL diagrama BPMN**: A4 horizontal (297×210mm) — para que el diagrama ocupe espacio real Implementación jsPDF: `doc.addPage([297, 210], 'landscape')` --- ## 5. Tokens en código ### Web (Tailwind) ```tsx // Colores de marca
// #F59845
// #B45309
// #FEF3E2
// texto naranja
// borde naranja // Gradiente identidad (como style prop — Tailwind no soporta gradientes dinámicos)
// Semánticos
// #16A34A
// #FFFBEB ``` ### PDF (jsPDF) ```typescript // Constante en pdf-sections.ts (a migrar en Etapas 4-8) const PDF_ORANGE: [number, number, number] = [245, 152, 69] // #F59845 const PDF_ORANGE_LIGHT: [number, number, number] = [254, 243, 226] // #FEF3E2 const PDF_MAGENTA: [number, number, number] = [237, 62, 143] // #ED3E8F // Gradiente en jsPDF se simula con pasos (ver pdf-sections-roi.ts) ``` --- ## 6. Reglas de uso — DO / DON'T ### DO ✅ - Usar `bg-primary` / `text-primary` para todos los CTAs — hereda el naranja de `--primary` - Usar gradiente identidad en exactamente 1 KPI Hero por página/vista - Usar `font-mono` para todos los números financieros - Escribir siempre **InQ** con I-n-Q ### DON'T ❌ - Usar `bg-blue-*` donde debería ir naranja InQ - Aplicar el gradiente en más de un elemento por vista - Usar colores de CONCILIA (`#572FA2`, `#CB1889`) - Cambiar los colores del heatmap sin recalibrar los tests E2E --- *Actualizado: Sprint 1.5 Etapa 1 — 2026-05-16*