# Copa DS 2.0 — colores y tipografía, actualización del 21 de octubre de 2026

## Fuentes y alcance

- [DS 2.0 - Colors Definition, PDF original](./copa-ds2-colors-definition-20261021.pdf), una página de System Foundations.
- [Typography — Variants & Overrides, imagen original](./copa-typography-variants-overrides-20261021.png), Website Patterns.
- Los estilos computados de título principal y H2 del 25 de agosto siguen siendo evidencia numérica. La nueva imagen no publica tamaños, pesos numéricos, line-height, tracking ni breakpoints.

La paleta y los roles de texto se aplican a web, presentaciones, documentos y assets. Los valores CSS en píxeles no se convierten directamente a puntos de PowerPoint. Los assets de marca mantienen sus colores originales; esta actualización no autoriza recolorear logos, iconos o pictogramas.

## Paleta vigente

| Familia | Token | HEX |
| --- | --- | --- |
| Primary | UltraDark | `#001A66` |
| Primary | Dark | `#002880` |
| Primary | Main | `#0032A0` |
| Primary | Light | `#0E68FF` |
| Primary | UltraLight | `#D6E3FF` |
| Primary | Faded | `#9FC3FF` |
| Secondary | Main | `#00A3E0` |
| Secondary | Faded | `#80D1EF` |
| Tertiary | Light | `#D0B49F` |
| Alternative | Pardo | `#866D4B` |
| Alternative | Gold | `#AD7C59` |
| Alternative | Dark Orange | `#B15C37` |
| Alternative | Light Orange | `#E2C070` |
| Alternative | PreferMember Blue | `#072241` |
| Alternative | Lavanda Faded | `#E9E1F0` |
| Alternative | Lavender | `#C9ABE0` |
| Alternative | Terminal 2 | `#DADF0C` |
| Alternative | Terminal 1 | `#FF2996` |
| Background | Light Blue | `#EFF5FF` |
| Background | Paper | `#FCFCFC` |
| Warning | Main / Faded | `#FFC82C` / `#FFF4D5` |
| Error | Main / Faded | `#D52525` / `#FFEFEF` |
| Success | Main / Faded | `#0C7E3E` / `#CEE5D8` |
| Grey | 800 / 700 / 600 / 500 | `#121212` / `#333333` / `#666666` / `#999999` |
| Grey | 400 / 300 / 200 / 100 | `#AAAAAB` / `#CCCCCB` / `#DBDAD8` / `#EFEFEE` |
| Grey | 75 / 50 | `#EFEFEE` / `#F9F9F8` |
| Common | Black / White | `#000000` / `#FFFFFF` |
| Status | Member / Silver / Gold | `#0032A0` / `#062660` / `#8D7249` |
| Status | Platinum / Presidential | `#666666` / `#121212` |

Cambios frente a la guía anterior:

- Se incorporan Lavanda Faded, Lavender, Terminal 2 y Terminal 1 como colores Alternative.
- Grey 50 queda en `#F9F9F8`; Grey 75 se transcribe como `#EFEFEE`, igual que Grey 100 según el rótulo del PDF. Sustituye la tabla anterior, que asignaba `#F9F9F8` a Grey 75 y duplicaba Grey 100 en Grey 50.
- Primary / Faded es `#9FC3FF`. `#D6E3FF` corresponde a UltraLight. Se corrige el alias del stylesheet del sitio que antes llamaba Faded a UltraLight.
- La tabla Status reafirma los colores de niveles ConnectMiles ya documentados. Alternative / Gold, Status / Gold y el dorado del logo son tokens distintos.

Usos: Primary / Main sigue estructurando marca, navegación y títulos. Alternative y Terminal requieren contexto de producto o señalización; su disponibilidad no los convierte en acentos decorativos universales. Cada combinación de texto y superficie se comprueba por contraste. Usa texto oscuro sobre fondos claros o saturados cuando el blanco no alcance el contraste necesario.

## Gradientes

| Nombre | Secuencia rotulada | Estado |
| --- | --- | --- |
| Primary | `#0032A0` → `#0E68FF` → `#00A3E0` | Colores y orden confirmados. |
| Gold | `#866D4B` → `#AD7C59` → `#E2C070` | Colores y orden confirmados. |
| Gradient, tercera muestra | Rótulo Gold repetido sobre muestra en grises | Pendiente de aclaración; no generar un gradiente neutral desde esta contradicción. |

