Los gráficos son parte del lenguaje de Extera. El producto vive de datos: estados documentales, volúmenes de contratas, tasas de cumplimiento, tendencias temporales. Cada gráfico debe ser tan preciso como funcional — sin decoración que compita con el dato.
La paleta de dataviz no es nueva: reutiliza los colores espectrales de módulo (Comply, Access, Source), el azul institucional, el crítico y el gold. No hay paleta paralela.
Las cuatro reglas son hard constraints. Cualquier gráfico de Extera debe cumplirlas antes de preocuparse de estilo.
Ningún elemento visual compite con el dato principal. Sin gradientes, sin 3D, sin sombras decorativas en las barras.
Todo texto debe leerse en pantallas de baja resolución. Tamaño mínimo: 10px DM Sans o Courier Prime.
El color solo distingue categorías o señala estados. Nunca decoración. Los colores del espectro tienen prioridad.
Los gráficos de barra empiezan en 0. Truncar el eje Y es engañar al usuario. Sin excepciones.
Cuatro tipos cubren el 100% de los casos de Extera. Cualquier otra forma requiere justificación y revisión de sistema.
En gráficos multi-serie el orden es siempre éste: azul institución primero, después el espectro (crítico → access → gold → source → comply). Nunca reordenar por estética.
Dos composiciones de referencia: barras con eje Y desde cero y donut con valor central.
Detalles que hacen que un gráfico parezca de Extera. Todas derivadas de tokens existentes.
| Elemento | Familia & tamaño | Detalles |
|---|---|---|
| Títulos de gráfico | DM Sans · 13px · 600 | Máx. 1 línea. Sin punto final. |
| Etiquetas de eje | Courier Prime · 10px | Uppercase + tracking .08em. Color --ink-muted. |
| Valores destacados | DM Sans · 12-13px · 700 | Color --ink. Sin decimales salvo porcentajes AI-trust. |
| Tooltips | DM Sans · 11px | Fondo #141413 · texto #F5F3EE. Obligatorios en todo dato interactivo. |
| Rejilla | 1px · var(--grid) | Opacidad .5. Nunca gruesa ni dominante. |
| Radio de barra | 2px 2px 0 0 | Solo esquinas superiores. Nunca pill. |
| Rejilla en dark | #2A2D36 | Token --grid-dark. Card bg #141413. |
Los gráficos de tarta no están permitidos en Extera. Sustituir siempre por donut con valor central, o por barras horizontales si hay más de 5 segmentos.
Barras que no empiezan en cero. Si el rango es estrecho, usar línea o sparkline — no manipular el eje para exagerar diferencias.
Gradientes en series, sombras bajo barras, 3D, outlines gruesos. Contradicen el principio el dato primero.
Las variables CSS del sistema (--ink, --gold, --paper, --grid + los 3 colores espectrales de módulo) son suficientes para construir cualquier componente de dataviz de Extera. No hay paleta paralela: el sistema cubre todos los estados semánticos y todas las series.