Design System v1.0 — Lumina Analytics

Sistema de Diseño
Narrativo

Cada dato que Lumina muestra es el inicio de una historia. Este sistema de diseño convierte interfaces analíticas en experiencias que generan claridad, confianza y acción.

ClienteLumina SaaS Analytics
Versión1.0.0
AccesibilidadWCAG 2.2 AA
PlataformasWeb · Figma · Universal
SistemaStorytelling DS
01 — Contexto y Objetivo

El problema que resolvemos

Lumina presenta datos de marketing B2B a managers y CMOs. El reto no es mostrar los números — es que el usuario sienta que acaba de descubrir algo valioso cada vez que abre el dashboard.

Intención de diseño

Cada pantalla de Lumina debe contar una historia en tres actos: contexto (¿dónde estás?), tensión (¿qué cambió?) y resolución (¿qué debes hacer?). El diseño guía esa narrativa sin que el usuario tenga que interpretarla.

02 — Tokens y Fundaciones

Sistema de tokens

Los tokens son el vocabulario del diseño. Usar siempre el nombre semántico, nunca el valor raw.

Tokens de Color

Primary
--primary · #3B82F6 · Acciones, CTAs, links
Secondary
--secondary · #8B5CF6 · Accentos narrativos
Success
--success · #16A34A · Crecimiento, logros
Warning
--warning · #D97706 · Atención requerida
Danger
--danger · #DC2626 · Alerta crítica
Text
--text · #111827 · Cuerpo y títulos

Tokens de Tipografía

Display / H1 Abril Fatface · 3rem
Lumina
H2 / Section Abril Fatface · 1.75rem
Tus datos cuentan
Body · md Inter · 1rem · 400
Las conversiones aumentaron un 34% esta semana gracias a la campaña de remarketing.
Caption Inter · 0.875rem · muted
Actualizado hace 3 minutos · Fuente: Google Ads
Label · caps JetBrains Mono · 0.75rem
CONVERSIONES TOTALES

Escala de Espaciado

Base 4px · multiplicadores: 1×, 2×, 3×, 4×, 6×, 8×

sp-1 · 4px
sp-2 · 8px
sp-3 · 12px
sp-4 · 16px
sp-6 · 24px
sp-8 · 32px
Regla: nunca usar valores arbitrarios. Todo padding, gap y margin debe referenciar un token de la escala.

Radios y Elevación

sm · 4px
md · 8px
lg · 16px
xl · 24px
Usar --radius-md para cards y contenedores principales. --radius-sm para elementos inline (badges, chips).
03 — Componentes Narrativos

Anatomía de componentes

Cada componente es un capítulo de la historia. Aquí sus estados, variantes y comportamiento interactivo.

Insight Card

Presenta el hallazgo más importante de un conjunto de datos. Siempre: contexto → número → qué significa.
Campaña · Google Ads · Última semana
Las conversiones crecieron un 34% vs. semana anterior
El segmento "Manager PYME 30-45" respondió especialmente bien al nuevo copy. CPC bajó de €2,10 a €1,43.
▲ +34% vs sem. anterior
Anatomía: label de contexto (mono) → titular narrativo (display font) → cuerpo explicativo → delta badge. El gradiente de fondo señaliza siempre el insight más relevante de la vista.

KPI Strip

Fila de métricas secundarias que contextualizan el insight principal. Máximo 4 KPIs por strip.
Sesiones
12.4K
▲ +18%
Conv. Rate
4.7%
▲ +1.2pp
CPA
€8.30
▼ −€3.20
ROAS
5.8×
▲ +0.9×
Regla: el delta debe siempre tener dirección (▲/▼) y color semántico. Un CPA bajando es success, aunque el número sea menor.

Action Button — Estados

El botón primario es el punto de resolución narrativa: siempre debe responder a "¿y ahora qué hago?"
default
hover
focus
disabled
secondary
ghost

Toast Notifications

Las notificaciones contextualizan el sistema. Siempre: icono → título accionable → descripción breve.
✓
Informe exportado con éxito
Tu PDF de 12 páginas está listo para descargar.
⚠
Datos sin actualizar hace 6h
Revisa la conexión con Google Analytics 4.
✕
Presupuesto al 94% — acción requerida
La campaña FB Ads agotará el presupuesto en ≈3h.
ℹ
Nuevo segmento disponible
Lumina AI detectó un patrón en usuarios recurrentes.
04 — Accesibilidad WCAG 2.2 AA

Criterios y tests

Cada criterio de accesibilidad debe ser verificable en code review. Sin reglas ambiguas.

Criterio Componente Regla Test Estado
1.4.3 Texto / Fondo Contraste mínimo 4.5:1 para texto normal; 3:1 para texto grande (≥18px o ≥14px bold) axe-core / Lighthouse PASS
2.4.7 Focus Visible Todo elemento interactivo must tener outline de 3px sólido en --primary con offset 2px al recibir foco por teclado Tab manual + `:focus-visible` PASS
2.1.1 Keyboard Todos los componentes interactivos navegables con Tab/Shift+Tab; activables con Enter/Space Test manual sin ratón PASS
1.3.1 Semántica Las Insight Cards deben usar `
` con `aria-label` descriptivo. KPIs usar `
/
/
`
 axe + screen reader PASS
