Chile Social InnovationChile Social Innovation - Canon - Canon Bookdesign.md

03 · Color

Colores principales.

11 Pantone del Manual · tokens.css · sin inventar.

Brandbook · pliego 18–19

La paleta oficial.

Nombres reales = códigos Pantone del Manual. Valores exactos CMYK · RGB · HEX. Fuente: COLORES.pdf / Brandbook. En CSS: --csi-*.

Pantone 326 C
C:81 M:0 Y:39 K:0
R:0 G:178 B:169
#00B2A9 · --csi-teal
Pantone 7713 C
C:100 M:0 Y:30 K:26
R:0 G:125 B:138
#007D8A · --csi-teal-deep
Pantone 548 C
C:100 M:21 Y:28 K:76
R:0 G:61 B:76
#003D4C · --csi-navy
Pantone 7687 C
C:100 M:78 Y:0 K:18
R:29 G:66 B:138
#1D428A · --csi-blue-deep
Pantone 2726 C
C:81 M:70 Y:0 K:0
R:72 G:92 B:199
#485CC7 · --csi-blue-violet
Pantone 279 C
C:68 M:34 Y:0 K:0
R:65 G:143 B:222
#418FDE · --csi-blue
Pantone 7456 C
C:72 M:55 Y:0 K:0
R:96 G:110 B:178
#606EB2 · --csi-violet-mid
Pantone 7670 C
C:80 M:74 Y:0 K:0
R:86 G:82 B:148
#565294 · --csi-violet
Pantone 226 C
C:0 M:100 Y:2 K:0
R:208 G:0 B:111
#D0006F · --csi-magenta
Pantone 7578 C
C:0 M:67 Y:100 K:0
R:220 G:107 B:47
#DC6B2F · --csi-orange
Pantone Black C
C:0 M:0 Y:0 K:100
R:35 G:31 B:32
#231F20 · --csi-black

Dieta UI

Proporción de uso en pantalla.

Suma ≈ 100%. Fondo siempre blanco o color de paleta — sin modo noche gris. Neutros secundarios = tintas de Pantone 548 C.

55%Blanco#FFFFFF · --ground / --canvas

Fondo de pieza. El Manual no define grises; el blanco es el lienzo.

25%Pantone Black C#231F20 · --csi-black / --ink

Texto principal. Único negro aprobado del Manual.

10%Pantone 548 C#003D4C · --csi-navy (+ gradiente)

Hero, paneles de marca, estilo Prospecto. Incluye superficie con degradado.

5%Pantone 279 C#418FDE · --csi-blue

Enlaces y datos vivos. Confirmación visual: usar 326 C / texto 7713 C.

5%Pantone 226 C#D0006F · --csi-magenta

CTA, eje punteado, error/falta. Hover: #A8005A.

Semántica: éxito = Pantone 326 C (chip) / 7713 C (texto AA). Error = Pantone 226 C. Montos / atención = Pantone 7578 C (fuera de la franja de %). 326 C no es texto sobre blanco (2.6:1).

Gradiente

Degradado del isotipo, en superficie.

Misma secuencia norte→sur del mapa: 548 C → 7687 C → 7670 C → 226 C → 279 C. Gráfica complementaria — no recolorar ni inventar stops.

Horizontal · --csi-gradient-h · 135° · única dirección

0%22%48%72%100%
0% · 548 C#003D4C
--csi-navy
22% · 7687 C#1D428A
--csi-blue-deep
48% · 7670 C#565294
--csi-violet
72% · 226 C#D0006F
--csi-magenta
100% · 279 C#418FDE
--csi-blue

Vertical · --csi-gradient-v · ambas direcciones válidas

180° · 7687→326

0° · invertido OK

0% · 7687 C#1D428A
28% · 7670 C#565294
55% · 226 C#D0006F
75% · 2726 C#485CC7
100% · 326 C#00B2A9

Uso

  • Panel destacado ≈ 35% del ancho (lámina / web) + cuerpo blanco.
  • Hero / portada: gradiente o foto duotono a sangre; logo blanco o sobre-fondo.
  • Rail de margen: máscara de rayado sobre --csi-gradient-v.
  • Iconos blancos sobre gradiente; full color sobre blanco.
  • Malla orgánica: --csi-gradient-mesh (radiales, no lineal plano).

--csi-gradient-mesh

No hacer

  • Invertir el gradiente horizontal.
  • Mover stops (0 / 22 / 48 / 72 / 100) o cambiar orden Pantone.
  • Usar gradiente como texto o CTA — el CTA es sólido 226 C.
  • Poner logo negro / full-dark sobre el degradado.
  • Sustituir por purple/neon ajenos a la dieta.
Seguir a Tipografía