theme.cssCada muestra lee el valor real y actual del token (cambia con el tema). Los componentes solo usan estos tokens, nunca colores literales.
--display Libre Caslon Display para títulos y cifras · --body Mulish para todo lo demás.
Mulish en 15px para el texto corrido. Pesos de 300 a 800 disponibles. Las etiquetas en mayúscula llevan interletraje y color tenue.
Tarjetas --r · sub-tarjetas --r-sm · campos --ri · pastillas 999px.
Reposo --shadow · elevación --shadow-lg · acento --glow.
Base .btn + variante. Todos suben al pasar el ratón y se hunden al pulsar. Talla pequeña con .sm (nunca padding inline).
.pill etiqueta con icono · .seg segmentos (el activo .on).
Color semántico independiente del acento.
Todas heredan .card. Las clicables (.kpi, .tcard) suben 3px al pasar el ratón.
Contenido del panel. Radio --r, sombra --shadow.
Radio único --ri y el mismo halo de foco en todos los campos. Haz clic en un campo para verlo.
Cada sección se identifica con el mismo icono del menú + su nombre. Se genera con setViewHeader() desde VIEW_ICON/VIEW_TITLES.
Documento vivo. La referencia escrita está en DESIGN_SYSTEM.md. Este styleguide usa exactamente el mismo theme.css que la app.