# Chile Social Innovation — Design System (Canon Kit)

> **Este kit es la fuente de verdad.** El Canon Book HTML es presentación.  
> Tokens: `css/tokens.css` · Agentes: `AGENTS.md` · Logos: `assets/logo/`  
> Datos verificados: `comunicacion/01-datos-maestros.md`  
> Framework: Canon (`oqo-canon`)  
> Origen visual: Manual de Identidad CSI (Procorp, septiembre 2025)

---

## 1. Brand

| Campo | Valor |
|-------|--------|
| **Brand name** | Chile Social Innovation (CSI) |
| **Organización / cliente** | Chile Social Innovation — Asociación de Fundaciones Sociales |
| **Tagline** | Soluciones desde el sur para un mundo mejor |
| **Línea plana (categoría)** | Asociación de fundaciones chilenas que canaliza inversión social global hacia soluciones probadas en América Latina |
| **Personalidad** | Confiable · Curadora · Evidencia primero · Sur-originada · Institucional sin frialdad |
| **Pilares** | Curaduría · Evidencia · Incidencia (piloto→ley) · Escala sur-sur · Transparencia |

**Resumen.** CSI es una **plataforma de innovación social** con base en Chile: gestiona y conecta capital filantrópico global con soluciones escalables de sus afiliados. No es operadora de emergencia; vende **confianza y curaduría**. El isotipo — América en líneas horizontales con degradado norte→sur — es el sistema gráfico completo (rayado + gradiente).

### Afiliadas (orden canónico del lockup)

> Foro Innovación · Hogar de Cristo · América Solidaria · Kodea · TECHO · Teletón · COANIQUEM

No alterar el orden entre piezas.

---

## 1.1 Estrategia de marca

### Verdad central

Chile produce soluciones sociales con evidencia y las exporta; CSI es la plataforma que convierte esa capacidad en asignación de capital filantrópico.

### Misión y visión

| | Declaración |
|--|--|
| **Misión** | Conectar inversión social y capital filantrópico global con soluciones innovadoras, escalables y de alto rendimiento de fundaciones chilenas con trayectoria auditada. |
| **Visión** | Que América Latina sea reconocida como origen —no solo destino— de tecnología social replicable a escala. |

### Posicionamiento

| Dimensión | Definición |
|-----------|------------|
| **Para quién** | Filántropos, family offices, fundaciones e inversionistas de impacto (foco US HNWI & foundations) |
| **Problema** | Capital filantrópico que busca escala y evidencia no encuentra un vehículo curado en LatAm |
| **Categoría** | Plataforma / asociación de fundaciones (no ONG operadora) |
| **Diferencia** | Track record repetido de **piloto → política pública** + red de 7 orgs en 19 países |
| **Prueba** | Housing First nacional · Ley de Cuidados · Ley de Fuegos Artificiales · Teletón USD 50M/27h · 560 médicos formados en Chile |

### Pilares comunicacionales

| Pilar | Qué implica |
|-------|-------------|
| **Curaduría** | Due diligence propio (8 dimensiones). El donante no paga el costo de descubrimiento |
| **Evidencia** | Números con año, unidad y fuente. Resultados negativos publicables con metodología |
| **Incidencia** | El producto diferencial: programas que se vuelven ley / política nacional |
| **Desde el Sur** | Exportamos método (protocolo, currículo, índice), no pedimos ayuda genérica |
| **Transparencia** | Brechas fechadas; sin inventar ratio de eficiencia ni costo por resultado |

### Claims seguros

Usar solo datos de `comunicacion/01-datos-maestros.md` con estado `✅` o `📄`. Preferir:

