--- name: galilei-datos description: Sistema de visualizacion de datos e informes de Galilei Learning. Une el sistema de marca (tokens, color, tipografia mono con tabular-nums, superficies) con los 8 tipos de grafico canonicos y las reglas de data-viz, para construir informes, dashboards y reportes on-brand. Activa cuando se necesite crear o revisar un informe, dashboard, grafico, tabla, reporte de metricas o cualquier visualizacion de datos de Galilei. --- > **Canon:** portal `galilei-landing.pages.dev` · `/identidad-visual/datos/`. Esta skill refleja esa pagina. Si hay conflicto, gana el portal. > **Gobernanza (mayo 2026):** Notion deprecado como SSOT de procesos de marca. La fuente de verdad es el portal publicado; esta skill lo documenta y nunca lo contradice. # Galilei Learning · Datos e informes ## 1. Para que sirve esta skill Construir informes, dashboards y reportes de metricas que se vean como Galilei. Une lo esencial del sistema de marca (tokens, color, tipografia mono, superficies, reglas de lenguaje) con los 8 graficos canonicos y las reglas de data-viz. Cargala cuando vayas a crear o revisar cualquier visualizacion de datos del rider. --- ## 2. Fundamentos de marca para datos Estos son los pilares de marca que un informe o dashboard necesita. El sistema completo vive en `galilei-brand`; aqui esta lo que aplica a datos. ### Tipografia | Token | Font | Uso en datos | |---|---|---| | `var(--font-display)` | Radio Canada Big | Titulares de metrica grandes, headlines del informe | | `var(--font-body)` | Space Grotesk 400/500 | Labels, descripciones, leyendas | | `var(--font-mono)` | Space Grotesk + tabular-nums | **Todas las cifras, ejes y tablas** | - **Todas las cifras van en `var(--font-mono)`** (Space Grotesk con `font-variant-numeric: tabular-nums`). Numeros, ejes, valores de tabla, deltas, porcentajes. - **Tabular-nums siempre** para que los numeros alineen en columna: en una tabla o lista de valores, cada digito ocupa el mismo ancho y las cifras quedan a plomo. - El titular de metrica grande (el numero hero de un KPI) puede ir en `var(--font-display)` 700 para impacto; el resto de cifras en mono. ### Color en datos - **Lima GaliGreen `#B3F131` es el hue de dato principal.** Es la serie, la barra, la linea, el dot activo. Se usa de forma consistente como "el dato", no como decoracion. - **Colores semanticos solo para deltas y estados**, nunca decorativos: - Success `#22C55E` (`--s-500`): subio, bueno, sobre meta, completado. - Error `#FB7E7E` (`--e-500`): bajo, problema, bajo meta. - Warning `#ECCF07` (`--w-500`): atencion, pendiente. - Alert `#F69554` (`--a-500`): urgencia media. - Info `#73C8E8` (`--i-500`): contexto, neutral informativo. - **Hue locked al estado en todo el producto:** el verde siempre es bueno, el rojo siempre es problema. No se reasignan. - **Neutralverse para todo lo demas:** ejes, grids, lineas de referencia, labels secundarios, barras base. Texto con las aliases semanticas (`--text-primary` `#F0F2F5`, `--text-secondary` `#C7CCD4`, `--text-muted` `#58606C`), nunca rgba con opacidad. - **Presupuesto de lima:** maximo ~10% de la composicion, maximo 1 acento de lima por viewport. El lima marca el insight, no "le da vida" al grafico. - **Cuando NO usar lima:** no como tinte decorativo sobre un chart entero, no como confirmacion de estado (eso es success), no sobre una superficie ya verde-tinte (ahi el texto e iconos van neutros), no para categorias o filtros. - **Saturacion 15-20% por debajo de los chips de UI** para que el dato no compita con la interfaz. ### Superficies - **Base `--n00` `#0A0B0C`** como fondo del informe. - **Cards de KPI y charts sobre Panel 1 `--n01` `#0E1012`** (chrome elevado) o **Panel 2 `--n02` `#171A1E`** (contenido de trabajo). - **Panel 3 `--n03` `#292F36`** solo como inset destacado dentro de Panel 2 (un KPI hero hundido dentro de una card). - **Sin bordes decorativos** en cards ni paneles. La jerarquia se construye con luminosidad de superficie, contenido y glow, no con bordes ni con drop shadows. ### Reglas de lenguaje - **Cero em-dashes.** Reemplazos: `·` middle dot, `,`, `:`, `()`. - **Sentence case** en titulos, headlines, labels y botones. Sin punto final en titulos. - **Sin emojis** en navegacion, titulos, badges ni dashboards. Iconografia SVG del sistema o nada. - **Numeros con formato espanol:** 2.700 (no 2700 ni 2,700). --- ## 3. Los 8 graficos canonicos Cada chart existe porque su FORMA hace visible un patron especifico. No se elige por bonito: se elige por la pregunta que responde. ### 1. Comparison bar · deltas entre grupos - **Cuando:** comparar el cambio o delta entre varios grupos o cohortes (score base vs ganancia del periodo). - **Aplicacion:** franja base en neutro, ganancia en lima; el ojo lee el delta de un vistazo. La cohorte protagonista va en un hero stat grande; las demas en filas compactas atenuadas. ### 2. Time series anotado · narrativa temporal - **Cuando:** mostrar evolucion en el tiempo donde el "por que" de cada salto importa. - **Aplicacion:** linea en lima + area degradada, lineas de evento marcadas en el path, label de meta (threshold). La narrativa vive en las anotaciones, no solo en la curva. ### 3. Bullet chart · actual vs meta - **Cuando:** varios KPIs que hay que comparar contra su target de un vistazo. - **Aplicacion:** small multiples densos; cada barra lleva su target (tick), su actual y el delta. Delta sobre meta en success, bajo meta en error. ### 4. Dot matrix · densidad cuantitativa - **Cuando:** una proporcion sobre un total (N de 100) que se quiere sentir, no calcular. - **Aplicacion:** 100 celdas, las activas en lima, las pendientes en neutro. La cifra y la escala se leen al mismo tiempo. Un dot = una unidad. ### 5. Funnel · drop-off por paso - **Cuando:** un journey donde la pregunta es en que punto se cae la conversion. - **Aplicacion:** barras decrecientes; el drop entre pasos es el insight. El cuello de botella (mayor caida) se marca como tal. La gente perdida vs la que llega al final lidera el hero. ### 6. Calendar heatmap · actividad en el tiempo - **Cuando:** cuando hay mas o menos actividad a lo largo de semanas. - **Aplicacion:** semanas plegadas en grid dia × semana. **Una sola hue lima en cinco intensidades** (mas opacidad = mas actividad). Una hue, multiples intensidades, sin payaso de colores. ### 7. Beeswarm · distribucion + outliers - **Cuando:** como se reparten los scores de muchas unidades y quien queda fuera del grupo. - **Aplicacion:** cada dot es una unidad, su posicion horizontal es su score, con linea de promedio. Lima marca outliers altos, error desaturado marca bajos, el resto neutral. ### 8. Leaderboard · gamification analytics - **Cuando:** quien va a la cabeza y como se mueve cada uno (ranking + movimiento). - **Aplicacion:** podium top 3 + ranking compacto. Pill de empresa con color identifica el equipo, delta pill comunica el movimiento vs el periodo anterior (success sube, error baja, neutro plano). Iconos 3D de premios para el podium. --- ## 4. Reglas de data-viz Dos principios gobiernan cada decision de visualizacion en Galilei. ### Regla 01 · Form sigue pregunta No elijas chart por bonito: elige por la pregunta que responde. Cada tipo existe porque su forma hace visible un patron especifico. | Chart | Pregunta que responde | |---|---| | Comparison bar | deltas entre grupos | | Time series | narrativa temporal | | Bullet | actual vs meta | | Dot matrix | densidad cuantitativa | | Funnel | drop-off por paso | | Heatmap | actividad en el tiempo | | Beeswarm | distribucion + outliers | | Leaderboard | gamification analytics | ### Regla 02 · Color sin ser payaso Una pregunta por chart, dos estados maximo. El color verifica lo que ya se ve por shape; nunca lleva el dato solo. - Saturacion 15-20% por debajo de los chips de UI para no competir con la interfaz. - Hue locked al estado en todo el producto: el verde siempre es bueno, el rojo siempre es problema. - Lima = senal funcional. Jamas como tinte decorativo sobre un chart entero. - Neutralverse primero; acento quirurgico solo donde esta el insight. --- ## 5. Receta de informe / dashboard Como componer un reporte que se sienta Galilei: 1. **Jerarquia desde el titular.** El numero clave del informe va grande, en `var(--font-display)` 700. Es lo primero que se lee. 2. **Cifras en mono con tabular-nums.** Todo lo numerico (ejes, tablas, deltas, KPIs secundarios) en `var(--font-mono)` para que alinee en columna. 3. **Un grafico, un mensaje.** Cada chart responde una sola pregunta (Regla 01). Si quieres decir dos cosas, son dos charts. 4. **Lima solo en el dato clave.** El insight de cada bloque va en lima; el resto del grafico vive en Neutralverse. Maximo 1 acento de lima por viewport. 5. **Deltas en color semantico.** Subio en success `#22C55E`, bajo en error `#FB7E7E`, pendiente en warning `#ECCF07`. Siempre acompanados de signo o icono, nunca color solo. 6. **Superficies para agrupar.** Base de fondo, cards de KPI y charts sobre Panel 1 o Panel 2, insets sobre Panel 3. Sin bordes decorativos: separa con superficie y aire. 7. **Lenguaje limpio.** Titulos en sentence case sin punto final, cero em-dashes, cero emojis, numeros en formato espanol (2.700).