Compañía de Innovación de Santiago · Brand Book

Guía de identidad visual y verbal del brand master del ecosistema. Esta es la referencia que los 15 sub-brands heredan. Lo que se documenta aquí aplica a todos, salvo el accent y la voz que cada hijo varía.

Una empresa de Círculo de Santiago SpA.

01 · Filosofía

La Compañía de Innovación de Santiago construye software cívico, infraestructura operativa y productos de datos para Chile. Su identidad visual refleja eso: ingeniería transparente, infraestructura legible, sin barroquismos.

Tres principios visuales gobiernan todo:

  1. Mono-ink antes que color. La paleta base es zinc warm de 50 a 900. El accent existe pero se usa con disciplina: links, focus rings, CTAs primarios, deltas en KPI. No es decoración.
  2. Tipografía como primer ciudadano. La jerarquía se construye con escala, peso y tracking. No con cajas y colores.
  3. Grid riguroso y negative space generoso. Asimetría intencional al estilo Modernismo Suizo (Müller-Brockmann, Hofmann, Ruder). Bordes finos antes que sombras pesadas.

Tres facetas de la misma identidad:

Clearspace

Mantener al menos 1× la altura del símbolo como margen libre alrededor del lockup. Para el mark aislado, el clearspace mínimo es 0.5× del diámetro del anillo exterior.

Mínimos de uso

Contexto Recomendado Mínimo absoluto
Mark (favicon) 32 px 16 px
Mark (nav) 48 px 32 px
Wordmark 200 px ancho 120 px ancho
Lockup 360 px ancho 240 px ancho

El logo usa currentColor. Eso significa que su color hereda del contexto:

Nunca colorear el mark con el accent del brand. El mark se mantiene siempre en ink puro.

03 · Color

Escala primaria (ink/zinc warm)

Token Hex Uso
--cis-ink-50 #fafafa bg surface elevated
--cis-ink-100 #f4f4f5 bg secondary
--cis-ink-200 #e4e4e7 borders, dividers
--cis-ink-300 #d4d4d8 borders strong, disabled bg
--cis-ink-400 #a1a1aa text muted, placeholders
--cis-ink-500 #52525b text secondary
--cis-ink-600 #27272a text primary, button bg
--cis-ink-700 #18181b text on light bg
--cis-ink-800 #0c0c0e text on light bg max
--cis-ink-900 #000000 text absolute, never use bg

Accent

Para el master cis, el accent es #18181b (ink mismo). El brand maestro es mono. Los sub-brands heredan todo y sobreescriben solo el accent:

:root {
  --cis-accent: #18181b;          /* master cis */
  --cis-accent-hover: #000000;
}

Estados semánticos

Token Hex Uso
--cis-c-red #dc2626 error, danger
--cis-c-amber #d97706 warn
--cis-c-green #15803d success, ok
--cis-c-blue #2563eb info

Nunca usar estos como accent decorativo. Solo para semántica de estado.

04 · Tipografía

Pares canónicos

Escala modular (ratio 1.25)

--cis-text-xs:   0.75rem   /* 12px : captions, micro */
--cis-text-sm:   0.875rem  /* 14px : body small, table cells */
--cis-text-base: 1rem      /* 16px : body */
--cis-text-lg:   1.125rem  /* 18px : lead paragraph */
--cis-text-xl:   1.25rem   /* 20px : section heading */
--cis-text-2xl:  1.5rem    /* 24px : h3 */
--cis-text-3xl:  1.875rem  /* 30px : h2 */
--cis-text-4xl:  2.25rem   /* 36px : h1 */
--cis-text-5xl:  3rem      /* 48px : hero */
--cis-text-6xl:  3.75rem   /* 60px : marketing hero */

Reglas Swiss

05 · Grid y spacing

Escala 8pt

--cis-space-{0,1,2,3,4,5,6,8,10,12,16,20,24} mapeando a 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5, 6 rem.

Grid Swiss 12 columnas

06 · Motion

Durations

--cis-duration-instant: 80ms
--cis-duration-fast:    150ms
--cis-duration-base:    250ms
--cis-duration-slow:    400ms

Easings

--cis-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1)
--cis-ease-emphasized: cubic-bezier(0.2, 0, 0, 1)
--cis-ease-decelerate: cubic-bezier(0, 0, 0.2, 1)

Reduce motion

Respetado globalmente con @media (prefers-reduced-motion: reduce). Cualquier animación con duración mayor a 10ms se reduce a 0.01ms.

07 · Iconografía

Base Lucide (MIT). Cada brand emite su sprite SVG en dist/v6/brand/<slug>/symbols.svg con solo los íconos relevantes.

Para la Compañía master: home, user, settings, search, menu, x, chevron-up, chevron-down, chevron-left, chevron-right, arrow-up-right, check, alert-circle, info, plus, minus, edit, trash, copy, external-link, eye, eye-off, lock, unlock, mail, calendar, clock, file, folder, download, upload, refresh, more-horizontal.

Uso:

<svg class="cis-icon" width="20" height="20">
  <use href="/v6/brand/cis/symbols.svg#search"/>
</svg>

08 · Accesibilidad

09 · Voz

Ver voice.md para tono completo, persona, do/don't y microcopy.

Resumen: técnico, cercano, sobrio, transparente, chileno-neutro. Evitar jerga corporativa, evitar exclamaciones, evitar paternalismo. Usar siempre el nombre completo "Compañía de Innovación de Santiago" en texto humano, nunca la sigla aislada.

10 · Atribución

El footer de cualquier sitio de la Compañía cierra con la línea:

Una empresa de Círculo de Santiago SpA

Esa línea vincula al holding y se autorenderiza desde runtime.json cuando el sitio usa <cis-footer> sin children. Si el sitio inyecta su propio footer, debe incluir la línea manualmente.

Para sub-brands hijos directos de la Compañía la atribución es:

Un proyecto de la Compañía de Innovación de Santiago

Para sub-sub-brands (caso cochid-datos hijo de cochid):

Parte de Cochid · un proyecto de la Compañía de Innovación de Santiago

11 · Convenciones de naming

12 · Recursos