cis-style · hub · kit v9 · f417275

Ejemplos de páginas completas

Cinco páginas enteras, montadas vivas dentro de un contenedor con borde, sin iframes: login, panel interno, landing de marca, formulario largo y documentación. Cada una trae su código completo colapsado bajo la muestra, con el head canónico del kit: hojas fijadas al digest, bootstrap anti-flash y chrome.js con defer.

Copia el código de la que se parezca a tu caso y parte desde ahí. Las muestras usan solo clases reales del kit v9 con la marca CIS; para otra marca cambias una sola hoja, brands/<marca>/tokens.css.

1 · Página de login

Cuándo. Para la portada de acceso de un servicio privado. La spec viene del flow de auth.innovacionsantiago.cl (custom.css v1.8): card de 420 px centrada, borde 1px, sin radius en el card, y el orden fijo logo, título, botón SSO, formulario, links. El botón SSO externo es la única pill blanca del sistema.

Código completo de la página

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Entrar · cis-admin</title>
<script>
(function(){try{var t=localStorage.getItem("group-theme");
if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t);
}catch(_){}})();
</script>
<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>
</head>
<body>
<main style="display:flex;align-items:center;justify-content:center;min-height:480px;padding:48px 20px">
  <div class="login-card">
    <svg width="40" height="40" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true" style="display:block;margin:0 auto 16px"><circle cx="100" cy="100" r="92" stroke-width="4"/><circle cx="100" cy="100" r="56" stroke-width="18"/></svg>
    <h1 class="login-card__title" style="text-align:center">Entrar a cis-admin</h1>
    <button class="login-card__sso" type="button">Continuar con Google</button>
    <div style="display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--ink-soft);font-size:12px" aria-hidden="true"><span style="flex:1;border-top:1px solid var(--line)"></span>o con tu correo<span style="flex:1;border-top:1px solid var(--line)"></span></div>
    <form>
      <div class="field"><label for="correo">Correo</label><input class="input" id="correo" name="correo" type="email" autocomplete="username" required></div>
      <div class="field"><label for="clave">Contraseña</label><input class="input" id="clave" name="clave" type="password" autocomplete="current-password" required></div>
      <button class="login-card__btn" type="submit">Entrar</button>
    </form>
    <p class="login-card__meta">Una sola cuenta para todo el grupo<br><a href="https://auth.innovacionsantiago.cl">auth.innovacionsantiago.cl</a></p>
  </div>
</main>
</body>
</html>

H19 · «La autenticación se integra a cis-auth por OIDC con core-auth-lib. No se reinventa login ni JWT por servicio.» Esta página es la cáscara del flow central; un formulario de usuario y clave servido por tu propia aplicación viola la regla. Fuente: base/components.css §login-card · cis-modelo/modelo/reglas.py.

2 · Panel interno

Cuándo. Para el home de un servicio interno después del gate. Fila de .stat con cifras mono, tabla .table con encabezados mono uppercase y la columna numérica alineada a la derecha con td.num, y .badge en sus cuatro voces: neutra, ok, warn y err. El chip de sesión .gr-login llega resuelto server-side, cero JS. Al pie, el sello de frescura: timestamp, fuente y si el dato fue refresco activo.

Compañíade Innovaciónde Santiago

Panel · operación

Estado del día

95sitios servidos

24servicios activos

3alertas abiertas

99,2%uptime 30 días

Servicios

Registrar servicio

Servicio	Host	Estado	Latencia
cis-admin	admin.innovacionsantiago.cl	activo	38 ms
cis-verify	docs.circulodesantiago.cl	activo	52 ms
cochid-datos	datos.cochid.cl	degradado	410 ms
wabridge	interno	caído	s/d
cis-mailer	interno	en pausa	s/d

Datos al 2026-08-20 09:41 · fuente: sonda cis-modelo · refresco activo