- 7 organizaciones · 7 causas · **19 países** (nominales; no “20+”)
- Teletón: **USD 50M en 27 horas** · 3M donantes individuales
- COANIQUEM: **155.000+** niños tratados · ticket **USD 610.000** (5º Centro, Puente Alto)
- TECHO: **150.000+** viviendas · **18** países · socios Porsche · Bank of America · Airbus · S&P
- CPI Chile 2025: **63/100**, 2º LatAm, **21 pts** sobre promedio Américas (42) — **no** “el más transparente de LatAm”
- Accionadores ticket: **CLP 30.000.000** / establecimiento / ciclo

### Nunca decir / inventar

- ❌ “Chile tiene el mayor puntaje de transparencia de América Latina” (falso: Uruguay 73 > Chile 63)
- ❌ “20+ países” si la lista es 19
- ❌ “80+ años combinados” sin recalcular (subvende; confirmar fundaciones)
- ❌ Ratio de eficiencia, costo por resultado o multiplicador fiscal **hasta que existan** (`✗ FALTA`)
- ❌ Mezclar voluntarios únicos con movilizaciones
- ❌ Inventar clientes, premios, headcount o servicios no briefados
- ❌ Reinventar paleta, tipografía o rayado fuera de este kit

### Seis registros de comunicación

Un sistema, seis momentos del embudo. Detalle en `comunicacion/02`–`07`. Paleta única; cada registro toma un **segmento** del espectro.

| # | Registro | Embudo | Fondo / acento |
|---|----------|--------|----------------|
| 05 | Soluciones desde el Sur | Posicionamiento (paraguas) | Blanco · magenta flechas · teal-deep |
| 04 | Escala Humana | Atraer | Negro + duotono · magenta en cifra |
| 02 | De Piloto a Ley | Diferenciar | Blanco · teal en hito legal |
| 01 | Prospecto de Portafolio | Considerar | Navy · blue datos · orange montos |
| 03 | Transparencia Radical | Auditar | Blanco · semántica teal/naranja/magenta |
| 06 | Catálogo de Inversión | Cerrar | Blanco · teal disponible |

**03 Transparencia Radical** requiere autorización explícita de América Solidaria y directorio CSI antes de publicar resultados negativos.

---

## 2. Color tokens

Fuente: Brandbook pliego 18–19 «Colores principales» + `MARCA_CHILE_SOCIAL_INNOVATION_COLORES.pdf`.  
No inventar hex. No usar pantones cercanos (2728, 7455, 228, etc.).

### Paleta oficial (11 colores)

| Token | Pantone | CMYK | RGB | HEX | Rol |
|-------|---------|------|-----|-----|-----|
| `--csi-teal` | 326 C | 81 / 0 / 39 / 0 | 0 · 178 · 169 | `#00B2A9` | Confirmación, norte isotipo · **no texto** (2.6:1) |
| `--csi-teal-deep` | 7713 C | 100 / 0 / 30 / 26 | 0 · 125 · 138 | `#007D8A` | Teal como texto (AA) |
| `--csi-navy` | 548 C | 100 / 21 / 28 / 76 | 0 · 61 · 76 | `#003D4C` | Fondo institucional oscuro |
| `--csi-blue-deep` | 7687 C | 100 / 78 / 0 / 18 | 29 · 66 · 138 | `#1D428A` | Gradiente / autoridad |
| `--csi-blue-violet` | 2726 C | 81 / 70 / 0 / 0 | 72 · 92 · 199 | `#485CC7` | Gradiente |
| `--csi-blue` | 279 C | 68 / 34 / 0 / 0 | 65 · 143 · 222 | `#418FDE` | Enlace, dato vivo |
| `--csi-violet-mid` | 7456 C | 72 / 55 / 0 / 0 | 96 · 110 · 178 | `#606EB2` | Gradiente |
| `--csi-violet` | 7670 C | 80 / 74 / 0 / 0 | 86 · 82 · 148 | `#565294` | Gradiente |
| `--csi-magenta` | 226 C | 0 / 100 / 2 / 0 | 208 · 0 · 111 | `#D0006F` | CTA, error/falta, eje punteado |
| `--csi-orange` | 7578 C | 0 / 67 / 100 / 0 | 220 · 107 · 47 | `#DC6B2F` | Atención, montos |
| `--csi-black` | Black C | 0 / 0 / 0 / 100 | 35 · 31 · 32 | `#231F20` | Texto principal |

