kit v9 · f417275 · base/components.css

Componentes

Cada clase de base/components.css con todas sus variantes reales: ejemplo vivo, el HTML que lo produce, la regla de uso y un sí/no por componente. La página carga las hojas reales del CDN por hash: lo que ves acá es lo que sale en producción.

Regla cero: si un modificador no aparece en esta página, no existe en el kit. No lo inventes en tu sitio; propón el cambio en cis-style.

Botones

Un solo componente, .btn, con dos modificadores: .btn--ghost (secundario, fondo transparente) y .btn--sm (compacto, para toolbars y tablas). Los modificadores se combinan. El botón base es tinta sobre papel y el hover pinta el acento de la marca. La misma clase sirve en <button> y en <a>.

<button class="btn">Guardar cambios</button>
<button class="btn btn--ghost">Cancelar</button>
<a class="btn btn--sm" href="#">Ver detalle</a>
<button class="btn btn--ghost btn--sm">Filtrar</button>
<button class="btn" disabled>Guardar cambios</button>

REGLA · Una acción principal por vista: una sola .btn sólida. Todo lo demás va con .btn--ghost. Si hay tres botones sólidos en pantalla, dos sobran.

REGLA · El kit no trae regla :disabled: el atributo corta el clic pero el botón se ve igual. Si una acción no está disponible, escóndela o explica por qué; no la dejes muerta en pantalla.

Badges de estado

Etiqueta mono en mayúsculas para estado y metadatos. La base .badge no es gris: tiñe con el acento de la marca (--accent sobre --accent-soft) y sirve para metadatos sin estado, como versión o entorno. Los tres estados (--ok, --warn, --err) se calculan con color-mix sobre los tokens de estado, así funcionan en light y dark sin hex nuevos.

<span class="badge">v9 estable</span>
<span class="badge badge--ok">en línea</span>
<span class="badge badge--warn">degradado</span>
<span class="badge badge--err">en falla</span>

REGLA · Estado siempre con texto, nunca solo con color. Escribe el contenido en minúsculas: la clase lo sube a mayúsculas con tracking mono.

Tarjetas

La .card es la superficie base del grupo: borde uniforme de 1px, fondo --paper-raised, geometría recta, sin sombra. La jerarquía interna la hacen la tipografía y el fondo, no los bordes. Anatomía completa: .card__icon (caja de 34px teñida con --card-color), .card__tag (eyebrow mono), h3, p y .card__link (link mono al pie, patrón "Visitar X ->"). El hover pinta el borde con --card-color, que por defecto es el acento de la marca.

Anatomía completa

<a class="card" href="...">
  <span class="card__icon"><svg ...></svg></span>
  <span class="card__tag">producto</span>
  <h3>Firmas y Documentos</h3>
  <p>Validación de documentos con código, checksum y QR.</p>
  <span class="card__link">Visitar el validador -></span>
</a>

La grilla .cards

.cards es la grilla de tarjetas: tres columnas, dos bajo 960px, una bajo 600px. Ojo: trae su propio max-width: var(--container) y padding: var(--pad-x), porque es un envoltorio de sección de página, no un widget anidable. Por eso se ve con aire dentro de esta caja.

<div class="cards">
  <a class="card" href="...">...</a>
  <a class="card" href="..." style="--card-color:var(--ok)">...</a>
  <a class="card" href="...">...</a>
</div>

REGLA · Puedes re-teñir una card con --card-color, pero solo con tokens del kit: var(--ok), var(--warn), var(--err) o el acento de otra marca. Un hex a mano rompe el tema oscuro.

PROHIBIDO · El borde de acento a la izquierda (border-left de color) en tarjetas, avisos y notas. Decisión del 2026-08-06. Si ves una barrita de color a la izquierda, es un sitio sin migrar.

Feature card

La pieza destacada de una página: border-top de 4px con --card-color y un masthead con doble filete estilo prensa (.feature-card__masthead). El interior es libre; el patrón de la casa es masthead, título, párrafo y un .card__link.

<div class="feature-card">
  <div class="feature-card__masthead">informe · agosto 2026</div>
  <h3>Gasto público en medicamentos</h3>
  <p>Resumen ejecutivo, informe de 36 páginas y nueve anexos.</p>
  <a class="card__link" href="...">Leer el informe -></a>
</div>

REGLA · El border-top de 4px es el único acento de borde que permite el kit: va arriba, nunca a la izquierda. Se tiñe con --card-color, igual que la card.

Stats

La tarjeta de una sola cifra, en la voz cochid: valor en mono de 28px con peso 700 (.stat__value) y etiqueta mono en mayúsculas (.stat__label). El kit trae la celda, no la fila: components.css no define ninguna clase .stats. La grilla la pones tú, o usas .cards si quieres la responsividad de la casa.

<!-- la grilla es tuya: el kit solo trae la celda .stat -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px">
  <div class="stat">
    <span class="stat__value">95</span>
    <span class="stat__label">sitios en caddy</span>
  </div>
  ...
</div>

REGLA · Toda cifra medida declara cuándo y con qué se midió (patrón de sello de frescura del hub). Un tablero de stats sin fecha de sondeo miente por omisión.

Tablas

Cabecera mono en mayúsculas de 10.5px con filete fuerte (--line-strong); filas separadas con border-bottom de 1px suave. Sin zebra y sin bordes verticales. La celda numérica se marca con class="num" en el td: recibe mono, cifras tabulares (tnum) y alineación a la derecha.