El PDF no especifica ángulo, posiciones de stops ni interpolación. No se exporta una receta CSS como si esa geometría fuera oficial. Conserva las superficies sólidas para logos y para las regiones que lo requieran; los gradientes no habilitan franjas decorativas en bordes de cards.

## Tipografía: variantes y overrides

La imagen declara dos familias complementarias, Gilroy y Suisse. Gilroy cubre títulos y display; Suisse Int’l, lectura, labels, controles, tablas, cifras y texto funcional.

| Grupo visible | Variantes que confirma la imagen | Aplicación |
| --- | --- | --- |
| Regular Title Hierarchy | Heading 1: Large, Medium, Small, XSmall; Heading 2: Large, Medium, Small, XSmall; Heading 3: Large, Medium + Lower; Heading 4: Large, Medium, Small, XSmall | H1 regular de peso ligero visual; H2–H4 con énfasis mayor. H1–H2 azules y H3–H4 neutrales en la muestra. |
| Display | Display Big (H5); Display Normal (H6); Display Small (Subtitle 1); Display Tiny (Subtitle 2) | Big y Normal con mayor énfasis visual; subtítulos de menor peso. “H5/H6” son nombres de estilo, no instrucciones para saltar headings HTML. |
| Body | Caption Large; Overline; Body 1, Body 2, Body 3 | Elegir por función y conservar la legibilidad. No deducir métricas numéricas de su tamaño dentro de una captura. |
| Body overrides | Body, Emphasis, Link, Link Hover, Invert Primary, Invert Emphasis, Invert Link, Link Secondary y su hover | Cambian peso, color o subrayado; conservan familia, tamaño, line-height y tracking de la variante base. |
| Caption overrides | Caption 1–4, Body, Caption y Caption Inverted | Mapa de variantes confirmado; medidas exactas y relación de Caption 4 con Caption Large pendientes. |
| Overline overrides | Overline, Overline Small; Primary, Emphasis, Invert Primary | Usar para contexto necesario, no como title lash genérico. No completar celdas vacías de la lámina como si fueran estilos aprobados. |

Las medidas heredadas y las instancias computadas permanecen en la guía completa y en `tokens.json`, con su evidencia identificada. En particular: título principal de producción Gilroy Bold `700`, `76/80px`, tracking `-1.008px`; H2 desktop Gilroy Bold `700`, `32/40px`, tracking `-0.496px`. El título principal usa Display Big: la existencia de un H1 regular `400` no cambia ese rol.

Display Normal pasa de Medium `500` a Bold real `700` como **convención de implementación** para aproximar el énfasis mayor de la nueva imagen. La lámina no permite certificar el peso numérico: esa confirmación sigue pendiente y el JSON lo identifica expresamente. No se inventan tamaños para Body 3, Caption 1–4 ni Overline Small. La escala responsive y los tamaños anteriores conservan su propia procedencia; las anchuras de media queries del sitio son convención local.

## Implementación portable

- `/tokens.json` contiene valores, fuentes, estado de evidencia y pendientes.
- `/tokens.css` contiene colores, aliases, medidas reutilizables y clases `.copa-type-*`; no descarga fuentes ni incluye binarios.
- Una interfaz standalone puede cargar `tokens.css` antes de su hoja de componentes y declarar los WOFF oficiales utilizados. Los exports embebidos trasladan únicamente los tokens usados a su raíz namespaced; no importan un `:root` global en AirTRFX.
- En PowerPoint o Slides, aplica los mismos roles y colores al theme/master, verifica las fuentes instaladas y valida el render/export a PDF. El tamaño se adapta al lienzo.
- Los overrides invertidos usan superficies sólidas oscuras, color claro y enlaces identificables. El énfasis Suisse usa el archivo SemiBold real; no fabriques un peso ausente.
- El demo de `/brand-guidelines/` muestra colores y tipografía con labels visibles y sin convertir muestras visuales en headings adicionales.

## Pendientes de la fuente

1. Aclarar el rótulo de la tercera muestra de gradiente y su geometría.
2. Confirmar la duplicación de Grey 75 y Grey 100; se conserva el HEX escrito, no el color muestreado de la imagen.
3. Recibir valores computados o archivo editable para Body 3, Caption 1–4, Overline Small, Display Normal y breakpoints oficiales.