Tokens
Qué variable usas y cuándo: tinta y papel, acento por marca, escala tipográfica, espaciado, radios y tema oscuro.
tokens.html →cis-style · kit v9 · digest f417275c
El design system del grupo
Este hub documenta el kit v9: la librería de estilo que comparten los sitios de CIS, CDS, cochid e illanes00. Es una librería propia, escrita desde el lenguaje visual vivo de innovacionsantiago.cl; no es un fork ni un tema sobre Bootstrap. Cada página del hub carga las hojas reales del CDN: lo que ves aquí es lo que sirve producción.
Qué es el kit v9
Tres capas y nada más. Tokens: las variables de color, tipografía y espaciado
que todo sitio consume. Chrome: la nav y el footer compartidos
(gr-nav, gr-footer) con su toggle de tema. Componentes:
botones, cards, stats, tablas, badges, inputs y la login-card. Encima, una hoja mínima por marca
que solo re-tiñe el acento. Las cuatro hojas juntas pesan 29,8 KB sin comprimir; la hoja mínima
de Bootstrap ronda los 200 KB.
| hoja | qué trae | bytes |
|---|---|---|
| base/tokens.css | variables: tinta, papel, escala, espaciado, tema | 6.452 |
| base/chrome.css | gr-nav, gr-footer, login, toggle de tema | 13.716 |
| base/components.css | btn, card, stat, table, badge, input, login-card | 8.085 |
| brands/cis/tokens.css | acento CIS: navy en claro, verde en oscuro | 1.533 |
| kit v9 completo | todo lo anterior | 29.786 |
| bootstrap.min.css (referencia) | solo la hoja base, sin plugins | ~200.000 |
<table class=table>
<thead><tr><th>hoja</th><th>qué trae</th><th class=num>bytes</th></tr></thead>
<tbody>
<tr><td>base/tokens.css</td><td>variables</td><td class=num>6.452</td></tr>
</tbody>
</table>Bytes medidos con curl contra el digest f417275c el 2026-08-20. Las fuentes (woff2 self-hosted) van aparte; la comparación es CSS contra CSS.
Estado vivo
El kit se sirve fijado por digest: la URL incluye el hash del contenido, así que es inmutable y cachea para siempre. Subir de versión es cambiar una cadena. El observatorio sondea a los consumidores y reporta quién carga qué.
f417275cdigest v9 fijado
26sitios ya en v9
27consumidores registrados
29,8 KBpeso de las 4 hojas
<div class=stat>
<span class=stat__value>26</span>
<span class=stat__label>sitios ya en v9</span>
</div>Al 2026-08-20: consumidores contados en registry/consumers.yaml; sitios en v9 según el observatorio, que los sondea en vivo.
El mapa del hub
Nueve páginas, cada una contesta una pregunta. Las dos últimas tarjetas salen del hub: la guía narrativa vive en la raíz del CDN y el observatorio monitorea a los consumidores.
Tipografía
IBM Plex Sans para la prosa y la interfaz, JetBrains Mono para etiquetas y cifras. La escala completa con sus usos.
tipografia.html →Componentes
Cada clase real del kit con todas sus variantes: botones, cards, stats, tablas, badges, inputs y login-card.
componentes.html →Chrome
Cómo montas la nav y el footer compartidos: gr-nav, gr-footer, wordmark por marca y el toggle de tema.
chrome.html →Patrones
Cómo se combinan las piezas: pantallas de login, tablas de datos, dashboards con stats y formularios.
patrones.html →Ejemplos
Páginas completas armadas solo con el kit, de la nav al footer, para copiar la estructura entera.
ejemplos.html →Escritura
Cómo se escribe la interfaz: la norma de prosa del grupo aplicada a botones, errores, vacíos y ayuda.
escritura.html →Marcas
Los logos canónicos de CIS, CDS y cochid, y la hoja de tokens que le toca a cada sitio según su marca.
marcas.html →Reglas
Lo prohibido y lo obligatorio con su prueba: sin hex, sin Google Fonts, sin border-left de acento, sin em-dash.
reglas.html →Guía narrativa
La historia del sistema en la raíz del CDN: versiones, gobernanza, archivo de sitios y documentación viva.
style.innovacionsantiago.cl →Observatorio
Quién consume qué versión del kit, sondeado en vivo contra el registro de 27 consumidores.
/observatory →La tarjeta del mapa es el .card del kit, sin CSS propio de tarjeta:
Tokens
Qué variable usas y cuándo.
tokens.html →<article class=card>
<span class=card__tag>referencia</span>
<h3>Tokens</h3>
<p>Qué variable usas y cuándo.</p>
<a class=card__link href="tokens.html">tokens.html →</a>
</article>Integración en 7 líneas
Un sitio nuevo entra al sistema con seis hojas y un script, en este orden. El digest fija el contenido: si el kit cambia, cambia la URL, nunca lo que ya serviste.
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/fonts/css/ibm-plex-sans.css">
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/fonts/css/jetbrains-mono.css">
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/base/tokens.css">
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/base/chrome.css">
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/base/components.css">
<link rel=stylesheet href="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/brands/cis/tokens.css">
<script src="https://style.innovacionsantiago.cl/v9/f417275cbb1c390a6b158f2f6574db1b36e2a6cc61e734029530ef90b9d1dd77/chrome.js" defer></script>Cambia brands/cis por la marca del sitio y ya está. La cabecera de
base/tokens.css documenta además el bootstrap anti-flash de tema, un inline de tres líneas que
va antes de las hojas. Con eso cargado, esto ya funciona sin escribir una línea de CSS:
<a class=btn href="#">Acción principal</a>
<a class="btn btn--ghost" href="#">Secundaria</a>
<a class="btn btn--sm" href="#">Pequeña</a>
<span class=badge>digest f417275c</span>
<span class="badge badge--ok">en v9</span>
<span class="badge badge--warn">pendiente</span>
<span class="badge badge--err">fuera del kit</span>Tres principios
Tokens siempre
Ningún sitio escribe hex. Todo color, fuente y espacio sale de una var() de base/tokens.css. Si necesitas un color que el kit no da, el diseño está mal, no el kit.
Una marca por sitio
Cada sitio carga exactamente una hoja brands/*/tokens.css y esa hoja solo re-tiñe el acento. Un producto hereda de su marca y nunca lleva CSS propio de identidad.
El chrome es del kit
La nav y el footer vienen de base/chrome.css y los opera chrome.js, tema incluido. No escribas tu propio navbar: si el marco queda chico, se arregla en el kit para todos.
El primer principio en acción: esta paleta no tiene un solo hex, son los tokens que cualquier sitio del grupo puede pintar. En tema oscuro cambian solos.
<i style="background:var(--accent)"></i>
<i style="background:var(--accent-soft)"></i>Fuentes
- Clases, pesos y receta de integración: hojas reales del digest
f417275cen style.innovacionsantiago.cl (base/tokens.css,base/chrome.css,base/components.css,brands/cis/tokens.css), medidas por curl el 2026-08-20. El snippet de 7 líneas y el bootstrap anti-flash están en la cabecera debase/tokens.css. - Consumidores registrados (27):
cis-style/registry/consumers.yaml. Sitios en v9 (26): observatorio. - Una marca por sitio, herencia marca/producto y las ocho clases de sitio:
core/core-style/ESTRUCTURA.md(Martín, 2026-08-09). - Logos canónicos, incluido el mark de anillos de esta nav:
cis-style/brands/LOGOS-CANONICOS.md. - Prohibiciones transversales (Google Fonts, border-left de acento, em-dash, hex fuera de tokens):
/srv/projects/CANON.md. - Norma de escritura del copy:
core/prosa/NORMA.md.