Código completo de la página

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Panel · cis-admin</title>
<script>
(function(){try{var t=localStorage.getItem("group-theme");
if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t);
}catch(_){}})();
</script>
<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>
</head>
<body>
<header class="gr-nav">
  <div class="gr-nav__inner">
    <a class="gr-nav__brand" href="/"><svg width="32" height="32" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"/><circle cx="100" cy="100" r="56" stroke-width="18"/></svg> <span class="gr-nav__wordmark"><span>Compañía</span><span>de Innovación</span><span>de Santiago</span></span></a>
    <nav class="gr-nav__links" aria-label="Navegación principal">
      <div class="gr-nav__group"><a class="gr-nav__link is-active" href="/panel">Panel</a><a class="gr-nav__link" href="/servicios">Servicios</a><a class="gr-nav__link" href="/documentos">Documentos</a></div>
      <div class="gr-nav__group"><a class="gr-nav__link" href="/ayuda">Ayuda</a></div>
    </nav>
    <div class="gr-nav__actions">
      <div class="gr-login" data-state="auth">
        <a class="gr-login__user" href="/cuenta"><span class="gr-login__dot"></span><span class="gr-login__name">M. Illanes</span></a>
        <a class="gr-login__exit" href="/oauth/logout">Salir</a>
      </div>
    </div>
  </div>
</header>
<main class="container" style="padding-top:36px;padding-bottom:64px">
  <p class="eyebrow">Panel · operación</p>
  <h1 style="font-size:var(--fs-section);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:8px 0 28px">Estado del día</h1>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:0 0 36px">
    <div class="stat"><span class="stat__value">95</span><span class="stat__label">sitios servidos</span></div>
    <div class="stat"><span class="stat__value">24</span><span class="stat__label">servicios activos</span></div>
    <div class="stat"><span class="stat__value">3</span><span class="stat__label">alertas abiertas</span></div>
    <div class="stat"><span class="stat__value">99,2%</span><span class="stat__label">uptime 30 días</span></div>
  </div>
  <div style="display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 12px">
    <h2 style="margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em">Servicios</h2>
    <a class="btn btn--ghost btn--sm" href="/servicios/nuevo">Registrar servicio</a>
  </div>
  <table class="table">
    <thead><tr><th>Servicio</th><th>Host</th><th>Estado</th><th style="text-align:right">Latencia</th></tr></thead>
    <tbody>
      <tr><td>cis-admin</td><td>admin.innovacionsantiago.cl</td><td><span class="badge badge--ok">activo</span></td><td class="num">38 ms</td></tr>
      <tr><td>cis-verify</td><td>docs.circulodesantiago.cl</td><td><span class="badge badge--ok">activo</span></td><td class="num">52 ms</td></tr>
      <tr><td>cochid-datos</td><td>datos.cochid.cl</td><td><span class="badge badge--warn">degradado</span></td><td class="num">410 ms</td></tr>
      <tr><td>wabridge</td><td>interno</td><td><span class="badge badge--err">caído</span></td><td class="num">s/d</td></tr>
      <tr><td>cis-mailer</td><td>interno</td><td><span class="badge">en pausa</span></td><td class="num">s/d</td></tr>
    </tbody>
  </table>
  <p style="margin:12px 0 0;font:11px var(--font-mono);letter-spacing:.06em;color:var(--ink-soft)">Datos al 2026-08-20 09:41 · fuente: sonda cis-modelo · refresco activo</p>
</main>
</body>
</html>

H16 · la jerarquía se hace con fondo, tipografía o etiqueta, nunca con una barrita de acento a la izquierda. La grilla de stats usa auto-fit para colapsar sola en pantallas angostas, sin CSS extra. Fuente: base/components.css §stat, tablas y badges · /srv/projects/CLAUDE.md §Stale-data y freshness checks.

3 · Landing de marca

Cuándo. Para la portada pública de una marca. Hero con --fs-hero y énfasis por color (h1 em toma el acento, sin cursiva), grilla .cards con .feature-card de masthead double rule, cards planas con icono, tag y link mono, y el footer con la línea de vinculación societaria v7.1.

Compañíade Innovaciónde Santiago

Escríbenos

Compañía de Innovación de Santiago

Construimos el software que opera al grupo

Administración, documentos verificables, datos públicos y correo transaccional. Todo corre sobre un kit de estilo, un login y una infraestructura.

Escríbenos Ver servicios

Administración

cis-admin

Contabilidad, facturación electrónica y CRM en un panel único para las tres sociedades.

Documentos

cis-verify

Actas y certificados con código de verificación: el papel se valida contra el original en línea.

Datos

cochid datos

Series públicas de presupuesto, salud y territorio, listas para consultar y descargar.

