Componentes
Qué sistemas y qué clases hay realmente debajo de cada sitio
Inventario medido, no declarado. Los frameworks salen de recorrer los archivos
de configuración y los package.json del servidor; las clases
salen del CSS del kit en el repositorio y del HTML que cada sitio sirve hoy. Donde el número
medido contradice lo que dice el canon, la página lo dice.
Sección A
Mapa de capas
Ningún sitio del grupo tiene una sola tecnología: tiene cinco capas apiladas, y la discusión sobre "el design system" solo toca las dos de arriba. Cada columna es una familia real de sitios, con lo que efectivamente carga hoy.
| Capa | catalogo.innovacionsantiago.cl firmasydocumentos.cl |
economia.cochid.cl | innovacionsantiago.cl | circulodesantiago.cl | datos.cochid.cl mapas.cochid.cl |
thesis.cochid.cl | periodismo2.cl |
|---|---|---|---|---|---|---|---|
| 5 · Marca | brands/cis/tokens.css | brands/cochid/tokens.css | compilada en el paquete | compilada en el paquete | v6 brands/cochid-datos | brand-overrides.css local | ninguna |
| 4 · Kit del grupo | versión 7 canónica | versión 7 canónica | no medible desde fuera | bifurcación cds-* |
versión 6 | bifurcación local cochid-v7.css |
ninguno; solo las tipografías |
| 3 · Utilidades | ninguna | ninguna | no medible desde fuera | ninguna | Tailwind | Bootstrap 5.3.2 | Tailwind |
| 2 · Framework | HTML estático | HTML estático | Vite y React | Next.js | Next.js | HTML estático servido por Python | Next.js |
| 1 · Servidor | Caddy como proxy inverso sobre servicios de systemd; TLS por Cloudflare. Igual para los siete. | ||||||
La capa 4 es la única que el grupo controla como producto. Hoy solo tres sitios de los doce medidos la consumen desde su origen canónico; el resto tiene una copia, una versión anterior o nada.
Los dos orígenes del kit
La versión 7 se publica desde dos hosts distintos:
style.innovacionsantiago.cl/v8/ y
style.cochid.cl/v7/. Comparé los cuatro archivos base entre
ambos hosts y contra el repositorio de origen
/srv/projects/core/core-style/v7/: los tres son
idénticos byte a byte hoy. No hay ningún mecanismo que garantice que sigan
estándolo.
| Archivo | style.innovacionsantiago.cl | style.cochid.cl | repositorio | estado |
|---|---|---|---|---|
| base/tokens.css | eb53746023 | eb53746023 | eb53746023 | iguales |
| base/chrome.css | 232c9c00be | 232c9c00be | 232c9c00be | iguales |
| base/components.css | fcc5507e8c | fcc5507e8c | fcc5507e8c | iguales |
| theme.js | 6d2990ba83 | 6d2990ba83 | 6d2990ba83 | iguales |
Primeros 10 caracteres del resumen MD5. Medido el 5 de agosto de 2026 con descarga activa, sin caché.
Sección B
Qué carga cada sitio, medido en vivo
La columna que manda es la hoja de estilo, no el conteo de clases. Un sitio que arma su interfaz en el navegador sirve un HTML casi vacío, así que contar clases ahí da cero aunque el kit esté cargado. La columna "servido" avisa cuándo pasa eso.
| Sitio | Servido | Hojas de estilo que carga | Kit | Clases de kit | Utilidades |
|---|---|---|---|---|---|
| catalogo.innovacionsantiago.cl | estático | 6 hojas desde style.innovacionsantiago.cl/v8/: las 2 de tipografías, tokens base, tokens de marca, chrome, componentes |
versión 7 | 30 gr-* |
ninguna |
| firmasydocumentos.cl | estático | las mismas 6 hojas de la versión 7 | versión 7 | 28 gr-* |
ninguna |
| economia.cochid.cl | estático | 6 hojas desde style.cochid.cl/v7/, el segundo host de distribución |
versión 7 | 27 gr-* |
ninguna |
| innovacionsantiago.cl | una sola página | /assets/index-Cdo-2m8c.css, compilada por Vite |
compilado | 3 cis-legal-static* |
no medible |
| circulodesantiago.cl | una sola página | /_next/static/css/5cf19aa2…css, compilada por Next.js. Ninguna hoja del kit |
bifurcación | 23 cds-* |
ninguna |
| thesis.cochid.cl | estático | global.css, cochid-v7.css (copia local de 4,3 kB), brand-overrides.css, más Bootstrap y Bootstrap Icons desde cdn.jsdelivr.net |
bifurcación | 10 cis-footer-lite* |
Bootstrap 5.3.2 |
| cochid.cl | estático | /v6/cis.min.css más /v6/brands/cochid/tokens.css |
versión 6 | 1 cis-brand |
3 marcas Bootstrap |
| datos.cochid.cl | una sola página | CSS de Next.js más /v6/cis.min.css más /v6/brands/cochid-datos/tokens.css |
versión 6 | 0 | Tailwind, 65 marcas |
| mapas.cochid.cl | una sola página | 2 hojas de Next.js más /v6/cis.min.css |
versión 6 | 0 | Tailwind, 12 marcas |
| periodismo2.cl | una sola página | CSS de Next.js más las tipografías de la versión 6. Nada más del kit | ninguno | 0 | Tailwind, 91 marcas |
| auth.innovacionsantiago.cl | una sola página | authentik.css más custom.css |
PatternFly | 21 pf-c-* |
ninguna |
| docs.circulodesantiago.cl | estático | CSS en línea en el documento, sin hojas externas | ninguno | 0 | ninguna |
Medido el 5 de agosto de 2026 con descarga activa por HTTPS, sin caché.
Las 12 respuestas fueron código 200.
Las "marcas" de utilidades son clases que solo existen en ese sistema y en ningún otro:
container-fluid, col-lg-4,
navbar-brand o form-control para
Bootstrap; pasos fraccionarios como px-1.5, valores entre
corchetes y prefijos de punto de quiebre para Tailwind.
Los 21 selectores de PatternFly se contaron dentro de
authentik.css, no en el HTML servido.
Tres prefijos, un solo diseño
El hallazgo más incómodo de esta tabla no es que falten sitios en la versión 7,
sino que dos de ellos ya la tienen y la llaman de otra manera. Las clases de
circulodesantiago.cl no son del kit anterior: son la estructura
de la versión 7, nombre por nombre, con otro prefijo.
| Versión 7 canónica | circulodesantiago.cl | thesis.cochid.cl |
|---|---|---|
| gr-nav | cds-nav | no tiene |
| gr-nav__inner | cds-nav__inner | no tiene |
| gr-nav__brand | cds-nav__brand | no tiene |
| gr-nav__wordmark | cds-nav__wordmark | cochid-namebrand |
| gr-nav__theme | cds-nav__theme | no tiene |
| gr-footer__top | cds-footer__top | cis-footer-lite__top |
| gr-footer__grid | cds-footer__grid | cis-footer-lite__grid |
| gr-footer__col | cds-footer__sub | cis-footer-lite__col |
| gr-footer__brand-name | cds-footer__name | cis-footer-lite__name |
| gr-footer__brand-tag | cds-footer__tag | cis-footer-lite__tag |
| gr-footer__base | cds-footer__base | cis-footer-lite__base |
| gr-footer__sibling | cds-footer__sibling | no tiene |
| gr-footer__sibling-name | cds-footer__sibling-name | no tiene |
| gr-footer__sibling-arrow | cds-footer__sibling-arrow | no tiene |
| gr-footer__attrib-mark | cds-footer__sibling-mark | no tiene |
23 clases cds-* medidas en circulodesantiago.cl,
10 clases cis-footer-lite* y de marca en thesis.cochid.cl.
Migrar cualquiera de los dos al kit es un renombrado, no un rediseño.
Sección C
Catálogo completo de la versión 7
gr- con notación
de bloque, elemento y modificador; los componentes no usan prefijo ninguno y se llaman
.btn, .card,
.table, .badge,
.input. Cuatro de esos cinco nombres son exactamente los que también
usa Bootstrap. Volveré sobre eso en la sección F.
| Archivo | Régimen de nombres | Clases | Qué cubre |
|---|---|---|---|
| base/chrome.css | prefijo gr- | 47 | barra superior, pie, estado de sesión |
| base/components.css | sin prefijo | 27 | botones, tarjetas, cifras, formularios, tablas, distintivos, tarjeta de acceso |
| base/tokens.css | sin prefijo | 4 | contenedor, prosa, rótulo superior |
| brands/*/tokens.css | prefijo por marca | 4 | marcas de cochid y de illanes00 |
| base/chrome.css | clases de estado, sin prefijo | 4 | is-active, is-open, icon-sun, icon-moon |
| Total | 86 | todo lo que el kit define hoy | |
Chrome, las 47 clases con prefijo
Estas clases no se pueden mostrar de a una: gr-nav__inner
es una rejilla vacía y gr-footer__attrib-sep es un punto medio.
Se muestran en cuatro piezas armadas, cada parte numerada, y después la tabla completa
indica en qué pieza aparece cada clase.
<header class="gr-nav">
<div class="gr-nav__inner">
<a class="gr-nav__brand" href="#catalogo">
<svg aria-label="Compañía de Innovación de Santiago" fill="none" height="32" role="img" stroke="currentColor" viewBox="0 0 200 200" width="32">
<circle cx="100" cy="100" r="92" stroke-width="4"></circle>
<circle cx="100" cy="100" r="56" stroke-width="18"></circle>
</svg>
<span class="gr-nav__wordmark"><span>Compañía</span><span>de Innovación</span><span>de Santiago</span></span>
</a>
<button aria-expanded="false" aria-label="Abrir menú" class="gr-nav__toggle"><span></span><span></span><span></span></button>
<nav aria-label="Ejemplo de navegación" class="gr-nav__links">
<div class="gr-nav__group">
<a class="gr-nav__link is-active" href="#catalogo">Inicio</a>
<a class="gr-nav__link" href="#catalogo">Servicios</a>
</div>
<div class="gr-nav__group">
<a class="gr-nav__link" href="#catalogo">Documentos</a>
<a class="gr-nav__link" href="#catalogo">Contacto</a>
</div>
</nav>
<div class="gr-nav__actions">
<button aria-label="Cambiar tema" class="gr-nav__theme" data-theme-toggle="">
<svg aria-hidden="true" class="icon-sun" fill="none" height="18" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" width="18">
<circle cx="12" cy="12" r="4.5"></circle><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.5 1.5M17.6 17.6l1.5 1.5M19.1 4.9l-1.5 1.5M6.4 17.6l-1.5 1.5"></path>
</svg>
<svg aria-hidden="true" class="icon-moon" fill="none" height="18" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" width="18">
<path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a6.8 6.8 0 0 0 10.5 10.5z"></path>
</svg>
</button>
<div class="gr-login"><a class="gr-login__enter" href="#catalogo">Entrar</a></div>
</div>
</div>
</header>gr-nav gr-nav__inner gr-nav__brand gr-nav__wordmark gr-nav__toggle gr-nav__links gr-nav__group gr-nav__link is-active gr-nav__actions gr-nav__theme icon-sun icon-moon gr-login gr-login__enter<header class="gr-nav">
<div class="gr-nav__inner">
<a class="gr-nav__brand" href="#catalogo">
<svg aria-label="Círculo de Santiago" fill="none" height="26" role="img" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="26">
<circle cx="12" cy="12" r="10"></circle>
</svg>
<span class="gr-nav__wordmark gr-nav__wordmark--lg"><span>Círculo</span><span>de Santiago</span></span>
</a>
<nav aria-label="Ejemplo de variantes" class="gr-nav__links">
<div class="gr-nav__group"><a class="gr-nav__link" href="#catalogo">Programas</a></div>
</nav>
<div class="gr-nav__actions">
<a class="gr-nav__cta gr-nav__cta--secondary" href="#catalogo">Iniciar sesión</a>
<a class="gr-nav__cta gr-nav__cta--primary" href="#catalogo">Crear cuenta</a>
</div>
</div>
</header>
<header class="gr-nav">
<div class="gr-nav__inner">
<a class="gr-nav__brand" href="#catalogo">
<svg aria-label="cochid" height="26" role="img" viewBox="0 0 24 24" width="26">
<rect fill="#1d4ed8" height="20" width="20" x="2" y="2"></rect>
</svg>
<span class="gr-nav__wordmark gr-nav__wordmark--mono"><span>cochid</span><span class="gr-nav__sub">datos</span></span>
</a>
<nav aria-label="Ejemplo de sesión iniciada" class="gr-nav__links">
<div class="gr-nav__group"><a class="gr-nav__link" href="#catalogo">Catálogo</a></div>
</nav>
<div class="gr-nav__actions">
<div class="gr-login">
<a class="gr-login__user" href="#catalogo">
<span class="gr-login__dot"></span>
<span class="gr-login__name">martinillanesv@gmail.com</span>
</a>
<a class="gr-login__exit" href="#catalogo">Salir</a>
</div>
</div>
</div>
</header>gr-nav__wordmark--lg gr-nav__wordmark--mono gr-nav__sub gr-nav__cta gr-nav__cta--primary gr-nav__cta--secondary gr-login__user gr-login__dot gr-login__name gr-login__exit<footer class="gr-footer">
<div class="gr-footer__top">
<div class="gr-footer__brand">
<svg aria-label="Compañía de Innovación de Santiago" fill="none" height="34" role="img" stroke="currentColor" viewBox="0 0 200 200" width="34">
<circle cx="100" cy="100" r="92" stroke-width="4"></circle>
<circle cx="100" cy="100" r="56" stroke-width="18"></circle>
</svg>
<div>
<div class="gr-footer__brand-name">Compañía de Innovación de Santiago</div>
<div class="gr-footer__brand-tag">Infraestructura, datos y documentos.</div>
</div>
</div>
<div class="gr-footer__grid">
<section class="gr-footer__col">
<h4>Empresa</h4>
<ul>
<li><a href="#catalogo">Quiénes somos</a></li>
<li><a href="#catalogo">Constitución</a></li>
</ul>
</section>
<section class="gr-footer__col">
<h4>Productos</h4>
<ul>
<li><a href="#catalogo">Firmas y Documentos<span class="gr-footer__sub">firma electrónica</span></a></li>
<li><a href="#catalogo">Catálogo</a></li>
</ul>
</section>
<section class="gr-footer__col">
<h4>Contacto</h4>
<ul>
<li><a href="#catalogo">Escribir</a></li>
<li><a href="#catalogo">Soporte</a></li>
</ul>
</section>
<section class="gr-footer__col">
<h4>Ecosistema</h4>
<ul>
<li><a href="#catalogo">Círculo de Santiago</a></li>
<li><a href="#catalogo">cochid</a></li>
</ul>
</section>
</div>
</div>
<div class="gr-footer__attrib">
<div class="gr-footer__attrib-inner gr-footer__attrib-inner--line">
<a class="gr-footer__attrib-link" href="#catalogo">
Operado por <span class="gr-footer__attrib-name">Compañía de Innovación de Santiago SpA</span>
</a>
<span class="gr-footer__attrib-sep">·</span>
<a class="gr-footer__attrib-link" href="#catalogo">
una empresa de
<svg aria-hidden="true" class="gr-footer__attrib-mark" fill="none" height="14" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="14">
<circle cx="12" cy="12" r="10"></circle>
</svg>
<span class="gr-footer__attrib-name">Círculo de Santiago</span>
</a>
</div>
</div>
<div class="gr-footer__base">
<div class="gr-footer__base-inner">
<span>© 2026 Compañía de Innovación de Santiago SpA · RUT 78.384.591-1</span>
<span class="gr-footer__sites">innovacionsantiago.cl · circulodesantiago.cl · cochid.cl</span>
</div>
</div>
</footer>gr-footer gr-footer__top gr-footer__brand gr-footer__brand-name gr-footer__brand-tag gr-footer__grid gr-footer__col gr-footer__sub gr-footer__attrib gr-footer__attrib-inner--line gr-footer__attrib-link gr-footer__attrib-name gr-footer__attrib-sep gr-footer__attrib-mark gr-footer__base gr-footer__base-inner gr-footer__sites<footer class="gr-footer">
<a class="gr-footer__sibling" href="#catalogo">
<svg aria-hidden="true" fill="none" height="22" stroke="currentColor" viewBox="0 0 200 200" width="22">
<circle cx="100" cy="100" r="92" stroke-width="4"></circle>
<circle cx="100" cy="100" r="56" stroke-width="18"></circle>
</svg>
<span class="gr-footer__sibling-text">
<span class="gr-footer__sibling-eyebrow">Operado por</span>
<span class="gr-footer__sibling-name">Compañía de Innovación de Santiago</span>
</span>
<span class="gr-footer__sibling-arrow">→</span>
</a>
<div class="gr-footer__attrib">
<div class="gr-footer__attrib-inner">
<span class="gr-footer__attrib-eyebrow">Una empresa de</span>
<a class="gr-footer__attrib-link" href="#catalogo">
<span class="gr-footer__attrib-name gr-footer__attrib-name--lg">Círculo de Santiago SpA</span>
</a>
</div>
</div>
</footer>gr-footer__sibling gr-footer__sibling-text gr-footer__sibling-eyebrow gr-footer__sibling-name gr-footer__sibling-arrow gr-footer__attrib-inner gr-footer__attrib-eyebrow gr-footer__attrib-name--lgLas 47 clases del chrome, una por una
| Clase | Qué hace | Pieza |
|---|---|---|
| gr-nav | Barra pegada arriba, fondo del papel al 92% con desenfoque y borde inferior de 1 píxel | 1 |
| gr-nav__inner | Rejilla de tres columnas: marca, enlaces, acciones. Limitada al ancho del contenedor | 1 |
| gr-nav__brand | Enlace a la portada; junta el símbolo y el nombre con 10 píxeles de separación | 1 |
| gr-nav__wordmark | Nombre apilado en líneas, mayúsculas, peso 800, altura de línea 0,96 | 1 |
| gr-nav__wordmark--lg | Variante de dos líneas a 16 píxeles sin mayúsculas, la que usa Círculo de Santiago | 2 |
| gr-nav__wordmark--mono | Variante en una línea con JetBrains Mono, forma secundaria de cochid | 2 |
| gr-nav__sub | Segunda palabra del nombre en mono, teñida con el color de acento y peso normal | 2 |
| gr-nav__toggle | Botón de tres barras; oculto sobre 860 píxeles de ancho, visible bajo esa medida. El kit no trae nada que lo haga funcionar, ver la contradicción 6 | 1 |
| gr-nav__links | Contenedor de la navegación; bajo 860 píxeles se convierte en panel desplegable | 1 |
| gr-nav__group | Grupo de enlaces con separador vertical de 1 píxel a la derecha, salvo el último | 1 |
| gr-nav__link | Enlace de navegación, atenuado, con borde inferior transparente de 2 píxeles | 1 |
| gr-nav__actions | Caja derecha que agrupa el cambio de tema y el estado de sesión | 1 |
| gr-nav__theme | Botón cuadrado de 34 píxeles sin radio; muestra sol o luna según el tema activo | 1 |
| gr-nav__cta | Botón de llamada a la acción dentro de la barra, 36 píxeles de alto y radio de control | 2 |
| gr-nav__cta--primary | Relleno con la tinta y texto del color del papel; se atenúa al pasar el cursor | 2 |
| gr-nav__cta--secondary | Sin relleno; el borde aparece al pasar el cursor. Se oculta en pantallas chicas | 2 |
| gr-login | Caja del estado de sesión; el estado lo decide el servidor o la compilación, sin JavaScript | 1, 2 |
| gr-login__enter | Píldora del estado anónimo; el borde y el texto se tiñen de acento al pasar el cursor | 1 |
| gr-login__user | Píldora del estado autenticado, con punto y nombre dentro | 2 |
| gr-login__dot | Punto de 7 píxeles con el color de acento; el único círculo relleno del kit | 2 |
| gr-login__name | Nombre recortado a 14 caracteres con puntos suspensivos | 2 |
| gr-login__exit | Enlace de salida sin recuadro, atenuado hasta que el cursor pasa encima | 2 |
| gr-footer | Pie con borde superior fuerte; el margen automático lo empuja al fondo de la ventana | 3 |
| gr-footer__top | Rejilla de dos columnas: bloque de marca de 260 píxeles y rejilla de secciones | 3 |
| gr-footer__brand | Bloque de marca del pie: símbolo arriba a la izquierda y textos al lado | 3 |
| gr-footer__brand-name | Nombre de la entidad en 14 píxeles peso 700 | 3 |
| gr-footer__brand-tag | Bajada en mono de 11 píxeles, ancho máximo de 24 caracteres | 3 |
| gr-footer__grid | Cuatro columnas que bajan a dos en 960 píxeles y a una en 560 | 3 |
| gr-footer__col | Columna del pie; su título va en mono mayúsculas con borde inferior, y su lista sin viñetas | 3 |
| gr-footer__sub | Rótulo secundario en mono debajo de un enlace de la columna | 3 |
| gr-footer__attrib | Franja de vinculación societaria, con borde superior de 1 píxel | 3, 4 |
| gr-footer__attrib-inner | Contenido de la franja, apilado en columna con 10 píxeles de separación | 4 |
| gr-footer__attrib-inner--line | Variante de una sola línea que llegó con la versión 7.1 | 3 |
| gr-footer__attrib-eyebrow | Rótulo en mono mayúsculas con separación de letras de 0,14 em | 4 |
| gr-footer__attrib-link | Enlace de la vinculación, 12,5 píxeles, atenuado y sin subrayado | 3, 4 |
| gr-footer__attrib-name | Nombre de la entidad dentro de la frase, peso 600 y tinta plena | 3 |
| gr-footer__attrib-name--lg | Variante prominente del nombre: 16 píxeles peso 800 | 4 |
| gr-footer__attrib-sep | Separador atenuado entre las dos partes de la línea | 3 |
| gr-footer__attrib-mark | Símbolo de la matriz en línea dentro de la frase, alineado 2 píxeles bajo la base | 3 |
| gr-footer__sibling | Fila entera clickeable de vinculación, con borde arriba y abajo; se ilumina al pasar el cursor | 4 |
| gr-footer__sibling-text | Bloque de texto de la fila, en columna | 4 |
| gr-footer__sibling-eyebrow | Rótulo "Operado por" en mono mayúsculas atenuado | 4 |
| gr-footer__sibling-name | Nombre de la operadora en 17 píxeles peso 700, sin la sigla SpA | 4 |
| gr-footer__sibling-arrow | Flecha en mono empujada al extremo derecho con margen automático | 4 |
| gr-footer__base | Franja legal inferior, 12 píxeles y color atenuado | 3 |
| gr-footer__base-inner | Fila que reparte el aviso de derechos a la izquierda y los dominios a la derecha | 3 |
| gr-footer__sites | Lista de dominios hermanos en mono 11,5 píxeles con 75% de opacidad | 3 |
Componentes, las 27 clases sin prefijo
Estas sí se sostienen solas. Cada fila muestra el nombre, lo que hace y la pieza renderizada de verdad con el CSS de la versión 7.
Botón primario. Relleno de tinta, borde de 1 píxel, sin radio. Al pasar el cursor pasa al color de acento.
Variante secundaria: sin relleno, borde en la línea fuerte, texto en tinta.
Reduce el relleno a 8 por 14 píxeles y la letra a 13. Se combina con las otras dos.
Rejilla de tres tarjetas que baja a dos en 960 píxeles y a una en 600. Trae el relleno del contenedor incorporado.
.cardsTarjeta base. Borde de 1 píxel y barra de color a la izquierda que crece de 3 a 5 píxeles al pasar el cursor. Alto mínimo de 210 píxeles.
Cuadro de 34 píxeles con borde y fondo teñidos con un 28% y un 8% del color de la tarjeta.
Rótulo en mono mayúsculas de 10,5 píxeles con el color de la tarjeta.
Enlace de cierre en mono mayúsculas, pegado al fondo de la tarjeta, subrayado con el color de acento.
Doce sitios medidos, treinta y seis repositorios con frontend, ochenta y seis clases catalogadas.
Tarjeta destacada: borde superior de 4 píxeles con el color de la tarjeta y relleno más generoso.
.feature-cardCabecera con doble línea inferior en tinta plena, mono mayúsculas. El único borde doble del kit.
Ficha de cifra: caja con borde, sin radio, fondo elevado.
.statCifra en mono de 28 píxeles peso 700, con separación de letras negativa. La voz de cochid.
.statRótulo de la cifra en mono mayúsculas de 10,5 píxeles, atenuado.
Grupo de formulario: etiqueta arriba, control abajo, 6 píxeles de separación y 14 de margen inferior.
Campo único para texto, selección y área. Radio de control de 6 píxeles y halo de acento al enfocar.
| Repositorio | Framework | Configuraciones |
|---|---|---|
| cochid-tpte | Next.js | 2 |
| cis-www | Vite | 1 |
| illanes00-blog | Astro | 1 |
Tabla de 13,5 píxeles. Los títulos van en mono mayúsculas sobre una línea fuerte; las filas se separan con la línea suave.
Alinea a la derecha las celdas con clase de número y les aplica cifras de ancho fijo.
Distintivo en mono mayúsculas sobre el fondo suave del acento.
Variante verde. El color y el borde salen del token de estado correcto.
Variante ámbar para lo que está atrasado pero no roto.
Variante roja para lo que contradice el canon.
Tarjeta de acceso de 420 píxeles. Es la única pieza del kit con sombra, y es profunda a propósito.
.login-cardBloque de marca centrado, ancho máximo de 320 píxeles y 20 de margen inferior.
.login-cardTítulo de 22 píxeles peso 700 con separación de letras negativa.
.login-cardBotón de acceso externo. Es la única pieza con colores fijos, blanco y gris de Google, y con forma de píldora.
.login-cardBotón de ancho completo y 44 píxeles de alto, en tinta plena.
.login-cardPie de la tarjeta, centrado y atenuado; sus enlaces van en color de acento y se subrayan al pasar el cursor.
Cuatro clases más, definidas junto a los tokens
Ancho máximo de 1240 píxeles, centrado, con relleno lateral de 32 píxeles que baja a 20 en pantallas chicas.
Así se ve un párrafo largo con la clase de prosa: el ancho se corta a 68 caracteres para que el ojo no se pierda al saltar de línea, que es el único motivo por el que existe esa medida.
Prosa larga: 15 píxeles, altura de línea 1,6 y ancho máximo de 68 caracteres.
Rótulo superior en mono mayúsculas con separación de 0,18 em y color de acento. El gesto de firma del grupo.
La misma pieza en color atenuado, para cuando el acento pesa demasiado.
Cuatro clases de marca
<span class="cochid-mark"></span>
<span class="pg-dim pg-mono">tal como está en el repositorio, con la esquina redondeada</span>Alternativa en CSS al cuadrado azul, para contextos donde no se puede emitir el SVG. Hoy lleva un radio de 1 píxel que no debería tener, ver la sección F.
<svg aria-label="cochid" height="26" role="img" viewBox="0 0 24 24" width="26"><rect fill="#1d4ed8" height="20" width="20" x="2" y="2"></rect></svg>
<span class="cochid-namebrand"><span>Compañía Chilena</span><span>de Inteligencia</span><span>de Datos</span></span>Nombre completo en mayúsculas apilado en tres líneas. Equivale tipográficamente al nombre de la barra del chrome.
<span class="cochid-wordmark pg-wm-lg">cochid</span>Forma secundaria en mono minúscula, para prosa y contextos compactos. Acompaña al cuadrado, no lo reemplaza.
<span class="illanes00-wordmark pg-wm-lg">illanes00</span>Nombre en mono peso 700. Los sitios personales no tienen símbolo gráfico, solo tipografía.
Fuente: /srv/projects/core/core-style/v7/base/chrome.css,
base/components.css, base/tokens.css y
brands/cochid/tokens.css, brands/illanes00/tokens.css.
Todas las piezas de esta sección están renderizadas con ese mismo CSS, copiado en línea.
Sección D
Versión 6 contra versión 7
La versión 7 no es un renombrado de la versión 6: es un recorte al hueso. El kit anterior definía 267 clases distintas solo en sus archivos de componentes, 125 de ellas sin prefijo, entre botones, formularios, avisos, rejillas y utilidades. Encima de eso registraba trece componentes de navegador como etiquetas propias. La versión 7 tiene 86 clases en total y cero componentes de navegador: queda en menos de un tercio del tamaño.
shell.js registraba trece
etiquetas propias con sus alias antiguos, y la barra pedía datos por red para armarse. La
cabecera de chrome.css de la versión 7 lo prohíbe de manera
explícita: el chrome se emite estático en la compilación o desde el servidor, y el único
JavaScript permitido es el cambio de tema, con protección contra doble ejecución.
El comentario cita el motivo: el bucle infinito de la barra anterior.
Lo que sí tiene equivalente
| Versión 6 | Versión 7 | Qué cambió |
|---|---|---|
| <cis-navbar> | .gr-nav y sus 16 partes | De etiqueta propia con datos por red a HTML estático |
| <cis-footer> y .cis-footer | .gr-footer y sus 25 partes | Mismo cambio de mecanismo, y la vinculación societaria se expande de 2 clases a 13 |
| .cis-footer__brand-block | .gr-footer__brand | Solo el nombre |
| .cis-footer__brand-name | .gr-footer__brand-name | Solo el prefijo |
| .cis-footer__tagline | .gr-footer__brand-tag | Solo el nombre |
| .cis-footer__grid | .gr-footer__grid | Solo el prefijo |
| .cis-footer__col | .gr-footer__col | Solo el prefijo |
| .cis-footer__heading | .gr-footer__col h4 | Deja de ser clase y pasa a selector de elemento |
| .cis-footer__link | .gr-footer__col a | Mismo caso |
| .cis-footer__attribution y __parent-attr | .gr-footer__attrib y 7 más | De 2 clases a 8: se agregan la variante de línea única, el separador y el símbolo en línea |
| .cis-footer__row | .gr-footer__base-inner | Solo el nombre |
| .cis-hero__eyebrow | .eyebrow | Se despega del hero y pasa a ser una pieza suelta con variante atenuada |
| .cis-kpi, __value, __label | .stat, .stat__value, .stat__label | Renombre y recorte: la familia baja de 8 clases a 3 |
| .btn, .btn-primary | .btn | La variante primaria desaparece porque el botón base ya es el primario |
| .btn-sm | .btn--sm | Pasa a guión doble |
| .btn-success, .btn-danger, .btn-lg | .btn--ghost | Tres variantes de color y una de tamaño se cambian por una sola variante sin relleno |
| .card, .card-header, .card-footer | .card, .card__tag, .card__icon, .card__link | Cambia el reparto: la cabecera se parte en rótulo e ícono, y aparece el enlace de cierre |
| .card-compact | .feature-card | La variante compacta se cambia por una destacada, que es lo contrario |
| .badge, .pill--ok, --warn, --err | .badge, .badge--ok, --warn, --err | El distintivo y la píldora se fusionan en una sola familia |
| .form-group | .field | Solo el nombre |
| .form-input, .form-select, .form-textarea | .input | Tres controles se unifican en uno |
| .form-label | .field label | Pasa a selector de elemento |
| .table-wrap, .table-compact | .table, .table--num | Se va el envoltorio y llega la variante de cifras alineadas |
| .container, .container-sm, .container-lg | .container | Queda un solo ancho, 1240 píxeles |
Lo que desapareció sin reemplazo
Dieciocho familias completas de la versión 6 no tienen ninguna clase equivalente en la versión 7. Si un sitio las usa hoy, migrar significa reescribir esa pieza, no renombrarla.
| Familia de la versión 6 | Clases | Qué era |
|---|---|---|
| .cis-art | 18 | Ilustraciones de portada con variantes por comuna y por textura |
| .cis-search | 16 | Buscador con lista de resultados, estados de carga, vacío y error |
| .cis-sidebar | 12 | Barra lateral de aplicación con secciones, distintivos y buscador |
| .cis-hero | 10 | Portada con rótulo, titular, bajada, acciones y medio |
| .cis-modal | 9 | Ventana modal con capa de fondo, cabecera, cuerpo y pie |
| .cis-drawer | 9 | Panel lateral deslizante |
| .cis-toast | 9 | Avisos apilados con ícono, acción y cierre |
| .cis-stepper | 9 | Indicador de pasos con variante para pantallas chicas |
| .cis-accordion | 8 | Secciones plegables |
| .cis-popover | 8 | Menú flotante con separadores y atajos de teclado |
| .cis-kpi | 8 | Ficha de indicador. Sobrevive parcialmente como .stat, pero se pierden la variación, la unidad y el gráfico en miniatura |
| .cis-breadcrumb | 7 | Ruta de navegación con separadores y truncado |
| .cis-empty | 7 | Estado vacío con ícono, titular, descripción y acción |
| .cis-tabs | 7 | Pestañas con contador e ícono |
| .cis-avatar | 6 | Retrato con iniciales, estado y agrupación |
| .cis-code | 6 | Bloque de código con lenguaje y botón de copiar |
| .cis-skeleton | 3 | Marcas de carga |
| .alert-* | 5 | Avisos en bloque de cuatro colores. Lo más cercano en la versión 7 es el distintivo, que es mucho más chico |
Lo que nace en la versión 7
En sentido contrario, la versión 7 agrega piezas que la versión 6 no tenía:
la familia de .login-card con sus 6 clases, que codifica el flujo
de acceso de auth.innovacionsantiago.cl; la familia de
.gr-login con 6 clases para el estado de sesión sin JavaScript; y
las 13 clases de vinculación societaria del pie, que son la traducción a CSS de la relación
entre Círculo de Santiago SpA como matriz y Compañía de Innovación de Santiago SpA como
operadora.
Fuente de la versión 6: /srv/projects/cis/cis-style/src/
(150 clases con prefijo en 19 archivos de componentes; 153 si se cuenta todo el directorio) y
/srv/projects/cis/cis-style/dist/v6/shell.js
(4.317 líneas; el mapa de componentes registra 13 etiquetas, cada una con su alias antiguo).
Sección E
Librerías de terceros, por función
Recuento sobre los 57 archivos package.json del
servidor, sin contar los directorios de dependencias instaladas ni los de compilación.
La unidad es el repositorio: si un repositorio declara la misma librería en dos paquetes
internos, cuenta una vez.
Framework
| Librería | Repositorios | Para qué se usa | Dónde vive |
|---|---|---|---|
| react | 35 | La base de casi todo lo que tiene interfaz | transversal |
| typescript | 40 | Tipado; es la dependencia más extendida del ecosistema | transversal |
| next | 22 | Renderizado en el servidor y generación estática, con enrutador de aplicación | 12 de cochid, 7 del perímetro de la Compañía de Innovación de Santiago, 2 de Círculo de Santiago, 1 de core |
| vite | 14 | Compilación de aplicaciones de una sola página | 8 del perímetro de la Compañía de Innovación de Santiago, 4 de cochid, 1 de Círculo de Santiago, 1 personal |
| astro | 1 | Sitio de contenido; el canon no lo menciona | illanes00-blog |
| react-router-dom | 7 | Enrutado del lado del navegador en las aplicaciones de Vite | cis-admin, cis-docs, cis-infra, cis-www, firmasydocumentos, cds-sebastian, cochid-scribe |
36 repositorios distintos tienen archivo de configuración de framework: 22 de Next.js (23 archivos, porque cochid-tpte tiene dos aplicaciones), 14 de Vite y 1 de Astro. cochid-scribe aparece en las dos primeras listas: su frontend es Next.js y su explorador de documentos es Vite.
Estilos
| Librería | Repositorios | Para qué se usa | Dónde vive |
|---|---|---|---|
| tailwindcss | 22 | Utilidades sueltas; es el sistema de estilos real de la mayoría, más que el kit | casi todos los repositorios de Next.js |
| @tailwindcss/postcss | 10 | Integración de Tailwind versión 4 con la cadena de PostCSS | los repositorios ya migrados a la versión 4 |
| @cochid/style | 3 | El propio kit del grupo, consumido como paquete en vez de por hoja de estilo | cochid-mapas, cochid-mundial, cochid-taller |
| bootstrap | 0 | No lo declara ningún package.json, pero thesis.cochid.cl lo carga igual desde un CDN externo | sin declarar |
Mapas
| Librería | Repositorios | Para qué se usa | Dónde vive |
|---|---|---|---|
| maplibre-gl | 6 | Mapas vectoriales con aceleración por hardware; es el estándar de hecho del grupo | cochid-cables, cochid-mapas, cochid-mundial, cochid-santiago-pocket, cochid-taller, core-maps |
| pmtiles | 3 | Teselas en un archivo único, sin servidor de teselas | cochid-santiago-pocket, cochid-taller, core-maps |
| react-simple-maps | 3 | Mapas temáticos declarativos sobre SVG, sin motor de teselas | cochid-datos, cochid-mapas, core-maps |
| leaflet | 2 | Mapas de teselas de imagen; es la generación anterior de maplibre | cochid-thesis, cochid-tpte |
Gráficos
| Librería | Repositorios | Para qué se usa | Dónde vive |
|---|---|---|---|
| d3 | 4 | Gráficos a medida, escalas y proyecciones. Se usa cuando la forma no cabe en una librería de componentes | cochid-cables, cochid-datos, cochid-scribe, cochid-thesis |
| recharts | 4 | Gráficos declarativos de React para formas comunes | situacion-www, cochid-datos, cochid-elecciones, cochid-scribe |
| react-plotly.js | 2 | Gráficos interactivos con controles incluidos | cochid-elecciones, cochid-graphs |
| plotly.js-dist-min | 1 | El motor de Plotly que consume la capa anterior | cochid-graphs |
| chart.js con react-chartjs-2 | 1 | Gráficos sobre lienzo; el único repositorio que lo usa | cochid-thesis |
| matplotlib | 4 | Gráficos del lado del servidor, en Python, para figuras de informes | archivos de requisitos de cochid-graphs, cochid-graphs-legacy y cochid-thesis |
| plotly (Python) | 2 | La misma librería, del lado del servidor | archivos de requisitos de cochid-graphs |
Cinco librerías de gráficos distintas para el mismo problema, más dos en
Python. Ninguna comparte paleta con las otras: la única paleta declarada del grupo son los
diez colores de --cochid-chart-1 a
--cochid-chart-10 en los tokens de marca de cochid, y ninguna de
las cinco librerías los lee.
Componentes sin estilo
| Librería | Repositorios | Para qué se usa | Dónde vive |
|---|---|---|---|
| @radix-ui/react-tooltip | 2 | Globos de ayuda con accesibilidad resuelta y cero estilo propio | cis-usaia, cochid-datos |
| @radix-ui/react-dialog | 2 | Ventana modal, con foco atrapado y cierre por teclado | cis-usaia, cochid-datos |
| @radix-ui/react-popover | 1 | Panel flotante anclado | cochid-datos |
| @radix-ui/react-dropdown-menu | 1 | Menú desplegable navegable con teclado | cochid-datos |
| lucide-react | 6 | Íconos de trazo; es la librería de íconos de hecho | cis-admin, cis-inbox, cis-librospa, cis-usaia, cochid-scribe |
| @tanstack/react-query | 6 | Estado de datos remotos. No es interfaz, pero decide cuándo se muestra cada estado | cis-admin, cis-inbox, cis-usaia, cds-sebastian, cochid-scribe |
Las cuatro piezas de Radix cubren exactamente cuatro de las familias que la versión 7 borró de la versión 6: ventana modal, menú flotante, globo de ayuda y desplegable. Los repositorios que las necesitaron no esperaron al kit, fueron a buscarlas afuera. Están concentradas en dos repositorios de los treinta y seis.
Sección F
Contradicciones
Ocho, ordenadas de la más concreta a la más estructural. Cada una con el número medido y el archivo donde se comprueba.
1 Dos sitios cargan código desde CDN externos
thesis.cochid.cl carga
bootstrap@5.3.2, su paquete de JavaScript y
bootstrap-icons@1.11.0 desde
cdn.jsdelivr.net. El canon prohíbe los CDN externos. Es el
único sitio de los doce medidos que lo hace, y es también el único con marcas de Bootstrap
inequívocas en su HTML: container-fluid, col-lg-4,
col-md-6, navbar-brand, form-control,
card-body y catorce más.
Agravante: Bootstrap no aparece declarado en ningún
package.json del servidor. Es una dependencia real y
en producción que no existe en ningún manifiesto, así que ninguna auditoría de dependencias
la ve.
Y no es el único. economia.cochid.cl carga
plotly-2.35.2.min.js desde
cdn.plot.ly. Ese caso incomoda más, porque
economia.cochid.cl es uno de los tres sitios que sí montan la versión 7 canónica:
cumple con el kit, con las tipografías propias y con la marca, y aun así trae un megabyte
de JavaScript de un tercero. Cumplir con el kit y cumplir con el canon resultaron ser dos
cosas distintas.
Barrí los doce sitios buscando cualquier host externo en un atributo de carga: estos dos son los únicos. El resto de los dominios ajenos que aparecen (github.com, arxiv.org, www.ine.gob.cl, www.flow.cl) son enlaces de texto, no recursos.
2 Tipografías de Google en seis repositorios
El canon es explícito: solamente IBM Plex Sans y JetBrains Mono, alojadas por el grupo,
nunca desde el CDN de Google. Seis repositorios importan
next/font/google en su archivo de disposición:
- Piden tipografías prohibidas:
cochid-datosycochid-mapaspiden Inter y Lato;situacion-wwwycochid-cablespiden Geist y Geist Mono. - Piden las correctas por la vía prohibida:
cochid-thesispide IBM Plex Sans, JetBrains Mono y además Literata;cochid-tptepide las dos correctas. En ambos casos la fuente es Google, no el servidor del grupo.
Los propios tokens de marca de cochid ya anotan el problema en un comentario, con la frase "reemplaza el Inter y el Lato de next/font/google cuando se migre". Sigue sin migrarse.
3 El canon dice Vite y no Next.js; el conteo crudo es 22 contra 14
Acá hay que ser preciso, porque el número grande engaña. El texto del canon es
## Frontend (Vite, NO Next.js), pero acota el alcance en la
línea siguiente: cis-www, cis-admin después de la decisión ADR-010, cis-usaia y las
aplicaciones de una sola página de projects. Dentro de ese alcance la regla se
cumple: los tres repositorios nombrados son Vite hoy. Contar los 12 repositorios
de Next.js de cochid como infracciones sería incorrecto, porque la regla nunca los reclamó.
Lo que sí es falso es el paréntesis del canon que dice
"Next legacy, solo periodismo2-frontend". Dentro del perímetro de la Compañía de
Innovación de Santiago hay Next.js en cis-psi, cis-claudia,
cis-inbox, cis-librospa, situacion-www y
periodismo2-frontend, más el cis-admin anterior que quedó en
cds/cis/cis-admin con su
next.config.mjs intacto, hoy accesible como el enlace
cis-admin-legacy. Son seis repositorios vigentes más uno
superado, no uno.
Y hay un cuarto framework que el canon no menciona en ninguna parte:
Astro, en illanes00-blog.
4 El cuadrado de cochid quedó redondeado a medias
La marca de cochid es un cuadrado azul #1d4ed8 sin esquina
redondeada. El archivo brands/cochid/mark.svg ya salió
corregido: su rectángulo no tiene atributo de radio, y la copia anterior con
rx="1" quedó respaldada al lado con fecha de hoy.
Pero la alternativa en CSS del mismo directorio sigue sin corregir:
brands/cochid/tokens.css, línea 97, define
.cochid-mark { border-radius: 1px }. Cualquier sitio que use esa clase en vez
de emitir el SVG sigue mostrando el logo con la esquina redondeada. Está renderizada tal
cual en la sección C para que se vea.
5 Tres prefijos distintos para el mismo diseño
El mismo esqueleto de barra y pie existe hoy con tres nombres:
gr-* en el kit canónico,
cds-* compilado dentro de
circulodesantiago.cl y
cis-footer-lite__* en
thesis.cochid.cl. La tabla de la sección B muestra la
correspondencia clase por clase: gr-nav__inner contra
cds-nav__inner, gr-footer__grid contra
cds-footer__grid y así.
Esto no es deuda de diseño, es deuda de nombres. Los dos sitios ya adoptaron la versión 7; lo que no hicieron fue cargarla desde su origen. Cada arreglo del kit hay que aplicarlo tres veces.
6 La versión 7 se pisa con Bootstrap por diseño propio
El chrome de la versión 7 usa prefijo, pero los componentes no:
.btn, .card, .table, .badge e
.input. Los primeros cuatro son exactamente los de Bootstrap. Donde conviven,
gana el que se cargue después, y eso depende del orden de las etiquetas de estilo, no de
ninguna decisión.
Ya está pasando: thesis.cochid.cl carga Bootstrap, que define
.card y .table, junto a su copia de la versión 7, que define las
mismas dos. Y cochid.cl mezcla
btn-primary y btn-secondary de Bootstrap con el
.btn del kit en la misma página.
El chrome además depende de cuatro clases de estado sin prefijo que no aparecen en ningún
catálogo: is-active, is-open, icon-sun e
icon-moon. Copiar el marcado de la barra sin ellas deja el enlace activo sin
subrayar y el botón de tema mostrando los dos íconos a la vez.
Y una de las cuatro no la enciende nadie. Bajo 860 píxeles de ancho,
.gr-nav__links queda oculta y solo vuelve con .is-open. Pero
theme.js es el único JavaScript que el kit permite, y solo
toca el tema: ninguna pieza de la versión 7 pone ni saca esa clase. El
menú de la barra en pantallas chicas no lo abre el kit.
Cada sitio lo resolvió por su cuenta, y de tres maneras distintas:
catalogo.innovacionsantiago.cl emite su propio script en línea
para el menú, además de theme.js;
firmasydocumentos.cl emite el botón de tres barras pero
ningún script que lo escuche, así que su botón está muerto en móvil; y
economia.cochid.cl directamente no emite el botón. Esta misma
página está en el segundo caso a propósito, porque el encargo pedía un solo JavaScript.
Es la contradicción más barata de arreglar de las ocho: son diez líneas en
theme.js, con la misma protección contra doble ejecución que
ya tiene.
7 Cuatro sitios siguen en la versión 6 o en ninguna
cochid.cl, datos.cochid.cl y
mapas.cochid.cl siguen cargando
/v6/cis.min.css, el kit anterior completo, 39.617 bytes minificados.
periodismo2.cl es un caso aparte: carga solo las
tipografías de la versión 6 y ningún componente, y arma toda su interfaz
con 91 utilidades de Tailwind. docs.circulodesantiago.cl no
carga ninguna hoja externa.
Como los tres primeros son de cochid, y cochid ya tiene su propio host de la versión 7
funcionando en style.cochid.cl, la migración no está bloqueada
por infraestructura.
8 Dos orígenes del mismo kit, sincronizados por casualidad
La versión 7 se sirve desde style.innovacionsantiago.cl/v8/ y
desde style.cochid.cl/v7/. Hoy los cuatro archivos base son
idénticos byte a byte entre los dos hosts y contra el repositorio, cosa que comprobé y está
en la tabla de la sección A. No encontré ningún mecanismo que lo garantice hacia adelante:
una publicación a un host y no al otro los separa sin que nada avise.
Es la única de las ocho que hoy no está rota. Está anotada porque el costo de que se rompa es alto y el de vigilarla es bajo.
Cómo se midió
Los frameworks salen de recorrer /srv/projects/
completo buscando archivos de configuración y package.json,
saltando directorios de dependencias instaladas, de compilación y de control de versiones,
y sin seguir enlaces simbólicos, así que los trece enlaces de
cis/ hacia cds/cis/ no cuentan dos
veces. Las clases del kit salen de leer el CSS del repositorio de origen. Las clases de los
sitios salen de descargar cada portada y extraer todos los atributos de clase del HTML
servido.
Lo que esta medición no puede ver: el servidor donde se hizo
la auditoría no tiene navegador, así que no fue posible construir el árbol de las aplicaciones
de una sola página. Para innovacionsantiago.cl,
circulodesantiago.cl, datos.cochid.cl,
mapas.cochid.cl, periodismo2.cl y
auth.innovacionsantiago.cl el conteo de clases es un piso y no un
total. Las hojas de estilo que cada uno carga, en cambio, sí son exactas: esas vienen de las
etiquetas del documento, que el servidor sí entrega.
Todos los números de esta página se midieron el 5 de agosto de 2026, con descarga activa y sin caché para los sitios en vivo, y sobre el árbol de archivos vigente para los repositorios.