COCHID · Style Guide

Identidad visual y voz de COCHID — Compañía Chilena de Inteligencia de Datos. Sub-marca del sistema cis-style v6, derivada de la marca base cis con accent azul "burocracia".

Identidad

Sub-brands

Cochid es una familia. Las sub-marcas comparten el accent azul pero pueden matizar:

sub-brand URL accent uso
cochid cochid.cl #1d4ed8 apex · marketing · cross-product
cochid-datos datos.cochid.cl #1d4ed8 exploración pública de datasets
cochid-congreso congreso.cochid.cl (TBD) parlamentaria + voto + autores
cochid-lex lex.cochid.cl (TBD) LeyChile + búsqueda semántica
cochid-elecciones elecciones.cochid.cl (TBD) SERVEL + padrón

Tokens viven en /srv/projects/cis/cis-style/brands/<subbrand>/tokens.css. Build: cd /srv/projects/cis/cis-style && ./build.sh.

Tokens base (cochid)

--cis-accent:       #1d4ed8;   /* azul-700 · burocracia / serio */
--cis-accent-hover: #1e40af;
--cis-link:         #1d4ed8;
--cis-brand-name:   "Cochid";
--cis-brand-url:    "https://cochid.cl";

Dark mode (auto via [data-theme="dark"] o .cis-dark):

--cis-accent:       #60a5fa;
--cis-accent-hover: #93c5fd;

Heredados de cis/tokens.css: - Tipografía: IBM Plex Sans (UI) + JetBrains Mono (code/numérico) - Colores neutros: --bg, --paper, --ink, --muted, --line - Estética: Swiss brutalist · sin radius · sin shadow · líneas de 1px

Voz · tone

Componentes web (cis-shell v6)

<head>
  <link rel="stylesheet" href="https://style.innovacionsantiago.cl/v6/cis.min.css">
  <link rel="stylesheet" href="https://style.innovacionsantiago.cl/v6/brands/cochid/tokens.css">
  <script src="https://style.innovacionsantiago.cl/v6/shell.js" defer></script>
</head>
<body>
  <cis-navbar site-name="cochid" brand="cochid"></cis-navbar>
  <main>...</main>
  <cis-footer site-name="cochid" brand="cochid">
    <!-- slot opcional para attribution custom -->
  </cis-footer>
</body>

Atributos clave: - site-name: identifica el sitio (string libre · usado en logs/telemetría) - brand: lookup en el registry de shell.js · debe coincidir con un brand registrado (cis, cochid, cochid-datos, periodismo2, etc.)

cis-navbar automáticamente: - Muestra el wordmark + tagline del brand - Lista productos del catálogo (innovacionsantiago, indieweb, periodismo2, cochid, etc.) - Detecta auth state via localStorage["illanes:auth:user"] y muestra avatar o botón Login según corresponda - Login button → https://auth.innovacionsantiago.cl/?next=<current-url>

cis-footer automáticamente: - SWATCHES de marca - Links a sistema (style, api, status) - Slot <div slot="footer"> para attribution custom (ej. "empresa asociada al CIS · de propiedad de Martín Illanes")

Convención para todas las propiedades cochid:

<cis-footer site-name="..." brand="cochid">
  <div slot="footer" class="text-sm text-muted px-4 py-3 border-t">
    <strong>COCHID</strong> — Compañía Chilena de Inteligencia de Datos ·
    empresa asociada al
    <a href="https://innovacionsantiago.cl">CIS</a> ·
    de propiedad de
    <a href="https://illanes00.cl">Martín Illanes</a>.
  </div>
</cis-footer>

Patrón hero

<section class="hero">
  <p class="hero-kicker">COCHID · Compañía Chilena de Inteligencia de Datos</p>
  <h1>La <em>data pública</em> de Chile, accesible y trazable.</h1>
  <p class="lead">[descripción funcional, 2 frases máximo]</p>
  <div class="hero-cta">
    <a href="https://datos.cochid.cl" class="btn-primary">Explorar los datos →</a>
    <a href="https://indieweb.cl" class="btn-secondary">API access (paid)</a>
  </div>
</section>

Reglas: - Kicker en JetBrains Mono · uppercase · accent color - H1 con palabra clave en <em> (sin italic, solo color accent) - Lead máximo 2 frases. La acción primaria es explorar datos, no "registrarse" o "leer docs".

Patrón KPIs

Para mostrar métricas reales (no aspiracionales):

<div class="stat">
  <div class="num">880</div>
  <div class="label">filas DIPRES</div>
</div>

Rules: - num en JetBrains Mono, font-weight 800, color accent - label en sans, color muted, sin punto final

Embebidos

Para iframes desde otros sitios cochid (ej. apex → datos):

<div class="viz-frame">
  <iframe src="https://datos.cochid.cl/centros-estudio?embed=1"
          height="640" loading="lazy"
          title="..."></iframe>
  <div class="viz-cta">
    <a href="https://datos.cochid.cl/centros-estudio">
      Abrir visualización completa →
    </a>
  </div>
</div>

CORS: datos.cochid.cl/api/* es Access-Control-Allow-Origin: * (no auth para endpoints públicos · paid endpoints van por api.innovacionsantiago.cl/gateway/cochid-* con API key).

No

Recursos

Última actualización

2026-05-05 · agregado tagline CCID, doc de attribution pattern, slot footer custom, link a illanes00.cl como propietario.