Design system

Un kit para todas las marcas

Tokens, chrome y componentes versionados; cada sitio fija su digest.

Ver el kit -> Identidad

Un login para todo

cis-auth resuelve la sesión por OIDC; tu servicio recibe la identidad hecha.

Cómo integrarse -> Correo

Transaccional que llega

cis-mailer envía desde dominios verificados del grupo, con registro por pieza.

Ver el servicio ->

Código completo de la página

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Compañía de Innovación de Santiago</title>
<script>
(function(){try{var t=localStorage.getItem("group-theme");
if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t);
}catch(_){}})();
</script>
<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>
</head>
<body>
<header class="gr-nav">
  <div class="gr-nav__inner">
    <a class="gr-nav__brand" href="/"><svg width="32" height="32" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"/><circle cx="100" cy="100" r="56" stroke-width="18"/></svg> <span class="gr-nav__wordmark"><span>Compañía</span><span>de Innovación</span><span>de Santiago</span></span></a>
    <nav class="gr-nav__links" aria-label="Navegación principal">
      <div class="gr-nav__group"><a class="gr-nav__link is-active" href="/">Inicio</a><a class="gr-nav__link" href="/servicios">Servicios</a><a class="gr-nav__link" href="/trabajo">Trabajo</a></div>
    </nav>
    <div class="gr-nav__actions">
      <div class="gr-login" data-state="anon"><a class="gr-login__enter" href="/oauth/login">Entrar</a></div>
      <a class="gr-nav__cta gr-nav__cta--primary" href="/contacto">Escríbenos</a>
    </div>
  </div>
</header>
<main style="padding:0;max-width:none;margin:0">
  <section class="container" style="padding-top:72px;padding-bottom:48px">
    <p class="eyebrow">Compañía de Innovación de Santiago</p>
    <h1 style="font-size:var(--fs-hero);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:14px 0 18px;max-width:18ch">Construimos el software que <em>opera</em> al grupo</h1>
    <p class="prose" style="color:var(--ink-muted)">Administración, documentos verificables, datos públicos y correo transaccional. Todo corre sobre un kit de estilo, un login y una infraestructura.</p>
    <div style="display:flex;gap:12px;margin-top:26px;flex-wrap:wrap"><a class="btn" href="/contacto">Escríbenos</a><a class="btn btn--ghost" href="/servicios">Ver servicios</a></div>
  </section>
  <section class="cards" style="padding-top:0;padding-bottom:8px">
    <article class="feature-card">
      <div class="feature-card__masthead">admin.innovacionsantiago.cl</div>
      <div class="card__tag">Administración</div>
      <h3 style="margin:10px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em">cis-admin</h3>
      <p style="margin:0;color:var(--ink-muted);font-size:13.5px;line-height:1.5">Contabilidad, facturación electrónica y CRM en un panel único para las tres sociedades.</p>
    </article>
    <article class="feature-card">
      <div class="feature-card__masthead">docs.circulodesantiago.cl</div>
      <div class="card__tag">Documentos</div>
      <h3 style="margin:10px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em">cis-verify</h3>
      <p style="margin:0;color:var(--ink-muted);font-size:13.5px;line-height:1.5">Actas y certificados con código de verificación: el papel se valida contra el original en línea.</p>
    </article>
    <article class="feature-card">
      <div class="feature-card__masthead">datos.cochid.cl</div>
      <div class="card__tag">Datos</div>
      <h3 style="margin:10px 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em">cochid datos</h3>
      <p style="margin:0;color:var(--ink-muted);font-size:13.5px;line-height:1.5">Series públicas de presupuesto, salud y territorio, listas para consultar y descargar.</p>
    </article>
  </section>
  <section class="cards" style="padding-top:0">
    <a class="card" href="/servicios/estilo" style="min-height:0">
      <span class="card__icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 5h16M4 12h10M4 19h16"/></svg></span>
      <span class="card__tag">Design system</span>
      <h3>Un kit para todas las marcas</h3>
      <p>Tokens, chrome y componentes versionados; cada sitio fija su digest.</p>
      <span class="card__link">Ver el kit -&gt;</span>
    </a>
    <a class="card" href="/servicios/auth" style="min-height:0">
      <span class="card__icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="10" width="14" height="9"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span>
      <span class="card__tag">Identidad</span>
      <h3>Un login para todo</h3>
      <p>cis-auth resuelve la sesión por OIDC; tu servicio recibe la identidad hecha.</p>
      <span class="card__link">Cómo integrarse -&gt;</span>
    </a>
    <a class="card" href="/servicios/correo" style="min-height:0">
      <span class="card__icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="18" height="12"/><path d="m3 7 9 6 9-6"/></svg></span>
      <span class="card__tag">Correo</span>
      <h3>Transaccional que llega</h3>
      <p>cis-mailer envía desde dominios verificados del grupo, con registro por pieza.</p>
      <span class="card__link">Ver el servicio -&gt;</span>
    </a>
  </section>