### Dieta UI (suma ~100%)

| Nombre (Brandbook) | Token | HEX | Rol | % |
|--------------------|-------|-----|-----|--:|
| Blanco | `--ground` / `--canvas` | `#FFFFFF` | Fondo de pieza | 55 |
| Pantone Black C | `--csi-black` / `--ink` | `#231F20` | Texto principal | 25 |
| Pantone 548 C | `--csi-navy` (+ gradiente) | `#003D4C` | Hero / paneles de marca | 10 |
| Pantone 279 C | `--csi-blue` | `#418FDE` | Enlaces / datos vivos | 5 |
| Pantone 226 C | `--csi-magenta` | `#D0006F` | CTA / error / eje | 5 |

Semántica fuera de franja: éxito = **326 C** (chip) / **7713 C** (texto AA); montos = **7578 C**.  
**Regla dura:** no introducir color fuera de la tabla §2. Neutros = tintas de 548 C. Fondo siempre blanco o color de paleta — **sin modo noche gris**.

### Gradiente

Stops oficiales (CSS del kit):

| Token | Dirección | Stops (Pantone · %) |
|-------|-----------|---------------------|
| `--csi-gradient-h` | **135° única** | 548 C 0% → 7687 C 22% → 7670 C 48% → 226 C 72% → 279 C 100% |
| `--csi-gradient-v` | 180° **o** 0° | 7687 C 0% → 7670 C 28% → 226 C 55% → 2726 C 75% → 326 C 100% |
| `--csi-gradient-mesh` | radiales | 7687 / 226 / 326 sobre base 7670 C |

**Uso:** panel destacado ≈ 35% + cuerpo blanco; hero/portada a sangre; rail con máscara de rayado; logo blanco o sobre-fondo.  
**No:** invertir horizontal, mover stops, usar gradiente como CTA, logo oscuro sobre degradado.

---

## 3. Tipografía

| Rol | Familia | Cortes | Uso |
|-----|---------|--------|-----|
| Display / titulares | **Barlow Condensed** | 500 (700 solo «SOCIAL» del logo) | H1–H2, rótulos |
| UI / cuerpo | **Barlow** | 300 · 400 · 500 · **700** | Texto, datos (500 + `tabular-nums`) |
| Destacado editorial | **Lora** | **700 italic** | Una frase por pieza |
| Interno | Arial | — | PPT / Word |

Licencia: SIL Open Font License. Self-host preferido.

```css
--font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
--font-body:    'Barlow', Arial, Helvetica, sans-serif;
--font-accent:  'Lora', Georgia, serif;
```

**No usar peso 600** en ninguna familia. **Lora nunca** para texto corrido.

### Escala

| Nivel | Familia | Tamaño | Tracking |
|-------|---------|--------|----------|
| Display | Condensed 500 | 3.2–4.4 rem | `-0.01em` |
| H1 | Condensed 500 | 2.2–2.8 rem | `0` |
| H2 | Condensed 500 | 1.5–1.8 rem | `0` |
| Destacado | Barlow 700 | 1.3–1.6 rem | `-0.01em` |
| Cuerpo | Barlow 400 | 1 rem / 1.6 | `0` |
| Cita | Lora 700 italic | 1.4–2 rem | `0` |
| Etiqueta | Condensed 500 | 0.68 rem | `0.14em` · versalitas |

---

## 4. Logo

Fuente oficial: `assets/Material Procorp/ORIGINALES/MARCA_CHILE_SOCIAL_INNOVATION` → kit `assets/logo/`.  
Regenerar: `python3 scripts/build-logos.py`.

### Composiciones (Brandbook)

