design.md — Brandbook CSI traducido a sistema implementable

Traducción del Manual de Identidad Chile Social Innovation (elaborado por Procorp, septiembre 2025, 36 pliegos) a tokens y reglas aplicables en digital.

Regla de precedencia: el brandbook manda. Donde este documento agrega algo que el manual no define — por ejemplo cómo conviven seis registros de comunicación dentro de una sola paleta — está marcado como EXTENSIÓN y es una propuesta, no una norma heredada.

1. El concepto de la marca

El isotipo es América dibujada en líneas horizontales de grosor variable, en degradado teal → azul → violeta → magenta → naranja de norte a sur. De ahí se desprende todo el sistema:

• El rayado (líneas horizontales de largo variable) es el elemento gráfico primario. Aparece en rails de margen, en fondos, en iconos, en papelería.
• El degradado es el fondo de marca.
• La línea punteada magenta vertical marca el eje central de los pliegos.

Consecuencia de diseño: cualquier pieza que no tenga rayado no se ve como CSI. Es el rasgo que hace reconocible al sistema antes que el logo.

2. Marca

Versiones aprobadas

Variantes de color

• Full color — isotipo en degradado, texto en negro Pantone Black C
• Monocolor — todo en negro
• Sobre fondo — todo en blanco, sobre degradado o foto

Construcción

La medida base es X = alto del isotipo.

• Horizontal A: texto a X/2 de alto, línea inferior a X/4
• Horizontal B: texto X/6 de alto, ancho total 2X, isotipo X, texto centrado a X/2
• Vertical: bloque de texto X/2 de alto, primera línea a X/7

Zona de protección y tamaño mínimo

• Área de protección = el área "X" de la marca en los cuatro lados
• Tamaño mínimo Horizontal A: 29 mm de ancho
• Tamaño mínimo Horizontal B: 41 mm de ancho
• Tamaño mínimo Vertical: 26 mm de alto (la ficha indica 25 mm en el diagrama — ⚠️ discrepancia en el propio manual, usar 26 mm)

En digital, traducir a: mínimo 110 px de ancho para Horizontal A a 1× y 156 px para Horizontal B.

Bloque de afiliadas

Orden canónico del lockup, tal como aparece en toda la papelería:

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

Se presenta sobre franja blanca al pie de la pieza. No alterar el orden entre piezas: la consistencia del bloque es lo que lo vuelve reconocible.

3. Color

Los once colores del manual, con su equivalencia exacta.

Roles de uso EXTENSIÓN

El manual entrega la paleta pero no asigna funciones. Propuesta:

Regla dura: no introducir color fuera de esta tabla. Si hace falta un verde de "éxito", es --csi-teal. Si hace falta un rojo de "error", es --csi-magenta.

Neutros EXTENSIÓN

El manual no define grises, porque toda la papelería es blanco o degradado. En digital hacen falta: filetes de tabla, texto secundario, superficies de apoyo. Un gris puro al lado de esta paleta se ve sucio.

Solución: todos los neutros son tintas de Pantone 548 C sobre blanco. Heredan el sesgo frío de la marca en vez de ser inventados.

Aclarados para fondo oscuro EXTENSIÓN

Sobre Pantone 548 C o Black C, tres colores de marca no alcanzan contraste AA. Se usan aclarados, y solo ahí:

Sobre blanco se usan siempre los valores originales del manual.

Fondo

El fondo es blanco. El manual no contempla un fondo oscuro neutro en ninguna pieza: portada, papelería, presentación, web y redes son blanco o degradado de marca. Una pieza digital que se invierta a gris oscuro en modo noche deja de ser CSI.

Las piezas se comprometen a ese único mundo visual y el conmutador de tema del visor no las invierte. Los fondos oscuros que sí existen — el #003D4C del estilo 01 y el #231F20 del estilo 04 — son colores de la paleta, no un tema oscuro.

4. Gradiente

Es gráfica complementaria y siempre sigue estos criterios.

• Versión vertical: descendente de azul/magenta a verde/celeste, o de verde/celeste a azul/magenta. Ambas direcciones son válidas.
• Versión horizontal: descendente de azul/verde a magenta/celeste. Una sola dirección permitida.

Implementación aproximada en CSS, con los tokens reales:

/* vertical — variante azul/magenta → verde/celeste */
background: linear-gradient(180deg,
  #1D428A 0%, #565294 28%, #D0006F 55%, #485CC7 75%, #00B2A9 100%);

/* horizontal — azul/verde → magenta/celeste (única dirección) */
background: linear-gradient(135deg,
  #003D4C 0%, #1D428A 22%, #565294 48%, #D0006F 72%, #418FDE 100%);

Para reproducir el efecto de malla del manual (no un degradado lineal plano), superponer dos radiales:

background:
  radial-gradient(120% 90% at 15% 0%,   #1D428A 0%, transparent 60%),
  radial-gradient(110% 80% at 95% 30%,  #D0006F 0%, transparent 62%),
  radial-gradient(130% 95% at 25% 105%, #00B2A9 0%, transparent 65%),
  #565294;

5. Tipografía

Familias definidas por el manual

Cómo se resuelve en digital

Barlow y Lora son de licencia SIL Open Font License — uso libre, incluida la incrustación. El CSP de un artifact bloquea CDNs de fuentes, así que se incrustan como @font-face con data: URI, subconjunto latino:

Stack de respaldo, en el orden que exige el manual:

--font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', Arial, sans-serif;
--font-body:    'Barlow', Arial, Helvetica, sans-serif;
--font-accent:  'Lora', Georgia, 'Times New Roman', serif;

El respaldo cae en Arial, que es lo que el propio manual aprueba para uso interno. No se cae a un tipo ajeno a la marca.

Escala EXTENSIÓN

El manual no define escala. Propuesta, coherente con la plantilla PPT del pliego 45:

Regla dura sobre Lora: el manual la clasifica como destacado editorial. Se usa para una palabra o frase por pieza — como en el sistema THIS IS HOW WE *live* de la campaña. Nunca para texto corrido.

Pesos permitidos

El manual nombra cortes específicos. No hay SemiBold (600) en ninguna de las tres familias. Usar 600 fuerza al navegador a sintetizar o a saltar a Bold, y en ambos casos la pieza deja de usar la tipografía oficial.

Seis cortes embebidos, 111 KB de WOFF2 subconjunto latino. Ninguno fuera de esta tabla.

La marca en cada lámina

La plantilla de presentación del manual lleva el logotipo en todas las láminas, no solo en la portada. Cualquier pieza del sistema — incluidas las de datos densos como el prospecto o el scorecard de evidencia — usa la composición Horizontal-B arriba a la derecha: isotipo a la izquierda, texto en una línea a la derecha.

Sobre fondo 548 C o Black C va en blanco; sobre blanco, isotipo full color y texto en Black C.

6. Elementos gráficos

El rayado

Sistema de líneas horizontales de largo variable, coloreadas siguiendo el degradado del isotipo. Tres aplicaciones canónicas en el manual:

1. Rail de margen — columna estrecha de líneas en el borde exterior de la página, del alto completo, recorriendo la paleta de teal (arriba) a naranja (abajo).
2. Campo de fondo — bloque de líneas de largos aleatorios que se desvanece, sobre fondo blanco o degradado.
3. Subrayado de titular — dos o tres líneas de distinto largo bajo un título.

Implementación del rail:

.csi-rail {
  width: 22px;
  background: repeating-linear-gradient(180deg,
    currentColor 0 1.5px, transparent 1.5px 5px);
  /* el color se anima recorriendo la paleta con un gradiente enmascarado */
}

Para el rail multicolor real, usar un degradado vertical con los once colores en orden y enmascararlo con el patrón de líneas vía mask-image.

La línea punteada magenta

Eje vertical central, 1px, --csi-magenta, patrón discontinuo largo. En el manual marca el pliegue del pliego. En digital: usarla solo como separador estructural mayor, nunca como decoración repetida.

7. Iconografía

Ocho iconos definidos, todos construidos con el mismo rayado:

Humanitary · Shelter · Care · Health · Technologies · Developement · Connections · Environment

Versiones: full color sobre blanco, blanco sobre degradado.

⚠️ El manual escribe "Developement", con error ortográfico. Corregir a Development antes de cualquier uso en material dirigido a donantes de habla inglesa.

Mapeo a las siete causas del portafolio EXTENSIÓN:

Environment queda libre para uso ambiental o de contexto país.

8. Tratamiento fotográfico

Tres bancos definidos, con nombre propio:

• "Así miramos" — retratos frontales, fondo desenfocado, mirada a cámara
• "Así vivimos" — escenas de vida cotidiana, comunidad, trabajo, familia
• "Así es Chile" — paisaje, territorio, geografía

Duotono de marca

Todas las fotos de portada e interior llevan el degradado de marca en superposición. Receta:

.csi-photo {
  filter: grayscale(1) contrast(1.05);
}
.csi-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    #003D4C 0%, #1D428A 25%, #565294 50%, #D0006F 75%, #418FDE 100%);
  mix-blend-mode: color;
  opacity: 0.88;
}

La foto va siempre en blanco y negro debajo; el color lo pone la marca, no la imagen.

9. Plantilla de presentación — definida por el manual

El pliego 45 define tres láminas. Son la base obligatoria de cualquier presentación CSI.

Portada

• Foto a sangre completa con duotono de marca
• Rail de rayado en el borde izquierdo
• Título en Barlow Bold, blanco, alineado a la izquierda, con fecha debajo en menor tamaño
• Logo vertical en blanco a la derecha
• Franja blanca al pie con el bloque de las siete afiliadas

Destacado / portadilla

• Panel izquierdo (≈35%) con degradado + rail de rayado
• Rótulo Título presentación en blanco pequeño, arriba del panel
• Frase destacada grande en Barlow Bold blanco sobre el degradado
• Panel derecho blanco con texto de cuerpo en dos párrafos
• Logo full color arriba a la derecha
• Pie: Septiembre de 2025 ⟩ 02 — fecha y número de lámina separados por un chevron

Destacado con foto

Misma estructura, pero el degradado se reemplaza por foto a sangre con duotono. El texto de cuerpo va sobre la propia foto, a la derecha.

10. Los seis registros dentro de una sola marca EXTENSIÓN

Problema real: el sistema de comunicación define seis estilos con carácter distinto, y la marca tiene una sola paleta. Resolverlo con paletas ajenas rompería la identidad.

Solución: la paleta CSI ya es un espectro completo — teal → azul → violeta → magenta → naranja. Cada registro toma un segmento del espectro y un fondo, no colores nuevos. El rayado aparece en los seis: es el hilo que los une.

El registro 05 es el más alineado de todos: el isotipo de CSI ya es América dibujada en líneas, y ese estilo consiste literalmente en poner ese mapa a trabajar. Es la pieza donde marca y mensaje son la misma cosa.

11. Tokens listos para copiar

:root {
  /* Paleta — Manual de Identidad CSI, pliego 19 */
  --csi-teal:        #00B2A9;  /* Pantone 326 C  */
  --csi-teal-deep:   #007D8A;  /* Pantone 7713 C */
  --csi-navy:        #003D4C;  /* Pantone 548 C  */
  --csi-blue-deep:   #1D428A;  /* Pantone 7687 C */
  --csi-blue-violet: #485CC7;  /* Pantone 2726 C */
  --csi-blue:        #418FDE;  /* Pantone 279 C  */
  --csi-violet-mid:  #606EB2;  /* Pantone 7456 C */
  --csi-violet:      #565294;  /* Pantone 7670 C */
  --csi-magenta:     #D0006F;  /* Pantone 226 C  */
  --csi-orange:      #DC6B2F;  /* Pantone 7578 C */
  --csi-black:       #231F20;  /* Pantone Black C */

  /* Tipografía */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Barlow', Arial, Helvetica, sans-serif;
  --font-accent:  'Lora', Georgia, serif;

  /* Neutros — tintas de Pantone 548 C sobre blanco */
  --ground:   #FFFFFF;
  --ground-2: #F4F8F9;
  --rule-2:   #EAF0F1;
  --rule:     #D7E1E3;
  --ink-3:    #6E8085;
  --ink-2:    #4A585C;
  --ink:      #231F20;

  /* Gradiente horizontal — única dirección permitida */
  --csi-gradient-h: linear-gradient(135deg,
    #003D4C 0%, #1D428A 22%, #565294 48%, #D0006F 72%, #418FDE 100%);

  color-scheme: light;
}

/* Sobre fondo oscuro de marca (548 C, Black C), declarar el color del texto
   en table, td, th y li — no heredarlo. Los resets de la mayoría de los
   entornos fijan `color` sobre <table> y cortan la herencia del contenedor. */

/* El fondo es blanco en ambos temas del visor: la marca no tiene modo oscuro */
:root[data-theme="dark"], :root[data-theme="light"] {
  --ground: #FFFFFF; --ground-2: #F4F8F9;
  --rule-2: #EAF0F1; --rule: #D7E1E3;
  --ink-3: #6E8085; --ink-2: #4A585C; --ink: #231F20;
  color-scheme: light;
}

12. Qué no hacer

• No usar color fuera de la tabla del pliego 19. Ni un verde de éxito, ni un rojo de error, ni un gris cálido.
• No invertir el gradiente horizontal. El manual permite ambas direcciones solo en vertical.
• No usar Lora para texto corrido. Es destacado editorial: una frase por pieza.
• No poner foto a color bajo el duotono. Va en blanco y negro; el color lo aporta la marca.
• No alterar el orden del bloque de afiliadas.
• No usar la marca bajo 29 mm (Horizontal A) sin cambiar a otra versión.
• No dejar una pieza sin rayado. Sin él, no se lee como CSI.
• No usar un fondo oscuro neutro. El fondo es blanco. Los oscuros permitidos son colores de la paleta — 548 C y Black C —, no un modo noche.
• No usar un gris puro. Todo neutro es tinta de 548 C.
• No usar #8CA0A5 como texto. 2,9:1 — es color de superficie y barra, no de lectura.
• No usar peso 600. Ninguna de las tres familias lo tiene: el navegador lo sintetiza y la pieza deja de estar en la tipografía oficial.
• No dejar una lámina sin logotipo. La plantilla del manual lo lleva en todas, no solo en la portada.
• No repetir la línea punteada magenta como patrón decorativo: es un separador estructural mayor.

13. Pendientes detectados en el propio brandbook