</main>
<footer class="gr-footer">
  <div class="gr-footer__attrib"><div class="gr-footer__attrib-inner gr-footer__attrib-inner--line">
    <span class="gr-footer__attrib-eyebrow">Operado por</span>
    <span class="gr-footer__attrib-name">Compañía de Innovación de Santiago SpA</span>
    <span class="gr-footer__attrib-sep">·</span>
    <a class="gr-footer__attrib-link" href="https://circulodesantiago.cl">una empresa de <svg class="gr-footer__attrib-mark" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/></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 · Santiago de Chile</span>
    <span class="gr-footer__sites">innovacionsantiago.cl · cochid.cl · circulodesantiago.cl</span>
  </div></div>
</footer>
</body>
</html>

H15 · los marks salen de LOGOS-CANONICOS.md, siempre stroke currentColor, y no se inventan ni se regeneran. La línea del footer dice «Operado por» con la razón social completa y «una empresa de» con el ring CDS inline; la matriz va sin SpA. Fuente: base/chrome.css encabezado y §footer · brands/LOGOS-CANONICOS.md.

4 · Formulario largo con secciones

Cuándo. Para capturas largas: postulaciones, cotizaciones, altas. Secciones numeradas con título mono y línea inferior, pares de campos en grilla auto-fit que colapsa sola en mobile, .field + .input para texto, select y textarea, y controles nativos teñidos con accent-color del kit.

Compañíade Innovaciónde Santiago

Comercial · solicitud

Pide una cotización

Cuéntanos qué necesitas y te respondemos con una propuesta dentro de la semana. Los campos con asterisco son obligatorios.

1 · Quién eres

Nombre *

Empresa

Correo *

Teléfono

2 · Qué necesitas

Tipo de proyecto *

Descripción *

Plazo esperado

Un mes Un trimestre Sin apuro

Servicios del grupo que ya usas

cis-auth cis-mailer cis-verify cochid datos

3 · Presupuesto y plazos

Rango disponible

Fecha ideal de inicio

Leí la política de privacidad y acepto que me contacten por este medio. *

Código completo de la página

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pide una cotización · CIS</title>
<script>
(function(){try{var t=localStorage.getItem("group-theme");
if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t);
}catch(_){}})();
</script>
<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>
</head>
<body>
<header class="gr-nav">
  <div class="gr-nav__inner">
    <a class="gr-nav__brand" href="/"><svg width="32" height="32" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"/><circle cx="100" cy="100" r="56" stroke-width="18"/></svg> <span class="gr-nav__wordmark"><span>Compañía</span><span>de Innovación</span><span>de Santiago</span></span></a>
    <nav class="gr-nav__links" aria-label="Navegación principal">
      <div class="gr-nav__group"><a class="gr-nav__link" href="/">Inicio</a><a class="gr-nav__link is-active" href="/cotizar">Cotizar</a></div>
    </nav>
    <div class="gr-nav__actions"><div class="gr-login" data-state="anon"><a class="gr-login__enter" href="/oauth/login">Entrar</a></div></div>
  </div>