| Composición | Layout | Uso |
|-------------|--------|-----|
| **Horizontal-A** | Texto 3 líneas izq. + isotipo der. | Primaria; portadas, firmas, UI |
| **Horizontal-B** | Isotipo izq. + texto 1 línea der. (`SOCIAL` bold) | Nav, headers, láminas, web |
| **Vertical** | Isotipo arriba + texto 3 líneas abajo-derecha | Portadas, piezas altas |

Wordmark: Barlow Condensed — `CHILE` / `INNOVATION` Light · **`SOCIAL` Bold**.  
Canónico CSI = lockup **sin** rótulo de continente. Variantes regionales (`America`, `Africa`, `Asia`, `Europe`) viven en `assets/logo/continents/`.

### Variantes de color

| Variante | Archivos | Fondo |
|----------|----------|-------|
| Full color | `horizontal-a/color.png` · `horizontal-b/color.png` · `vertical/color.png` | blanco / claros |
| Monocolor negro | `…/negro.png` | blanco |
| Blanco | `…/blanco.png` | navy / black / gradiente / foto |
| Sobre fondo | `…/sobre-fondo.png` | oscuros (**isotipo color** + texto blanco) |

Aliases raíz (compat Book / sync): `horizontal-*.png` (= Horizontal-A), `horizontal-b-*.png`, `vertical-*.png`.  
Isotipo solo: `assets/logo/isotype/america/{color,negro,blanco,sobre-fondo}.png`.

**Regla dura:** sobre navy (`#003D4C`), black C o gradiente → **blanco** o **sobre-fondo**. Nunca negro / color oscuro sobre navy.

### Construcción

Medida base **X = alto del isotipo**. Área de protección = X en los cuatro lados.

| Versión | Proporción clave (Brandbook) | Mínimo print | Mínimo digital 1× |
|---------|------------------------------|--------------|-------------------|
| Horizontal-A | texto alto ≈ X | 29 mm ancho | 110 px |
| Horizontal-B | texto alto ≈ X/6 · ancho ≈ 2X | 41 mm ancho | 156 px |
| Vertical | gap texto ≈ X/7 | 26 mm alto | — |

**No-usos:** distorsionar, recolorar el degradado del isotipo, poner bajo mínimo, omitir logo en láminas de presentación (la plantilla lo lleva en todas), usar PNG `blanco` Procorp sin procesar (algunos exports vienen como lienzo blanco sólido — el script del kit lo corrige).

---

## 5. Componentes

### CTA

- Fondo `--csi-magenta`, texto blanco, Barlow Bold, uppercase opcional.
- Radius **0** (sistema editorial).
- Hover: `--accent-hover` `#A8005A`.
- Alternativa secundaria: outline navy o texto + subrayado rayado.

### Rayado / elementos gráficos (obligatorio)

Elemento gráfico primario. Sin rayado, la pieza no se lee como CSI.

| Pieza | Archivo / clase |
|-------|-----------------|
| Rail de margen | `.csi-rail` · `assets/elements/lines-vertical.svg` (blanco sobre gradiente) |
| Campo superior/inferior | `assets/elements/lines-top.svg` · `lines-bottom.svg` |
| Acento sobre foto (6 líneas) | `assets/elements/accent-lines.svg` — tratamiento “THIS IS HOW WE *look*” |
| Subrayado de titular | 2–3 líneas de distinto largo en tokens |

Colores de línea = solo paleta oficial (§2).

### Línea punteada magenta

Eje estructural mayor (`1px`, `--csi-magenta`). No repetir como decoración.

### Iconografía

Rayado en 8 motivos (líneas horizontales de largo variable, espectro Pantone):  
Humanitary · Shelter · Care · Health · Technologies · Development · Connections · Environment.

| Variante | Path |
|----------|------|
| Full color (sobre blanco) | `assets/icons/*.svg` — strokes = tokens oficiales |
| Blanco (sobre gradiente/foto) | `assets/icons/white/*.svg` |

