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

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

Posicionamiento

Pilares comunicacionales

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.

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)

Dieta UI (suma ~100%)

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):

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

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

--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

4. Logo

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

Composiciones (Brandbook)

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

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.

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.

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.

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

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.

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

10. Fuentes del kit