</header>
<main class="container" style="max-width:820px;padding-top:44px;padding-bottom:72px">
  <p class="eyebrow">Comercial · solicitud</p>
  <h1 style="font-size:var(--fs-section);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:8px 0 12px">Pide una cotización</h1>
  <p class="prose" style="color:var(--ink-muted);margin:0 0 24px">Cuéntanos qué necesitas y te respondemos con una propuesta dentro de la semana. Los campos con asterisco son obligatorios.</p>
  <form>
    <h2 style="font:700 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--line);padding:0 0 8px;margin:28px 0 18px">1 · Quién eres</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 20px">
      <div class="field"><label for="ct-nombre">Nombre *</label><input class="input" id="ct-nombre" name="nombre" autocomplete="name" required></div>
      <div class="field"><label for="ct-empresa">Empresa</label><input class="input" id="ct-empresa" name="empresa" autocomplete="organization"></div>
      <div class="field"><label for="ct-correo">Correo *</label><input class="input" id="ct-correo" name="correo" type="email" autocomplete="email" required></div>
      <div class="field"><label for="ct-fono">Teléfono</label><input class="input" id="ct-fono" name="fono" type="tel" autocomplete="tel"></div>
    </div>
    <h2 style="font:700 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--line);padding:0 0 8px;margin:28px 0 18px">2 · Qué necesitas</h2>
    <div class="field"><label for="ct-tipo">Tipo de proyecto *</label>
      <select class="input" id="ct-tipo" name="tipo" required>
        <option value="">Elige una opción</option>
        <option>Sitio o aplicación web</option>
        <option>Pipeline de datos</option>
        <option>Integración con servicios del grupo</option>
        <option>Otra cosa</option>
      </select>
    </div>
    <div class="field"><label for="ct-desc">Descripción *</label><textarea class="input" id="ct-desc" name="descripcion" rows="5" required placeholder="Qué problema resuelve, quién lo usa, qué existe hoy"></textarea></div>
    <fieldset style="border:1px solid var(--line);border-radius:var(--radius-ctl);padding:14px 16px;margin:0 0 14px">
      <legend style="font-size:12px;font-weight:500;padding:0 6px">Plazo esperado</legend>
      <div style="display:flex;gap:18px;flex-wrap:wrap">
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="radio" name="plazo" value="mes" style="accent-color:var(--accent)"> Un mes</label>
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="radio" name="plazo" value="trimestre" style="accent-color:var(--accent)" checked> Un trimestre</label>
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="radio" name="plazo" value="sin-apuro" style="accent-color:var(--accent)"> Sin apuro</label>
      </div>
    </fieldset>
    <fieldset style="border:1px solid var(--line);border-radius:var(--radius-ctl);padding:14px 16px;margin:0 0 14px">
      <legend style="font-size:12px;font-weight:500;padding:0 6px">Servicios del grupo que ya usas</legend>
      <div style="display:flex;gap:18px;flex-wrap:wrap">
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="checkbox" name="usa" value="auth" style="accent-color:var(--accent)"> cis-auth</label>
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="checkbox" name="usa" value="mailer" style="accent-color:var(--accent)"> cis-mailer</label>
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="checkbox" name="usa" value="verify" style="accent-color:var(--accent)"> cis-verify</label>
        <label style="display:flex;gap:7px;align-items:center;font-size:13.5px"><input type="checkbox" name="usa" value="datos" style="accent-color:var(--accent)"> cochid datos</label>
      </div>
    </fieldset>
    <h2 style="font:700 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--line);padding:0 0 8px;margin:28px 0 18px">3 · Presupuesto y plazos</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 20px">
      <div class="field"><label for="ct-rango">Rango disponible</label>
        <select class="input" id="ct-rango" name="rango">
          <option>Menos de 1 millón</option>
          <option>Entre 1 y 5 millones</option>
          <option>Más de 5 millones</option>
          <option>Aún no lo sé</option>
        </select>
      </div>
      <div class="field"><label for="ct-inicio">Fecha ideal de inicio</label><input class="input" id="ct-inicio" name="inicio" type="date"></div>
    </div>
    <label style="display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-muted);margin:6px 0 24px"><input type="checkbox" name="privacidad" required style="accent-color:var(--accent);margin-top:2px"> <span>Leí la <a href="/legal/privacidad/">política de privacidad</a> y acepto que me contacten por este medio. *</span></label>
    <div style="display:flex;gap:12px;flex-wrap:wrap">
      <button class="btn" type="submit">Enviar solicitud</button>
      <button class="btn btn--ghost" type="button">Guardar borrador</button>
    </div>
  </form>
</main>
</body>
</html>