Corregir “Developement” → **Development** en copy EN.  
**No** usar hex de exportación web sueltos (`#00abaa`, `#e6007c`, etc.): remapear siempre a la tabla §2.

| Causa portafolio | Icono |
|------------------|-------|
| Educación | development |
| Salud y rehabilitación | health |
| Participación juvenil | humanitary1 / humanitary2 |
| Vivienda y hábitat | shelter |
| Inclusión digital | technologies |
| Superación de la pobreza | care |
| Innovación | connection |

### Forma / motion

- Radios: `0` (sin pills ni cards decorativas).
- Ease: `--ease: cubic-bezier(0.32, 0.72, 0, 1)`.
- Motion: presencia y jerarquía (reveal, rail), no noise.

### Plantilla de presentación (manual)

1. **Portada** — foto duotono a sangre · rail · título Barlow Bold blanco · logo vertical · franja afiliadas.
2. **Destacado** — panel gradiente ~35% + cuerpo blanco · logo Horizontal-B.
3. **Destacado con foto** — igual con duotono.

---

## 6. Voz y tono

**Fuente de verdad (única):** `comunicacion/propuestas-graficas.md` + body HTML del kit · presentación `marca/canon-brand-book/comunicacion.html` (hero = portada original; estilos `propuestas.css` sobre `tokens.css`).  
El archivo histórico `comunicación/visual/propuestas-graficas.html` redirige a Comunicación en el Book.

| Eje | Hacer | Evitar |
|-----|-------|--------|
| Categoría | Línea plana antes del eslogan | Solo metáfora sin “qué es” |
| Capital | Asignación, curaduría, prospecto | “ROI social”, urgencia tipo MSF |
| Datos | Número + verbo + población + periodo | Cifras sueltas o redondeo al alza |
| Emoción | Una cara + un número (registro 04) | Solo pathos o solo tablas |
| Sur | Origen / flechas hacia afuera (05) | “Ayúdanos a ayudar” |
| Cierre | Ticket con precio (06) al final | Catálogo como primer touch |

**CTA:** verbo + objeto (`Agendar visita a terreno`, `Solicitar prospecto`, `Patrocinar un establecimiento`) · sólido Pantone 226 C.

**Orquestación (no elegir un solo registro):** Atraer 04+05 → Convencer 02+01 → Auditar 03 → Cerrar 06.

Estructura comercial: contexto → diagnóstico → enfoque → evidencia → next step.

---

## 7. Foto

Ver `estilo-fotografico.md`. Tres bancos: **Así miramos** · **Así vivimos** · **Así es Chile**. Portadas: B&N + duotono de marca (`.csi-photo`).

---

## 8. Qué no hacer

- Color fuera del pliego 19 / grises puros / teal como texto de lectura.
- Invertir gradiente horizontal.
- Lora en corrido · peso 600 · pieza sin rayado · lámina sin logo.
- Fondo oscuro neutro (modo noche).
- Alterar orden del bloque de afiliadas.
- Claims en estado `❌` / `⚠️` / `✗ FALTA` sin corrección.

---

## 9. Pendientes del brandbook / operación

| Hallazgo | Acción |
|----------|--------|
| Dominios `chilesocialinnovation.cl` vs `.org` | Definir oficial |
| Icono “Developement” | Renombrar a Development |
| Ratio eficiencia / costo unitario / vehículo 501(c)(3) | Levantar antes de cierre US |
| Tamaño mínimo vertical 25 vs 26 mm | Usar 26 mm |

---

## 10. Fuentes del kit

| Documento | Rol |
|-----------|-----|
| `data general drive/Brandbook.pdf` | Manual de identidad (norma visual) |
| `comunicacion/` | Estrategia, datos maestros, 6 registros |
| Este `design.md` + `css/tokens.css` | Implementación Canon |