1.4.1 Deltas / Color Los deltas positivo/negativo NUNCA deben depender únicamente del color: usar ▲/▼ + color semántico Simulación daltonismo PASS
2.5.3 Touch Target Área mínima de toque 44×44px en móvil/tablet. Aplica a todos los botones, chips y elementos de lista Pending tablet QA REVISAR
05 — Estándares de Contenido y Tono

Cómo habla Lumina

El tono es conciso, confiado y orientado al "aha moment". Nunca técnico sin contexto, nunca vago.

Hacer
  • Titular que revela el insight: "Las conversiones subieron 34%"
  • Contexto inmediato: a qué período, campaña o segmento aplica
  • Acción clara: "Ver desglose por canal" o "Duplicar presupuesto"
  • Números con unidades explícitas: €, %, ×, h, pp (puntos porcentuales)
  • Comparación temporal siempre presente: "vs. sem. anterior"
  • Verbos activos en CTAs: "Exportar", "Analizar", "Compartir"
No hacer
  • "Los datos muestran resultados interesantes" — vago, sin valor
  • "N/A" o "—" sin explicación de por qué no hay dato
  • Titulares pregunta: "¿Están subiendo tus conversiones?" — débil
  • Abreviaturas sin definir: CTR, ROAS, CVR la primera vez sin tooltip
  • CTA genérico "Click aquí" o "Ver más" sin especificar qué
  • Fechas ambiguas: "Reciente", "Última vez" — siempre timestamp exacto
06 — Anti-patrones y Migración

Lo que rompe la narrativa

Estos errores convierten una historia en una tabla de datos. Identificarlos en code review antes de merge.

Anti-patrón
Tabla densa como vista principal — 20+ columnas sin jerarquía visual, sin insight destacado. El usuario escanea pero no entiende.
Corrección
Insight Card + KPI Strip como header. La tabla pasa a ser vista secundaria "Ver datos completos".
→
Anti-patrón
Color rojo en un KPI que bajó su valor, aunque bajar sea bueno (ej. CPA, tasa de rebote). Confunde la narrativa semántica.
Corrección
El color semántico debe reflejar si el cambio es positivo/negativo PARA EL NEGOCIO, no si el número es mayor o menor.
→
Anti-patrón
Tipografía inconsistente: mezclar Inter y Abril Fatface en el mismo nivel jerárquico. Rompe la escala de atención.
Corrección
Abril Fatface solo para titulares de insight (nivel H1/H2). Inter para todo el cuerpo y UI chrome. JetBrains Mono para labels y datos.
→
Anti-patrón
Botones sin estado focus-visible. Los usuarios de teclado pierden el cursor. Viola 2.4.7 WCAG.
Corrección
Añadir :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } a todos los elementos interactivos.
→
Anti-patrón
Spacing con valores arbitrarios (px: 7, 13, 22…). Rompe el ritmo visual y genera inconsistencia entre componentes.
Corrección
Usar exclusivamente la escala 4/8/12/16/24/32 mediante los tokens CSS --sp-1 a --sp-8. Si un valor no cabe en la escala, revisar el diseño.
→
07 — Checklist QA

Gates de calidad para code review

Este checklist debe completarse antes de aprobar cualquier PR que toque la UI de Lumina.

🎨

Tokens y Fundaciones

Todos los colores usan variables CSS (--primary, --success…), no valores hex directos
Spacing usa tokens --sp-* de la escala 4/8/12/16/24/32
Border radius usa --radius-sm/md/lg/xl, no px arbitrarios
Tipografía respeta la jerarquía: Abril Fatface solo en H1/H2 de insight
♿

Accesibilidad WCAG 2.2 AA

Contraste ≥4.5:1 verificado con axe-core (0 violaciones nivel AA)
Todos los botones/links tienen :focus-visible con outline --primary
Deltas usan símbolo ▲/▼ + color, no solo color
Insight Cards tienen aria-label descriptivo con el insight en texto plano
📖

Narrativa y Contenido

Titulares de insight revelan el dato, no lo preguntan ni lo eluden
Cada KPI tiene comparación temporal visible (vs. período anterior)
CTAs usan verbo activo + objeto: "Exportar CSV", "Ver desglose"
Sin abreviaturas sin definir en primera aparición
📱

Responsive y Rendimiento

Insight Card legible en viewport 375px (mobile) sin overflow
Touch targets ≥44×44px en componentes interactivos (tablet+)
Fuentes cargadas con font-display:swap para evitar FOIT
Sin layout shift al cargar datos async (skeleton states implementados)
⚠️

Anti-patrones

Sin colores hardcoded fuera del sistema de tokens
Sin mezcla de familias tipográficas en el mismo nivel jerárquico
Semántica de color refleja contexto de negocio, no dirección del número
Sin tablas densas como vista principal (jerarquía: insight → KPI → tabla)