H16 aplica también aquí: el fieldset lleva borde 1px uniforme, nada de barritas de acento. Y si el formulario dispara correo, sale por cis-mailer (H20), nunca smtplib ni nodemailer ad-hoc. Fuente: base/components.css §inputs · CANON.md §Mail e Inbox.

5 · Página de documentación

Cuándo. Para guías y referencia de un producto. Nav lateral con el activo marcado por fondo --accent-soft y peso (nunca border-left), prosa a 68ch con .prose, bloque de código mono con borde, tabla de referencia .table y nota con badge en lugar de callout de color.

Compañíade Innovaciónde Santiago

Guía · instalación

Instala el kit v9

El kit se consume por URL versionada. Fija el digest en cada hoja: el sitio conserva su aspecto aunque el kit publique una versión nueva, y migrar pasa a ser una decisión tuya, no un accidente.

<link rel="stylesheet" href="https://style.innovacionsantiago.cl/v9/<digest>/base/tokens.css">

Orden de las hojas

Primero las fuentes, después la base y al final los tokens de tu marca. La marca solo re-tiñe el acento: nunca redefine estructura ni componentes.

Hoja	Qué aporta
base/tokens.css	Color, tipografía, escala, radios y espaciado
base/chrome.css	Navbar y footer del grupo
base/components.css	Botones, cards, tablas, badges y login
brands/cis/tokens.css	Acento navy en claro, verde en oscuro

Verifica el pin

El registro de consumidores declara qué versión carga cada sitio. Si el HTML servido difiere de lo declarado, la revisión lo marca como violación H13.

ojoUna ruta sin versión rompe H12: el sitio cambia de aspecto sin que nadie lo haya desplegado.

Código completo de la página

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Instala el kit · docs del design system</title>
<script>
(function(){try{var t=localStorage.getItem("group-theme");
if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t);
}catch(_){}})();
</script>
<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>
</head>
<body>
<header class="gr-nav">
  <div class="gr-nav__inner">
    <a class="gr-nav__brand" href="/"><svg width="32" height="32" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"/><circle cx="100" cy="100" r="56" stroke-width="18"/></svg> <span class="gr-nav__wordmark"><span>Compañía</span><span>de Innovación</span><span>de Santiago</span></span></a>
    <nav class="gr-nav__links" aria-label="Navegación principal">
      <div class="gr-nav__group"><a class="gr-nav__link" href="/">Inicio</a><a class="gr-nav__link is-active" href="/docs/">Documentación</a></div>
    </nav>
    <div class="gr-nav__actions">
      <div class="gr-login" data-state="auth">
        <a class="gr-login__user" href="/cuenta"><span class="gr-login__dot"></span><span class="gr-login__name">M. Illanes</span></a>
        <a class="gr-login__exit" href="/oauth/logout">Salir</a>
      </div>
    </div>
  </div>
