Nebula

Sistema de diseño del CMS. Todo lo de abajo sale de design-system/nebula/_tokens.css; esta página no define un solo color.

Superficies

bg-app

bg-sidebar

bg-surface

bg-surface-2

Texto

Los tres pasan AA de texto normal sobre las cuatro superficies, en los dos temas. Medido por verifica-contraste.py, no estimado.

text — el cuerpo y las cifras. Lo que hay que leer sin esfuerzo.

text-muted — etiquetas, encabezados de tabla, ayudas.

text-dim — metadatos: el ID bajo el nombre del usuario, marcas de tiempo.

Marca

El magenta va en dos tokens y no en uno. Esa separación es el hallazgo que ordena la paleta: #EB008B da 3.59:1 sobre la tarjeta —sirve de relleno, no de texto— y el cian de marca, que falla sobre blanco, sobre oscuro se lee perfectamente.

primaryrelleno, borde, barra

primary-activeítem activo del menú

primary-textmagenta como texto

cyancian de marca

cyan-textcian como texto

Gradientes de KPI

Más hondos que los de la referencia, a propósito: cada parada aguanta texto blanco a 12px. Un rosa pastel se ve mejor en una captura y deja la etiqueta ilegible en pantalla.

Etiqueta a 12px1,284grad-1

Etiqueta a 12px1,284grad-2

Etiqueta a 12px1,284grad-3

Etiqueta a 12px1,284grad-4

Estados

successwarningdangerinfoneutral

Escala tipográfica y forma

Cifra de KPIfs-3xl · 34px

Cifra de KPIfs-2xl · 28px

Título de panelfs-xl · 20px

Texto destacadofs-lg · 16px

Cuerpofs-md · 14px

Secundariofs-sm · 13px

Etiquetafs-xs · 12px

radius-sm

radius

radius-lg