Componentes
Galería de componentes · versión 1
PÁGINA HISTÓRICA · se conserva a propósito
Galería v1. Se conserva como referencia de dónde salió cada variante.
Variantes reales encontradas en los sitios vivos del grupo (curl + auditoría 2026-07-31), renderizadas lado a lado como HTML estático autocontenido, junto a la variante escogida para el design system v7 (style.innovacionsantiago.cl/v8 · style.circulodesantiago.cl/v7 · style.cochid.cl/v7). Cero JavaScript en esta página. Fuentes self-hosted desde v7.
Página histórica: es la primera galería, la que comparó las variantes vivas de cada sitio contra la elegida para el kit v7. Se conserva como registro de esa comparación. Los especímenes de referencia van con su estilo en línea original a propósito: reproducen lo que servía cada sitio, incluido lo que no es del grupo, y traducirlos a las clases del kit borraría justamente lo que la página compara.
Índice del sistema de estilo · Marcas y namebrands · Tarjeta de entrada v3 · Google, Microsoft y correo · Iteración v2 · respuesta al primer comentario · Galería v4 · los 68 componentes
Navbar
Sticky, papel crema translúcido + blur, borde inferior 1px. Mark anillos concéntricos 32px stroke currentColor, wordmark 3 líneas 11.5px/800 uppercase. Links 13.5px, grupos con separador vertical, activo con subrayado 2px acento navy.
Mismo esqueleto que CIS pero mark de UN círculo de contorno 30px y wordmark 2 líneas 16px/700 sin uppercase. Acento azul-noche #1a1a2e. Base 15px/1.55.
Lockup canónico cochid (corrección Martín 2026-07-31): cuadrado azul #1d4ed8 relleno junto al namebrand mono, sobre off-white editorial #fafaf7. El wordmark tipográfico solo es forma secundaria, no reemplaza al cuadrado.
Esqueleto único .gr-nav: grid brand / links / acciones, chrome ESTÁTICO emitido en build (regla 8, sin web components). Marks intercambiables por marca; wordmark con variantes --lg (CDS) y --mono (cochid compacto).
Elegida para v7: el patrón de innovacionsantiago.cl (grid sticky, papel translúcido, grupos de links con separador, activo subrayado con acento) generalizado como .gr-nav con el mark de cada marca. Es el más maduro de los tres y ya era el que CDS y cochid imitaban a mano.
Footer
Empresa
Quiénes somosContactoProductos
CatálogoIsométricoEcosistema
cochid.clBorde superior fuerte 1px #14181c, brand + columnas con h4 mono uppercase 10.5px subrayado fino, base legal 12px con dominios en mono.
Vinculación prominente matriz -> operadora: fila entera clickeable, eyebrow mono + nombre 17px/700 SIN "SpA", mark CIS 22px. Tagline canónica CDS: "Intelecto · diseño · negocio."
Footer inline liviano de cochid.cl. datos.cochid.cl aún monta <cis-footer> de shell.min.js v6 (web component de runtime, PROHIBIDO por regla 8: a reemplazar por chrome estático).
Programas
EnciclopediaEditorialSitios del grupo
innovacionsantiago.cl.gr-footer con la vinculación societaria v7.1 (feedback Martín 2026-07-31): línea única __attrib-inner--line "Operado por <entidad dueña> · una empresa de [mark CDS] Círculo de Santiago" para sitios CIS y cochid; los sitios propios de la matriz llevan "Círculo de Santiago SpA · RUT 78.372.913-K" a secas (nunca "una empresa de" sobre sí misma). El mark CDS va inline como SVG pequeño. Siempre estático.
Elegida para v7: la estructura de innovacionsantiago.cl (brand + grid de columnas con h4 mono + base legal) más las filas de vinculación de CDS formalizadas como variantes A/B. Cubre los tres casos reales del grupo sin web components.
Botón
Bloque de tinta sin radius + variante ghost con borde fuerte. Hover: opacity .85 (primario) / fondo --accent-soft (ghost).
Botón primario del flow de login: gris zinc #52525b full-width sobre card blanca. Paleta propia del theming Authentik, no del grupo.
Tailwind blue-700 redondeado 6px, hover #1e3a8a. El azul se conserva en v7 como acento de marca cochid, no como forma propia de botón.
.btn / .btn--ghost / .btn--sm. Hover del primario: fondo --accent (se tiñe con la marca del sitio). Geometría recta, radius 0.
Elegida para v7: el .cis-btn del brand-kit (bloque de tinta, radius 0), con el hover cambiado a acento de marca para que un mismo componente funcione en CIS, CDS y cochid. El gris Authentik y el rounded azul de datos quedan como theming local, no de sistema.
Card
Plataformas de datos
Pipelines, lagos y APIs sobre Postgres.
Superficie elevada blanca + borde 1px, tag mono de acento, sin sombra ni radius.
Editorial Sebastián
Enciclopedia multi-tomo asistida por IA.
Visitar enciclopedia ->Patrón CDS: el CTA de la card es un link mono uppercase con subrayado de acento, no un botón.
Catálogo CIS
Barra izquierda 3px -> 5px al hover; el color viene de --card-color.
.card: borde 1px + barra de color izquierda + icono en caja teñida + tag mono. Hover: borde del color y translateY(-1px).
Feature card
Border-top 4px de color + masthead con doble regla.
.feature-card (voz editorial) y .stat (voz cochid: cifra mono 28px/700 + label mono uppercase).
Elegida para v7: card de borde 1px sin sombra con barra de color izquierda como base, más .feature-card y .stat como variantes de voz. El link mono de CDS se conserva como .card__link opcional.
Tokens de color por marca
Papel crema + tinta, acento dual navy (light) / verde claro (dark). Idéntico en www, brand-kit-2026-07 y v7.
Sistema legacy del bundle (Inter + verdes) y tokens del shell v6 (gris frío). NO se propagan a v7.
Base del grupo re-teñida: acento azul-noche, dark cálido casi negro con acento lavanda. Copiado tal cual del CSS live.
Off-white editorial + azul burocracia blue-700; incluye escala data-viz de 10 colores (--cochid-chart-1..10).
Paleta propia del login (cian + zinc). auth es zona de solo lectura; v7 define el equivalente con tokens del grupo para futuros logins propios.
Gris frío neutro + azul #3763e0, sin logo gráfico (wordmark tipográfico). Extraído tal cual de v5.
Elegido para v7: un solo sistema --ink/--paper/--line/--accent (el activo de innovacionsantiago.cl) como base neutra del grupo, y cada marca re-tiñe SOLO acento y, si su identidad lo exige (CDS dark cálido, cochid off-white, illanes00 gris frío), sus superficies. Los sistemas legacy verde/Inter y el shell v6 gris no se propagan.
Tipografía y escala
IBM Plex Sans (400-700 + alias 800) + JetBrains Mono (400/500/700) self-hosted en /v7/fonts/, copia bit-idéntica de v6. Features: ss01 ss02 tnum cv11.
| Origen | Sans | Mono | Base |
|---|---|---|---|
| www / CIS | IBM Plex Sans declarada, sin @font-face en el dist (cae a fallback) | JetBrains Mono declarada | 14px/1.45 |
| circulodesantiago / CDS | IBM Plex self-hosted desde v6 (400-700) | system stack (sin JetBrains) | 15px/1.55 |
| cochid (datos) | Lato/Inter vía next/font/google (fuera de canon) | JetBrains vía shell v6 | Tailwind |
| auth | IBM Plex forzada por custom.css (carga Red Hat de PatternFly) | no aplica | PatternFly |
| v7 (elegida) | IBM Plex Sans self-hosted /v7/fonts/ | JetBrains Mono self-hosted | 14px UI · 15px prosa |
GAP principal detectado en la auditoría: cis-www declara las fuentes pero no las sirve; v7 lo corrige self-hosteando (regla dura 5) sin tocar cis-www.
Elegida para v7: la escala de innovacionsantiago.cl (14px UI, 15px prosa, hero/section en clamp, mono como voz secundaria con tracking) con las fuentes por fin self-hosted en los tres hosts de estilo. La base 15px de CDS queda cubierta por --fs-prose.
Login-card
Iniciar sesión
Continuar con Google martin@… Continuar¿Sin cuenta? Regístrate
Card 420px siempre blanca sobre hero de Santiago con overlay negro. Orden forzado: logo -> h1 22px -> Google pill -> form -> links cian #0891b2. Zona solo lectura (Authentik en producción).
Iniciar sesión
Continuar con Google martin@… Continuar¿Sin cuenta? Regístrate
.login-card: mismo layout y sombra modal que auth pero con tokens del grupo: botón de tinta, links de acento de marca, inputs radius 6px, borde --line.
Elegida para v7: el layout Authentik (420px, borde 1px, sombra profunda, logo -> h1 -> SSO pill -> form) re-teñido con tokens del grupo. El cian #0891b2 y el botón zinc quedan solo en auth (zona intocable); los logins propios futuros usan .login-card.
Toggle claro/oscuro
| cis-theme | www / CIS: bootstrap inline en head, estampa data-theme, default light |
| cds-theme | circulodesantiago: mismo patrón, clave distinta (los sitios no comparten preferencia) |
| shell v6 | theme.js + shell.min.js en cochid: clase .cis-dark + web components de runtime (prohibidos por regla 8) |
Tres claves de localStorage divergentes y un runtime v6 con web components: la preferencia de tema no viajaba entre sitios del grupo.
Botón 34px cuadrado, radius 0, icono sol/luna 18px stroke 1.8 (ambos SVG emitidos, CSS esconde el que no toca). theme.js: clave única group-theme, guard one-shot window.__groupThemeInit, un solo listener delegado, cero web components. Dark automático por prefers-color-scheme si no hay override.
Elegida para v7: el patrón bootstrap-inline de www/CDS unificado bajo una sola clave group-theme y un botón estático en el nav; el runtime v6 con web components se descarta por la regla 8 (incidente del bucle infinito de <cis-navbar>).
Chip login-info
Ningún navbar del grupo muestra hoy quién está logueado: los sitios tras cis-auth (admin, docs, editor de la enciclopedia) dependen del forward_auth de Authentik sin reflejo en la UI. Único patrón cercano: los CTAs del nav de usaia/www.
Crear cuenta Iniciar sesiónPar de CTAs (primario tinta + secundario fantasma) conservado en v7 como .gr-nav__cta, pero no comunica sesión activa.
Pill 30px (única excepción de radius junto al botón Google): estado anon = "Entrar" con hover de acento; estado auth = punto de acento + nombre truncado a 14ch + "Salir". El estado se decide server-side o en build, CERO JS.
Elegida para v7: componente nuevo .gr-login (no existía variante viva que copiar): pill neutra con dos estados renderizados estáticamente, derivada de la evaluación de flujos admin 2026-07-30 y coherente con la excepción de radius pill del sistema.
Galería generada 2026-07-31 · fuentes: auditoría /srv/projects/cis/cis-tmp/public/shots/data.json, CSS live de cada sitio, core-style/brands/cis/brand-kit-2026-07.css, EVALUACION-ADMIN-FLUJOS-2026-07-30.md y el árbol publicado core-style/v7/. Cada design system se consume desde su dominio: style.innovacionsantiago.cl/v8 (CIS) · style.circulodesantiago.cl/v7 (CDS) · style.cochid.cl/v7 (cochid). Página estática sin JavaScript; renders con estilos inline autocontenidos.