</header>
<div class="container" style="display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start;padding-top:40px;padding-bottom:72px">
  <aside>
    <nav aria-label="Secciones de la documentación">
      <p style="font:500 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--line);padding:0 0 8px;margin:0 0 10px">Guía</p>
      <ul style="list-style:none;margin:0 0 22px;padding:0">
        <li><a href="/docs/instalacion" aria-current="page" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink);font-weight:600;background:var(--accent-soft);text-decoration:none">Instala el kit</a></li>
        <li><a href="/docs/tema" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink-muted);text-decoration:none">Tema claro y oscuro</a></li>
        <li><a href="/docs/chrome" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink-muted);text-decoration:none">Navbar y footer</a></li>
        <li><a href="/docs/marcas" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink-muted);text-decoration:none">Cambia de marca</a></li>
      </ul>
      <p style="font:500 10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--line);padding:0 0 8px;margin:0 0 10px">Referencia</p>
      <ul style="list-style:none;margin:0;padding:0">
        <li><a href="/docs/tokens" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink-muted);text-decoration:none">Tokens</a></li>
        <li><a href="/docs/componentes" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink-muted);text-decoration:none">Componentes</a></li>
        <li><a href="/docs/consumidores" style="display:block;padding:6px 8px;font-size:13px;color:var(--ink-muted);text-decoration:none">Registro de consumidores</a></li>
      </ul>
    </nav>
  </aside>
  <article class="prose">
    <p class="eyebrow" style="margin:0 0 8px">Guía · instalación</p>
    <h1 style="font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 14px">Instala el kit <span class="badge" style="vertical-align:4px">v9</span></h1>
    <p style="margin:0 0 14px">El kit se consume por URL versionada. Fija el digest en cada hoja: el sitio conserva su aspecto aunque el kit publique una versión nueva, y migrar pasa a ser una decisión tuya, no un accidente.</p>
    <pre style="margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);background:var(--paper-raised);font:12px/1.7 var(--font-mono);color:var(--ink);overflow-x:auto"><code>&lt;link rel="stylesheet" href="https://style.innovacionsantiago.cl/v9/&lt;digest&gt;/base/tokens.css"&gt;</code></pre>
    <h2 style="font-size:20px;font-weight:700;letter-spacing:-.015em;margin:24px 0 10px">Orden de las hojas</h2>
    <p style="margin:0 0 14px">Primero las fuentes, después la base y al final los tokens de tu marca. La marca solo re-tiñe el acento: nunca redefine estructura ni componentes.</p>
    <table class="table" style="margin:0 0 18px">
      <thead><tr><th>Hoja</th><th>Qué aporta</th></tr></thead>
      <tbody>
        <tr><td style="font-family:var(--font-mono);font-size:12px">base/tokens.css</td><td>Color, tipografía, escala, radios y espaciado</td></tr>
        <tr><td style="font-family:var(--font-mono);font-size:12px">base/chrome.css</td><td>Navbar y footer del grupo</td></tr>
        <tr><td style="font-family:var(--font-mono);font-size:12px">base/components.css</td><td>Botones, cards, tablas, badges y login</td></tr>
        <tr><td style="font-family:var(--font-mono);font-size:12px">brands/cis/tokens.css</td><td>Acento navy en claro, verde en oscuro</td></tr>
      </tbody>
    </table>
    <h2 style="font-size:20px;font-weight:700;letter-spacing:-.015em;margin:24px 0 10px">Verifica el pin</h2>
    <p style="margin:0 0 14px">El registro de consumidores declara qué versión carga cada sitio. Si el HTML servido difiere de lo declarado, la revisión lo marca como violación H13.</p>
    <div style="border:1px solid var(--line);background:var(--paper-raised);padding:13px 16px;font-size:13.5px;line-height:1.55"><span class="badge badge--warn" style="margin-right:8px">ojo</span>Una ruta sin versión rompe H12: el sitio cambia de aspecto sin que nadie lo haya desplegado.</div>
  </article>
</div>
</body>
</html>

H12 · «Un consumidor del design system fija la versión que carga y no usa una ruta genérica.» La página de ejemplo enseña exactamente eso: el pin del digest es lo primero que documenta. Fuente: core/CONTRACTS.md · cis-modelo/modelo/reglas.py.

Fuentes

base/tokens.css · head canónico de todo sitio (orden de las seis hojas, bootstrap anti-flash, chrome.js con defer), escala tipográfica, --fs-hero y --fs-section, énfasis h1 em por color, .eyebrow, .prose y .container.
base/components.css · .login-card y su spec (flow Authentik, custom.css v1.8), .btn y variantes ghost y sm, .card, .feature-card, .stat, .field, .input, .table con td.num y .badge con sus tres estados.
base/chrome.css · .gr-nav, .gr-login en estados anon y auth, .gr-footer y la línea de vinculación v7.1 «Operado por … una empresa de …».
brands/cis/tokens.css · acento navy en claro y verde en oscuro; wordmark de 3 líneas.
brands/LOGOS-CANONICOS.md · marks de CIS (anillos concéntricos) y CDS (ring de contorno), extraídos del DOM en producción; se usan tal cual, stroke currentColor.
cis-modelo/modelo/reglas.py · H12 (versión fijada), H13 (pin declarado = pin servido), H15 (logos canónicos), H16 (sin borde de acento a la izquierda), H19 (login solo vía cis-auth), H20 (correo por cis-mailer).
/srv/projects/CANON.md · §Tipografía, §Logos, §Auth, §Mail e Inbox, §Componentes UI.
core/core-style/ESTRUCTURA.md · un producto hereda la hoja de su marca y nunca lleva CSS propio; por eso estos ejemplos no traen hoja adicional.