Referencia única para construir módulos, artefactos e informes con una interfaz coherente, clara y reutilizable en modo claro y oscuro.
La interfaz usa una familia sans-serif de alta legibilidad y una paleta que prioriza el azul tinta y el violeta Altheia.
Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif#172033#6657F5#06B6D4#10B981#F59E0B#F4F6FBEstas medidas reproducen el header de Insight Composer y son obligatorias para los módulos V1.
El lienzo se adapta de forma fluida, manteniendo aire visual suficiente para investigación y operación.
Máximo: 1440 px
Padding desktop: 28 px
Padding móvil: 16 px
Margen exterior obligatorio: 28 px en desktop, 20 px en tablet y 16 px en móvil.
La primera card del módulo nunca puede tocar los bordes del viewport.
2, 3 y 4 columnas con 14 px de separación. Secciones: 20–22 px · interior de panel: 24–28 px · radio principal: 20 px.
Las cards separan contexto, configuración, resultados y recursos. Se usan con fondo blanco, borde tenue y sin exceso de sombras.
Usar en el índice. Incluye icono, título, descripción breve y color de acento. El tag de estado es opcional; se coloca a la derecha del icono y centrado verticalmente en su misma línea. Usar WIP para módulos en desarrollo y Coming Soon para módulos todavía no disponibles.
Primera card de un módulo: sección, versión, nombre y una explicación funcional breve.
Card de métrica para estados, conteos y controles de calidad.
La acción principal se identifica con violeta. El resto de funciones importantes permanecen visibles sin competir con ella.
Se sitúa bajo el header. Alberga guardar, restaurar, backup, generación o fusión, según el flujo del módulo.
Vive dentro de una card de configuración, resultado o exportación. Se usa para acciones dependientes del contenido de esa card.
Los campos deben tener etiqueta persistente y ayuda contextual cuando el formato o la consecuencia no sean obvios.
Taxonomía cargada Validado Revisión Bloqueado
Usar un lenguaje directo: qué ocurrió, qué fuente se utilizó y cuál es el siguiente paso disponible.
| Perfil | Estado | Arquetipos | Acción |
|---|---|---|---|
| SP-00000412 | Validado | ALT-ARQ-014, ALT-ARQ-079 | Ver detalle |
| SP-00000413 | Pendiente | — | Generar prompt |
Las tablas organizan datos que deben leerse por filas y compararse por columnas. La variante cromática traslada a interfaz el lenguaje de los reportes PDF profesionales.
Para inventarios, resultados y registros sin una interpretación semántica adicional.
| Perfil | Cobertura | Evidencias | Estado |
|---|---|---|---|
| SP-00000412 | D01–D45 | 45 | Validado |
| SP-00000413 | D01–D43 | 43 | Pendiente |
| SP-00000414 | D01–D45 | 45 | En revisión |
Para destacar una señal cualitativa o un estado de decisión, siguiendo los tintes semánticos de los informes profesionales.
| Hipótesis | Resultado | Base |
|---|---|---|
| H01 · Claridad | A favor | 18/20 |
| H02 · Confianza | Señal mixta | 11/20 |
| H03 · Riesgo | En contra | 7/20 |
| H04 · Comprensión | Informativa | 15/20 |
.table-wrap, borde --line, radio de 14 px, fondo --paper y desplazamiento horizontal cuando sea necesario.--surface-muted, texto --primary-strong, 10 px, mayúsculas y espaciado de 0,08 em.--line. Las filas pares usan --surface-soft.caption para el nombre contextual, scope="col" en columnas y scope="row" cuando la primera celda identifica la fila..table-numeric y cifras tabulares. Mantener la unidad en la cabecera o en todas las celdas..table-cell-code únicamente a la celda que porta el significado, no a toda la fila.data-tone="positive | warning | negative | info": verde para señal favorable, ámbar para mixta o atención, rosa para desfavorable y cian para información neutral.--table-*-bg; el marcador y el borde consumen los tokens semánticos existentes.El footer cierra cada página de forma discreta. El botón flotante “Ir arriba” es obligatorio en todos los módulos V1.
--primary e icono --on-primary en ambos modos. No debe usar --ink como fondo.currentColor; nombre accesible mediante aria-label o title.--focus y separación de 3 px.Las tabs alternan vistas relacionadas dentro de un mismo contexto sin abandonar la página ni interrumpir el flujo de trabajo.
Selecciona una pestaña para cambiar el contenido. La pestaña deshabilitada representa una vista todavía no disponible.
Vista inicial con los hallazgos, métricas y conclusiones principales del estudio.
Fuentes, citas y observaciones que respaldan los hallazgos presentados en el resumen.
Criterios, alcance y proceso utilizado para obtener y validar los resultados del análisis.
La vista estará disponible cuando el análisis haya sido validado.
1 px en #E3E7EF, separación de 4 px y scroll horizontal cuando no haya espacio.44 px, padding 11 × 14 px, texto de 13 px y peso 800.#6657F5; indicador de 3 px. Solo puede existir una activa.tablist, tab y tabpanel; asociar cada par con aria-controls y aria-labelledby. Flechas cambian de pestaña; Inicio y Fin saltan a los extremos.El stepper comunica fases discretas de un proceso; la barra de progreso muestra cuánto falta en una operación medible.
El estado actual siempre combina texto, forma y color para que el avance sea comprensible de un vistazo.
680 de 1.000 perfiles procesados · aproximadamente 2 min restantes
3–7 fases con nombre; usar barra cuando exista un porcentaje o volumen cuantificable.34 × 34 px, conector de 2 px y etiqueta de 12 px. Orden siempre de izquierda a derecha.10 px, pista #E9E7F5, relleno violeta y radio completo.620 px; la barra conserva todo el ancho disponible.aria-current="step". La barra determinada usa role="progressbar" y valores aria-valuemin, aria-valuemax y aria-valuenow.La paginación divide colecciones extensas en bloques previsibles y permite cambiar de página sin perder el contexto del listado.
Utiliza páginas numeradas cuando el usuario necesita conocer su posición, volver a resultados anteriores o acceder a un punto concreto de la colección.
38 px, radio 11 px, separación 6 px y texto de 12 px con peso 850.--primary, texto --on-primary y aria-current="page". Solo puede existir una activa.aria-live="polite".Contrato para convertir distribuciones, comparaciones, cambios y evolución temporal en gráficos consistentes, legibles y trazables.
Mantener el orden. Una categoría conserva el mismo color en todo el informe. Para más de 8 categorías, priorizar barras ordenadas y agrupar la cola como «Otros» cuando sea metodológicamente válido.
--chart-1#6657F5 · #9B8CFF--chart-2#06B6D4 · #22D3EE--chart-3#10B981 · #34D399--chart-4#F59E0B · #FBBF24--chart-5#F43F5E · #FB7185--chart-6#8B5CF6 · #C4B5FD--chart-7#EC4899 · #F472B6--chart-8#14B8A6 · #2DD4BF--chart-9#F97316 · #FB923C--chart-10#3B82F6 · #60A5FA--chart-11#64748B · #94A3B8--chart-12#A855F7 · #D8B4FELas escalas no son intercambiables: categórica para entidades distintas, secuencial para intensidad y divergente para desviación respecto a un punto neutral.
--chart-grid para ejes y guías.--chart-track para pistas sin valor.--chart-unknown solo para «Sin dato» o «No aplica».Mostrar en el centro el dato principal y bajo el gráfico la base: n=1.000. Preferir donut al «queso» porque conserva un foco numérico y reduce comparación por ángulos.
Orden descendente salvo que exista un orden natural. La longitud representa el valor; por eso todas parten de cero. Mostrar valor y, si aporta contexto, n.
El eje cuantitativo empieza en cero. Ancho constante, separación mínima de 8 px y máximo recomendado de 12 columnas. Para más periodos, usar línea.
Neutral · n=100100%
Contextual · n=100100%
Usar cuando interesa la mezcla relativa. No sustituye los recuentos: cada barra declara su base. Mantener el mismo orden de segmentos.
Escala simétrica a ambos lados de cero. Usar pp para diferencia entre porcentajes y % para variación relativa; nunca intercambiarlos.
No suavizar una línea si crea valores no observados. Mostrar puntos, unidad, periodo y cambios de método. Máximo recomendado: 4 series simultáneas.
Usar una única escala secuencial y mostrar el valor dentro de cada celda. Si existe un punto neutral real, usar escala divergente.
| Pregunta | Gráfica | Evitar |
|---|---|---|
| ¿Qué parte del total? | Donut o 100 % apilada | Más de 5 porciones |
| ¿Quién tiene más? | Barras horizontales | Ejes truncados |
| ¿Cómo cambia por periodo? | Columnas o línea | Ordenar por valor |
| ¿Sube o baja respecto a cero? | Divergente | Escalas asimétricas |
| ¿Dónde se concentra el patrón? | Matriz de calor | Arcoíris sin orden |
| ¿Cuál es un único KPI? | Card de métrica | Gauge decorativo |
figure y figcaption, más un aria-label descriptivo o una tabla asociada.prefers-reduced-motion.El kicker morado identifica la sección y el título negro desarrolla su contenido sin competir visualmente con él.
Los módulos deben cambiar de tema mediante tokens; nunca mediante inversiones automáticas ni colores aislados definidos dentro de cada componente.
| Token | Claro | Oscuro | Uso |
|---|---|---|---|
--ink | #172033 | #EEF2FF | Texto principal |
--muted | #68758B | #A8B3C7 | Texto secundario |
--line | #E3E7EF | #303A4F | Bordes y separadores |
--bg | #F4F6FB | #0D1220 | Fondo de aplicación |
--paper | #FFFFFF | #161D2D | Cards y paneles |
--surface-soft | #FCFDFF | #1B2436 | Inputs y superficies elevadas |
--surface-muted | #F5F3FF | #211D3B | Cabeceras y selección |
--primary | #6657F5 | #9B8CFF | Acción y foco |
--on-primary | #FFFFFF | #101526 | Texto sobre primario |
--shadow | 9 % tinta | 32 % negro | Profundidad |
role="switch", comunica su estado y recarga la página para aplicar la variante completa.--chart-*; nunca valores claros fijados dentro de un componente.Esta superficie cambia mediante --paper, --ink, --muted y --line, sin alterar su jerarquía.
Los detalles secundarios permanecen disponibles sin competir con la configuración principal.
El contenido plegado conserva su estado durante la interacción y no elimina los valores introducidos.
aria-expanded y aria-controls.role="tooltip", foco visible y tokens de superficie.Informa del resultado inmediato de una acción sin interrumpir el flujo ni sustituir los estados persistentes.
Usar para cargas, guardados y exportaciones completadas. El mensaje desaparece automáticamente.
.feedback-toast o alias compatible .toast.role="status", aria-live="polite" y aria-atomic="true".