<table class="table table--num">
  <thead><tr><th>Servicio</th><th>Dominio</th><th>Puerto</th><th>Estado</th></tr></thead>
  <tbody>
    <tr>
      <td>cis-admin</td>
      <td>admin.innovacionsantiago.cl</td>
      <td class="num">8244</td>
      <td><span class="badge badge--ok">en línea</span></td>
    </tr>
    ...
  </tbody>
</table>

Columna de montos

<table class="table table--num">
  <thead><tr><th>Concepto</th><th>CLP / mes</th></tr></thead>
  <tbody>
    <tr><td>Hosting vps-cis</td><td class="num">104.990</td></tr>
    <tr><td>Dominios .cl</td><td class="num">11.950</td></tr>
    <tr><td>Certificados TLS</td><td class="num">0</td></tr>
  </tbody>
</table>

REGLA · Lo que activa el formato numérico es la celda, no la tabla: la hoja aplica .table td.num, así que cualquier td.num dentro de una .table queda en mono y a la derecha. .table--num existe como marcador de tabla numérica pero hoy no agrega reglas propias; úsalo como declaración de intención.

REGLA · Los th quedan siempre a la izquierda: el kit no trae th.num. Y si la celda es dato duro (dominio, SHA, RUT), dale mono con style="font-family:var(--font-mono)".

Formularios

Dos clases: .field agrupa etiqueta y control en columna con 6px de separación; .input es el control de texto (borde 1px, radio de control de 6px, el único radio del kit junto a las pills). El foco pinta el borde con --accent. La regla de la hoja es .field label: el label va dentro del field, como elemento hijo, no como envoltorio.

<div class="field">
  <label for="f-correo">Correo</label>
  <input class="input" id="f-correo" type="email">
</div>

<!-- estado de error: token --err en el borde + mensaje corto -->
<div class="field">
  <label for="f-rut">RUT</label>
  <input class="input" id="f-rut"
         style="font-family:var(--font-mono);border-color:var(--err)">
  <span style="font-size:12px;color:var(--err)">RUT inválido: revisa el dígito verificador.</span>
</div>

REGLA · El kit no trae .input--error ni .input--ok. El patrón de validación es el token: borde con var(--err) más un mensaje corto pegado al campo. Al recibir foco, el borde vuelve a --accent. Si tu sitio valida mucho, propón la clase en cis-style; no la inventes local.

REGLA · Datos duros (RUT, códigos C-XXXXXX, SHA) siempre en mono, también dentro de un input.

Login card

La card del flow de autenticación, según la spec de Authentik (auth.innovacionsantiago.cl, custom.css v1.8): 420px máximo, centrada, borde 1px, sin radius y sin sombra en v9. El orden es fijo: logo, título, botón SSO, formulario, links. Piezas: .login-card__logo, __title, __sso (pill blanca de Google), __btn (submit de 44px) y __meta (links al pie).

<div class="login-card">
  <svg class="login-card__logo" ...>...</svg>
  <h1 class="login-card__title">Entrar a la Compañía</h1>
  <a class="login-card__sso" href="..."><svg ...></svg>Continuar con Google</a>
  <div class="field">
    <label for="l-correo">Correo</label>
    <input class="input" id="l-correo" type="email">
  </div>
  <div class="field">
    <label for="l-clave">Contraseña</label>
    <input class="input" id="l-clave" type="password">
  </div>
  <button class="login-card__btn">Entrar</button>
  <p class="login-card__meta">¿Problemas para entrar? <a href="...">Recupera tu cuenta</a></p>
</div>

REGLA H19 · La autenticación se integra a cis-auth por OIDC con core-auth-lib; ningún servicio reinventa login ni JWT (modelo/reglas.py). Esta card vive en el flow de auth, no en tu sitio: tu sitio va tras forward_auth y esta pantalla la sirve auth.innovacionsantiago.cl.

REGLA · .login-card__sso es la única pieza del kit con hex literales: pill blanca según la guideline de botones de Google. En este ejemplo el ícono es un placeholder neutro; en producción va el asset oficial de Google a 18px. No uses esta clase para otros proveedores ni la re-tiñas.

REGLA · El logo es el mark canónico de la marca en stroke="currentColor", nunca un logo regenerado (LOGOS-CANONICOS.md).

Fuente de cada afirmación

Todo lo que esta página afirma sale de un archivo que puedes abrir:

· clases y variantes (.btn, .badge, .card, .cards, .feature-card, .stat, .table, .field, .input, .login-card): base/components.css, kit v9, digest f417275, cargado en vivo por esta página
· tokens de color, radios, tipografía y escala: base/tokens.css del mismo digest
· acento CIS (navy en light, verde en dark) y mark de anillos: brands/cis/tokens.css
· marks oficiales de las tres marcas: cis-style/brands/LOGOS-CANONICOS.md
· qué clase de sitio hereda qué hoja: core/core-style/ESTRUCTURA.md (2026-08-09)
· tipografía self-hosted, cero em-dash, español neutro/tú: /srv/projects/CANON.md y core/prosa/NORMA.md
· regla H19 de autenticación: cis-modelo/modelo/reglas.py
· prohibición del border-left de acento: decisión del 2026-08-06, registrada en el hub (portada de esta galería)