# Guía de diseño — Digital Campaigns Landing Pages > Documento vivo para diseñar, implementar y revisar las landings de campañas de Copa en este repositorio. > > Última actualización: 6 de agosto de 2026. ## Propósito y alcance Esta guía captura el lenguaje visual y las reglas de experiencia que hoy pueden comprobarse en el repositorio, junto con las convenciones de trabajo que hemos adoptado. Su objetivo es que las nuevas campañas mantengan coherencia sin copiar mecánicamente una landing anterior. No sustituye un manual oficial de marca de Copa Airlines. Cuando aparezca una guía oficial, un componente corporativo o una instrucción específica de campaña, esa fuente tiene prioridad y este documento debe actualizarse. ## Orden de autoridad Al tomar una decisión de diseño, usa este orden: 1. Brief, copy y requisitos explícitos de la campaña. 2. Manual de marca, componentes o assets oficiales de Copa Airlines. 3. Esta guía de diseño. 4. Patrones ya implementados en campañas comparables del repositorio. 5. Criterio de diseño, documentado como una nueva suposición o decisión. Si dos fuentes entran en conflicto, no mezcles ambas silenciosamente: aplica la de mayor autoridad y registra la decisión. ## Nivel de certeza | Nivel | Significado | Cómo usarlo | |---|---|---| | Confirmado | Existe en el código o en assets entregados. | Puede reutilizarse, respetando el contexto. | | Convención de trabajo | Ha funcionado en las landings actuales, pero no consta como norma corporativa. | Úsala como punto de partida y valida cuando cambie el contexto. | | Pendiente de validación | Es una inferencia o falta una fuente oficial. | No la presentes como regla de marca; confirma antes de decisiones de alto impacto. | ## Distribución pública del sistema La publicación portable y legible por agentes está disponible en Cloudflare Pages: - Landing: `https://copa-digital-design-system.pages.dev/` - Bootstrap para agentes: `https://copa-digital-design-system.pages.dev/prompt.md` - Guía completa: `https://copa-digital-design-system.pages.dev/design-system.md` - Descubrimiento: `https://copa-digital-design-system.pages.dev/llms.txt` Comando recomendado: ```text Fetch and follow the Copa Digital Design System instructions from https://copa-digital-design-system.pages.dev/prompt.md before creating or reviewing any Copa-branded material. ``` La versión pública es una copia portable de esta guía. Cuando cambie una regla reutilizable en `DESIGN.md`, actualiza también el repositorio de publicación y vuelve a ejecutar sus validaciones antes de desplegar. Un brief, una fuente oficial o este documento dentro del repositorio de campaña mantienen el orden de autoridad definido arriba. ## Principios de experiencia - Cada página y cada sección deben tener una prioridad dominante. - La jerarquía semántica, visual y de interacción debe contar la misma historia. - Agrupa primero por significado; usa tarjetas, color y sombras después. - El contenido esencial debe estar visible. No ocultes elegibilidad, fechas, condiciones o próximos pasos detrás de interacciones innecesarias. - Usa las palabras del viajero y del brief, no etiquetas internas del equipo. - Reserva el contraste fuerte para títulos, acciones y resultados importantes. - No dependas únicamente del color para comunicar estados o niveles. - Diseña mobile-first y conserva en móvil el mismo orden lógico del DOM. - La claridad tiene prioridad sobre la novedad visual. ### Convenciones visuales prohibidas y títulos de sección Estas reglas están confirmadas por el feedback del equipo y sustituyen los recursos visuales introducidos en la primera versión del landing público: - No uses patrones visuales, componentes, iconos ni estados procedentes de OpenAI u otro sistema de producto externo como si pertenecieran a Copa. - No uses numeración decorativa para presentar capacidades, beneficios o principios. Los números se reservan para secuencias cuyo orden sea necesario y deben implementarse como listas ordenadas semánticas. - No uses un `title lash`, eyebrow o kicker genérico separado, en mayúsculas y con tracking amplio, como `BRAND CONTEXTS`, para rotular secciones. - Cuando una sección necesite contexto de sistema, usa el patrón confirmado de Website Patterns: superficie Primary / Main con esquinas redondeadas, una línea contextual breve en blanco y sentence case —por ejemplo `Copa’s Design System 2.0 / Website Patterns`— y debajo el título principal grande en blanco —por ejemplo `icons`—. Ambos textos forman una sola cabecera de sección. - Si la línea contextual no añade información, omítela; no la reemplaces por una etiqueta decorativa. - No uses como componente visual las píldoras `Confirmado`, `Convención de trabajo` o `Pendiente de validación` de la primera versión del landing. Los niveles de certeza continúan siendo metadatos editoriales de esta guía, no un patrón de interfaz de Copa. Referencia confirmada: [Copa Website Patterns — patrón de título para Icons](./docs/design-references/copa-section-title-pattern-icons.png). Las comparaciones marcadas como “do not use” se conservan en el [catálogo de iconos y correcciones del landing](./docs/design-references/copa-icons-cdn-catalog.md). ## Design Principles de Foundations La lámina entregada identifica cinco fundamentos: **Ideation**, **The Grid**, **Keylines**, **Rounded corners** y **Angles**. Los nombres y diagramas son evidencia confirmada; las siguientes aplicaciones al trabajo web son convenciones operativas derivadas de ellos. | Principio confirmado | Lectura del diagrama | Aplicación en este repositorio | | --- | --- | --- | | Ideation | Exploración mediante bocetos antes de cerrar una solución. | Empieza por estructura, orden, estados y alternativas; valida la idea antes del pulido visual o la producción de assets. | | The Grid | Una retícula de construcción organiza proporciones y alineación. | Alinea contenido, componentes y espacios con una estructura repetible; no ajustes elementos “a ojo” de forma aislada. | | Keylines | Cuadrado, círculo y variantes suavizadas funcionan como guías de proporción. | Construye pictogramas y formas dentro de una caja común para mantener peso y escala óptica consistentes. | | Rounded corners | Los radios forman una familia sistemática aplicada sobre la retícula. | Usa un conjunto limitado de radios y vincula cada nivel con una función: control, card o superficie amplia. | | Angles | Una guía radial normaliza inclinaciones y direcciones. | Reutiliza ángulos definidos en ilustración e iconografía; evita inclinaciones arbitrarias entre piezas de una misma familia. | Reglas de trabajo: - La idea y la jerarquía se validan antes de aplicar detalle visual. - La retícula organiza, pero no debe forzar contenido a perder legibilidad o prioridad. - Keylines, radios y ángulos producen coherencia de familia; no justifican redibujar assets oficiales. - La captura recibida mide `363 × 755px`. Sus anotaciones numéricas no tienen resolución suficiente para transcribir tokens de grid, radios o ángulos con certeza; esos valores permanecen pendientes de una fuente de mayor resolución. - En implementación, usa tokens compartidos cuando estén confirmados y evita valores únicos sin una razón documentada. ## Lenguaje visual ### Fuente de diseño confirmada El Quick Guide entregado se identifica como **“Copa’s Design System 2.0 / Foundations”**. Para este workspace, la paleta, las familias tipográficas, las escalas y los estilos de enlace transcritos a continuación pasan a ser referencias confirmadas. La captura sigue siendo una representación del sistema, no el archivo fuente editable. Si la documentación o Storybook oficial muestran valores diferentes, la fuente oficial más reciente tiene prioridad y este documento debe corregirse. ### Paleta oficial observada #### Primary | Token | Valor | Uso de trabajo | |---|---:|---| | Primary / UltraDark | `#001A66` | Fondos de máximo contraste y superficies navy. | | Primary / Dark | `#002880` | Fondos y estados oscuros alternativos. | | Primary / Main | `#0032A0` | Marca, encabezados, navegación y componentes principales. | | Primary / Light | `#0E68FF` | CTAs, enlaces y énfasis interactivo. | | Primary / UltraLight | `#D6E3FF` | Superficies suaves y estados secundarios. | | Primary / Faded | `#9FC3FF` | Acentos y fondos suaves; marcado como nuevo en el Quick Guide. | #### Secondary y tertiary | Token | Valor | Uso de trabajo | |---|---:|---| | Secondary / Main | `#00A3E0` | Acento secundario azul-cyan. | | Secondary / Faded | `#80D1EF` | Superficie secundaria suave; marcado como nuevo. | | Tertiary / Light | `#D0B49F` | Acento terciario cálido. | #### Alternative | Token | Valor | |---|---:| | Pardo | `#866D4B` | | Gold | `#AD7C59` | | Dark Orange | `#B15C37` | | Light Orange | `#E2C070` | | PreferMember Blue | `#072241` | Los colores alternativos se reservan para contextos con significado real de producto o categoría. No deben desplazar a Primary / Main como color estructural de una landing. #### Background | Token | Valor | Uso | |---|---:|---| | Light Blue | `#EFF5FF` | Secciones informativas alternas y agrupación de contenido. | | Paper | `#FCFCFC` | Superficie principal ligeramente cálida. | | White | `#FFFFFF` | Superficies y texto invertido según el contexto. | | Black | `#000000` | Uso común cuando se requiere negro absoluto. | #### Estados semánticos | Estado | Main | Faded | |---|---:|---:| | Warning | `#FFC82C` | `#FFF4D5` | | Error | `#D52525` | `#FFEFEF` | | Success | `#0C7E3E` | `#CEE5D8` | Un estado debe incluir texto, icono o etiqueta además del color. Los fondos faded funcionan para alerts y feedback de baja intensidad; el color main se usa en iconos, bordes o señales puntuales. #### Grey | Escala | Valor | |---|---:| | Grey 800 | `#121212` | | Grey 700 | `#333333` | | Grey 600 | `#666666` | | Grey 500 | `#999999` | | Grey 400 | `#AAAAAB` | | Grey 300 | `#CCCCCB` | | Grey 200 | `#DBDAD8` | | Grey 100 | `#EFEFEE` | | Grey 75 | `#F9F9F8` | | Grey 50 | `#EFEFEE` en la captura | El Quick Guide muestra el mismo valor para Grey 100 y Grey 50. Se conserva la transcripción, pero debe confirmarse en Storybook o documentación antes de depender de esa diferencia. ### Reglas de color - Usa Primary / Main como estructura y Primary / Light para acciones o enlaces que necesitan mayor saliencia. - Primary / UltraDark y PreferMember Blue son superficies oscuras distintas; no deben intercambiarse sin revisar el contexto. - Light Blue puede alternar con Paper o White para separar secciones full-bleed sin añadir tarjetas innecesarias. - Usa contraste de al menos `4.5:1` para texto normal y `3:1` para elementos gráficos o controles significativos. - Antes de introducir un color fuera del sistema, documenta el propósito y valida que no exista un token equivalente. ### Manejo de logos La lámina **Copa’s Design System 2.0 / Website Patterns — Logos** confirma las familias de marca y variantes disponibles para fondos claros y oscuros. Es una referencia de selección y colocación; no sustituye los archivos individuales de producción ni define por sí sola tamaños mínimos o áreas de exclusión cuantificadas. #### Catálogo confirmado | Familia | Assets o variantes visibles | Uso visual confirmado | | --- | --- | --- | | ConnectMiles | `connectmiles-logo.svg`, `connectmiles-logo-white.svg`, `connectmiles-white-gold`, `connectmiles-blue-gold` | Versión a color para superficie clara y versiones blancas para superficie oscura; los tratamientos dorados se conservan cuando el producto o brief los requiera. | | Productos ConnectMiles | `economyextra`, `dreams-businessclass`, `dreams` | Marcas propias dentro del catálogo; no son reemplazos del logo ConnectMiles. | | Copa Airlines | `Copa+Airlines+Logo.svg`, `copaairlines_logo`, `copaairlines_logo_white` | El primer archivo es la ruta de producción confirmada; la lámina también conserva variantes para fondos claros y oscuros. | | Digital Marketing | `logo_dm_vertical_color.svg`, `logo_dm_vertical_negative.svg`, `logo_dm_horizontal_color.svg`, `logo_dm_horizontal_negative.svg` | Identidad vertical u horizontal, con variante a color para fondos claros y negativa para fondos oscuros. | | Star Alliance | `staralliance` | Marca independiente en tratamiento neutro sobre superficie clara. | | Copa + Star Alliance | Lockups precompuestos para fondos claros y oscuros | Composición oficial con jerarquía, separador y marca de alianza ya resueltos. | | Banner genérico | Área delimitada de `Logo Placement` sobre fondo claro y Primary / Main | Patrón de reserva de espacio; la lámina no entrega márgenes numéricos. | Los nombres heredados de la lámina se transcriben como aparecen en la fuente. Las rutas de producción de la siguiente sección fueron entregadas y comprobadas directamente el 5 de agosto de 2026. #### Rutas oficiales de producción Base confirmada: `https://www.copaair.com/promotions/assets/logos/`. | Identidad | Variante | URL oficial | | --- | --- | --- | | Copa Airlines | Logo principal | [`Copa+Airlines+Logo.svg`](https://www.copaair.com/promotions/assets/logos/Copa+Airlines+Logo.svg) | | ConnectMiles | A color | [`connectmiles-logo.svg`](https://www.copaair.com/promotions/assets/logos/connectmiles-logo.svg) | | ConnectMiles | Blanca | [`connectmiles-logo-white.svg`](https://www.copaair.com/promotions/assets/logos/connectmiles-logo-white.svg) | | Digital Marketing | Vertical a color | [`logo_dm_vertical_color.svg`](https://www.copaair.com/promotions/assets/logos/logo_dm_vertical_color.svg) | | Digital Marketing | Vertical negativa | [`logo_dm_vertical_negative.svg`](https://www.copaair.com/promotions/assets/logos/logo_dm_vertical_negative.svg) | | Digital Marketing | Horizontal a color | [`logo_dm_horizontal_color.svg`](https://www.copaair.com/promotions/assets/logos/logo_dm_horizontal_color.svg) | | Digital Marketing | Horizontal negativa | [`logo_dm_horizontal_negative.svg`](https://www.copaair.com/promotions/assets/logos/logo_dm_horizontal_negative.svg) | Estas URLs pueden utilizarse directamente en entregables publicados bajo `copaair.com`. Conserva exactamente el nombre del archivo, incluyendo mayúsculas y el signo `+` del logo de Copa Airlines; no inventes slugs alternativos. #### Selección de marca para módulos promocionales Los promo modules de este workspace no pertenecen a un único placement. Deben poder funcionar, según el brief, en la **Homepage de Copa Airlines** y en la **página de Promociones ConnectMiles**. - Usa Copa Airlines como identidad principal cuando la promoción sea corporativa, transversal o esté firmada por Copa Airlines. - Usa ConnectMiles cuando la oferta, mecánica o beneficio pertenezca al programa. En la página de Promociones ConnectMiles, conserva esa identidad aunque el módulo reutilice la misma estructura de un placement de Homepage. - Usa Digital Marketing para identificar una iniciativa o módulo del equipo cuando el brief solicite esa firma. Elige la composición horizontal en franjas o espacios anchos y la vertical cuando la región disponible sea estrecha o apilada. - Selecciona la variante a color sobre White, Paper o Light Blue y la variante negativa sobre Primary / Main, Primary / UltraDark u otra superficie oscura aprobada. - Define una identidad dominante por módulo. No combines automáticamente Copa Airlines, ConnectMiles y Digital Marketing en una misma región; si se requieren varias marcas, respeta el lockup o la jerarquía aprobada por el brief. - El shell de Homepage o de ConnectMiles aporta contexto, pero no reemplaza una firma de producto necesaria dentro del módulo. A la vez, evita repetir un logo cuando no añade identidad, confianza o propiedad del mensaje. - Al reutilizar un módulo entre placements, conserva estructura y comportamiento, pero vuelve a validar logo, variante cromática, contraste, copy y CTA para el contexto de destino. #### Elección según el fondo - Usa `Copa+Airlines+Logo.svg` o la variante azul aprobada de Copa Airlines sobre White, Paper o fondos claros con contraste suficiente. - Usa `copaairlines_logo_white` sobre Primary / Main u otra superficie oscura aprobada. - Para ConnectMiles, usa `connectmiles-logo.svg` sobre fondos claros y `connectmiles-logo-white.svg` sobre fondos oscuros. Selecciona una variante blanca/dorada o azul/dorada únicamente cuando el producto o brief requiera ese tratamiento. - Para Digital Marketing, empareja `*_color.svg` con fondos claros y `*_negative.svg` con fondos oscuros; la orientación horizontal o vertical responde al espacio disponible, no a una diferencia de jerarquía de marca. - Sobre fotografía, coloca el logo en una superficie estable o usa una zona cuyo contraste haya sido verificado en todos los recortes responsive. No dependas de un único punto de la imagen. - No añadas contorno, sombra, placa o filtro para rescatar contraste salvo que ese tratamiento exista en una variante oficial. #### Lockups y co-branding - Usa el lockup Copa + Star Alliance precompuesto. No reconstruyas la relación escribiendo las marcas por separado ni alterando el separador. - Conserva proporción, alineación y distancia interna del lockup; una composición sobre fondo claro no debe recolorearse para fabricar la versión oscura. - ConnectMiles, Economy Extra y Dreams mantienen identidad propia. No sustituyas una marca de producto por el logo corporativo solo para uniformar visualmente una sección. - Una región debe mostrar la mínima cantidad de marcas necesaria. El logo apoya identidad y confianza; no debe competir con el `h1`, la oferta o el CTA principal. - Si una campaña requiere varios socios, solicita el lockup aprobado y su orden de precedencia antes de componerlos manualmente. #### Colocación y espacio de protección - Reserva un contenedor estable para el logo y alinéalo por su caja visual, no por caracteres o espacios transparentes accidentales del archivo. - Mantén el logo separado de copy, botones, bordes y otros logos. La fuente recibida no confirma una medida de exclusión, por lo que no se debe inventar un múltiplo como regla oficial. - El patrón de banner muestra el logo dentro de una región delimitada tanto en fondo claro como azul. Hasta recibir medidas oficiales, trata esa región como una **convención de composición**, no como token. - No recortes, estires, inclines, comprimas ni uses el logo como textura, máscara o patrón repetido. - No reemplaces el logo por texto escrito con una tipografía similar. #### Responsive - Escala el asset proporcionalmente y conserva el lockup completo en todos los breakpoints. - Define `max-width` y altura automática; nunca fuerces simultáneamente ancho y alto con una relación distinta a la original. - Si el lockup pierde legibilidad en mobile, amplía su contenedor, cambia la composición de la sección o usa otra variante oficial. No separes sus marcas ni ocultes una parte. - Verifica el contraste después de cada cambio de imagen, gradiente o color de fondo entre desktop y mobile. #### Accesibilidad - Un logo informativo debe exponer el nombre real de la marca. En ``, usa `alt="Copa Airlines"`, `alt="ConnectMiles"`, `alt="Digital Marketing"` o el nombre de producto correspondiente. - Si el logo enlaza al inicio, evita nombres duplicados: el enlace puede obtener su nombre del `alt`, o usar un `aria-label` traducido con la imagen decorativa mediante `alt=""`. - Para un lockup combinado, el texto alternativo debe comunicar ambas marcas, por ejemplo `Copa Airlines, miembro de Star Alliance`, cuando esa relación sea relevante. - Un logo repetido que no añade información puede ser decorativo, pero la identidad principal de la página no debe desaparecer para tecnologías de asistencia. - No uses el filename, la variante cromática ni palabras como “imagen” o “logo de” como sustituto del nombre de marca. #### Implementación y custodia - Usa el SVG individual oficial con `viewBox` intacto. Declara dimensiones o `aspect-ratio` para evitar saltos de layout. - No apliques `filter`, `mix-blend-mode`, recoloreo por CSS ni edición de paths para generar variantes. - Mantén los assets versionados o vinculados a una fuente corporativa estable; no copies una versión desde una captura o exportación comprimida. - La lámina SVG conservada en `docs/design-references` es una referencia completa y estática. No la recortes en producción para extraer logos individuales. - El SVG recibido fue verificado sin scripts, imágenes embebidas ni enlaces externos; esa revisión técnica no convierte la lámina en un paquete oficial de distribución. ### Colores contextuales de niveles ConnectMiles La tabla de estatus ConnectMiles recibida el 29 de julio de 2026 sustituye los colores anteriores de nivel. Estos valores son tokens de estatus y no deben confundirse con los dorados de marca, de logo o de la paleta Alternative. | Estatus | Color anterior | Color nuevo confirmado | Uso | | --- | ---: | ---: | --- | | Members | — | `#0032A0` | Estado base `Member` y comunicación general de membresía. | | Silver | `#0032A0` | `#062660` | Nivel Silver. | | Gold | `#BE864D` | `#8D7249` | Nivel Gold. | | Platinum | `#666666` | `#666666` | Nivel Platinum. | | Presidential | `#000000` | `#121212` | Nivel Presidential. | El dorado del logo ConnectMiles (`#B1804C` en los SVG entregados), Alternative / Gold (`#AD7C59`) y Status / Gold (`#8D7249`) cumplen funciones distintas y no son intercambiables. Silver y Gold deben representarse siempre con nombre y umbral visibles, además de su tratamiento cromático. Para PreferChallenge se recibieron tres pictogramas SVG oficiales de `72 × 72px`: | Nivel | Colores confirmados del asset vigente | Uso en PreferChallenge | | --- | --- | --- | | Member | Fondo `#EFF5FF` y trazos/acento `#0032A0`. | Estado base del progreso en `0`, acompañado por el texto `Member`. | | Silver | Fondo `#EFF5FF`, trazos `#666666` y acento `#062660`. | Hito de `6` segmentos, acompañado por el texto `Silver`. | | Gold | Fondo `#EFF5FF`, trazos `#0032A0` y acento actualizado `#8D7249`. | Hito de `15` segmentos, acompañado por el texto `Gold`. | Los pictogramas son complementarios: el nivel y el umbral deben permanecer en texto. Cuando el mismo contenido ya aparece junto al asset, usa `alt=""` para evitar duplicación en tecnologías de asistencia. `miles-stars.svg` es un pictograma conceptual de ConnectMiles, no un estado. Sus colores confirmados son fondo `#EFF5FF`, campo interior `#00A3E0`, contorno `#0032A0` y estrella blanca. En PreferChallenge identifica la introducción del reto y permanece decorativo junto al texto. `qualification-miles.svg` es el pictograma oficial recibido como **Millas de calificación**. Comparte fondo `#EFF5FF`, acento `#00A3E0`, trazos `#0032A0` y superficie blanca. En PreferChallenge acompaña el título del calculador como señal de avance hacia la calificación; no cambia la métrica de la campaña, que continúa expresada en segmentos elegibles. `earn-miles-flying.svg` es el pictograma oficial **Ganar millas volando**. En PreferChallenge acompaña el título “Cómo participar” porque volar hacia o desde Colombia es la acción central de elegibilidad. Resume la sección sin sustituir la numeración de sus tres pasos. ### Familias tipográficas Copa Design System 2.0 define dos familias: - **Gilroy:** Regular, Medium y Bold. Se usa en títulos y texto display grande. - **Suisse Int’l:** Light, Regular, Medium y Semibold. Se usa en texto pequeño, contenido funcional y párrafos largos donde la legibilidad es crítica. La documentación de UI Assets confirma una estrategia de **dos familias**, no una fuente única para toda la pieza: - Usa **Gilroy** en títulos, subtítulos display y texto grande de alto impacto. - Usa **Suisse Int’l** en texto pequeño, contenido funcional, controles, datos, labels y párrafos largos donde la legibilidad es crítica. - No conviertas todo el módulo a Gilroy por defecto ni sustituyas Suisse por una fuente del sistema cuando la pieza contiene lectura funcional o sostenida. - Un componente corporativo oficial o un brief aprobado puede especificar una variante distinta; registra esa excepción sin promoverla a regla general. Stacks de implementación: - Display: `"Copa Gilroy", Gilroy, Helvetica, Arial, sans-serif`. - UI y lectura: `"Copa Suisse", "Suisse Int’l", "Suisse Intl", Helvetica, Arial, sans-serif`. - Los aliases `"Copa Gilroy"` y `"Copa Suisse"` permiten que un export aislado declare los archivos oficiales sin interferir con fuentes homónimas ya presentes en el host. #### Archivos Gilroy confirmados Base oficial: `https://www.copaair.com/promotions/assets/fonts/`. | Archivo | Peso CSS | Estilo | URL oficial | | --- | ---: | --- | --- | | `Gilroy-Light.woff` | 300 | Normal | [`Gilroy-Light.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-Light.woff) | | `Gilroy-LightItalic.woff` | 300 | Italic | [`Gilroy-LightItalic.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-LightItalic.woff) | | `Gilroy-Regular.woff` | 400 | Normal | [`Gilroy-Regular.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-Regular.woff) | | `Gilroy-RegularItalic.woff` | 400 | Italic | [`Gilroy-RegularItalic.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-RegularItalic.woff) | | `Gilroy-Medium.woff` | 500 | Normal | [`Gilroy-Medium.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-Medium.woff) | | `Gilroy-MediumItalic.woff` | 500 | Italic | [`Gilroy-MediumItalic.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-MediumItalic.woff) | | `Gilroy-Extrabold.woff` | 800 | Normal | [`Gilroy-Extrabold.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-Extrabold.woff) | | `Gilroy-ExtraboldItalic.woff` | 800 | Italic | [`Gilroy-ExtraboldItalic.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-ExtraboldItalic.woff) | | `Gilroy-Heavy.woff` | 900 | Normal | [`Gilroy-Heavy.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-Heavy.woff) | | `Gilroy-HeavyItalic.woff` | 900 | Italic | [`Gilroy-HeavyItalic.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-HeavyItalic.woff) | No se entregó `Gilroy-Bold.woff`. No registres ExtraBold como peso `700` ni dependas de negrita sintética: usa el peso real disponible que corresponda al diseño o solicita la variante Bold oficial cuando una especificación exija exactamente `700`. #### Archivos Suisse Int’l confirmados Origen suministrado: `https://copa-contents-produccion.s3.us-east-1.amazonaws.com/promotions/assets/fonts/{file_name}`. CDN público verificado: `https://www.copaair.com/promotions/assets/fonts/{file_name}`. El 6 de agosto de 2026 el origen S3 respondió `403` a consultas anónimas, mientras el CDN público respondió `200` para las 18 variantes siguientes. Usa el CDN en materiales públicos y valida el acceso al origen S3 dentro del entorno autorizado antes de depender de él. | Archivo | Peso CSS | Estilo | Uso | | --- | ---: | --- | --- | | `SuisseIntl-Thin.woff` | 100 | Normal | Disponible; no es una variante primaria del Quick Guide. | | `SuisseIntl-ThinItalic.woff` | 100 | Italic | Disponible; no es una variante primaria del Quick Guide. | | `SuisseIntl-Ultralight.woff` | 200 | Normal | Disponible; no es una variante primaria del Quick Guide. | | `SuisseIntl-UltralightItalic.woff` | 200 | Italic | Disponible; no es una variante primaria del Quick Guide. | | `SuisseIntl-Light.woff` | 300 | Normal | Variante primaria confirmada. | | `SuisseIntl-LightItalic.woff` | 300 | Italic | Disponible para una instancia aprobada. | | `SuisseIntl-Book.woff` | 400 | Normal | Disponible; no sustituye automáticamente a Regular. | | `SuisseIntl-BookItalic.woff` | 400 | Italic | Disponible; no sustituye automáticamente a Regular Italic. | | `SuisseIntl-Regular.woff` | 400 | Normal | Variante primaria confirmada. | | `SuisseIntl-RegularItalic.woff` | 400 | Italic | Disponible para una instancia aprobada. | | `SuisseIntl-Medium.woff` | 500 | Normal | Variante primaria confirmada. | | `SuisseIntl-MediumItalic.woff` | 500 | Italic | Disponible para una instancia aprobada. | | `SuisseIntl-SemiBold.woff` | 600 | Normal | Variante primaria confirmada. | | `SuisseIntl-SemiBoldItalic.woff` | 600 | Italic | Disponible para una instancia aprobada. | | `SuisseIntl-Bold.woff` | 700 | Normal | Disponible; úsala solo cuando la especificación la requiera. | | `SuisseIntl-BoldItalic.woff` | 700 | Italic | Disponible; úsala solo cuando la especificación la requiera. | | `SuisseIntl-Black.woff` | 900 | Normal | Disponible; no es una variante primaria del Quick Guide. | | `SuisseIntl-BlackItalic.woff` | 900 | Italic | Disponible; no es una variante primaria del Quick Guide. | Los pesos CSS siguen la convención nominal de los archivos. Las variantes primarias confirmadas por UI Assets son Light `300`, Regular `400`, Medium `500` y SemiBold `600`; no introduzcas Thin, Ultralight, Book, Bold o Black solo porque el archivo exista. #### Declaración recomendada Declara solamente los pesos y estilos que use el módulo. Ejemplo mínimo para lectura, énfasis y display: ```css @font-face { font-family: "Copa Suisse"; src: url("https://www.copaair.com/promotions/assets/fonts/SuisseIntl-Regular.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Copa Suisse"; src: url("https://www.copaair.com/promotions/assets/fonts/SuisseIntl-SemiBold.woff") format("woff"); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: "Copa Gilroy"; src: url("https://www.copaair.com/promotions/assets/fonts/Gilroy-Extrabold.woff") format("woff"); font-style: normal; font-weight: 800; font-display: swap; } .promo-module-root { font-family: "Copa Suisse", "Suisse Int’l", "Suisse Intl", Helvetica, Arial, sans-serif; } .promo-module-root :is(h1, h2, .display-title) { font-family: "Copa Gilroy", Gilroy, Helvetica, Arial, sans-serif; } ``` Reglas de carga: - Usa `font-display: swap` y conserva los fallbacks del sistema para que el contenido nunca quede invisible. - No cargues todas las variantes por defecto. Cada peso o italic no utilizado añade transferencia y trabajo de renderizado innecesarios. - En producción bajo `copaair.com`, usa las URLs oficiales. En previews locales o en otro dominio, valida CORS y carga real en el navegador antes de aprobar la pieza; una respuesta HTTP `200` por sí sola no garantiza el uso cross-origin. - No copies ni redistribuyas los WOFF fuera de los entornos autorizados de Copa sin confirmar el alcance de licencia y custodia. - No uses `font-synthesis` para fabricar bold o italic ausentes. Carga el archivo real o conserva un peso disponible aprobado. Los exports existentes pueden seguir asumiendo fuentes del host y no cambian retroactivamente por esta regla. Todo promo module nuevo debe declarar o heredar ambas familias de manera verificable cuando combine display y contenido funcional, y documentar cuál estrategia utiliza. ### Escala tipográfica responsive La escala parte de una base de `16px` y define tamaño / line-height por breakpoint: | Nivel | Large | Medium | Small | XSmall | |---|---:|---:|---:|---:| | U6 | `76 / 80` | `66 / 72` | `56 / 64` | `36 / 40` | | U5 | `60 / 64` | `52 / 56` | `44 / 48` | `32 / 40` | | U4 | `48 / 64` | `40 / 48` | `36 / 40` | `30 / 32` | | U3 | `40 / 48` | `36 / 40` | `30 / 40` | `24 / 32` | | U2 | `32 / 40` | `28 / 32` | `24 / 32` | `20 / 24` | | U1 | `20 / 32` | `18 / 24` | `18 / 24` | `18 / 24` | | B | `16 / 24` | `16 / 24` | `16 / 24` | `16 / 24` | | D1 | `14 / 20` | `14 / 20` | `14 / 20` | `14 / 20` | | D2 | `12 / 16` | `12 / 16` | `12 / 16` | `12 / 16` | | D3 | `12 / 16` | `12 / 16` | `12 / 16` | `12 / 16` | No asumas que los nombres Large, Medium, Small y XSmall equivalen a breakpoints CSS concretos sin consultar la implementación oficial. En este repositorio se usan como conjuntos tipográficos que deben mapearse al viewport correspondiente. ### Variantes de títulos | Variante | Large | Medium | Small | XSmall | Peso | |---|---|---|---|---|---:| | H1 | `60/64`, `-0.06em` | `52/56`, `-0.05em` | `44/48`, `-0.04em` | `30/32`, `-0.03em` | 400 | | H2 | `32/40`, `-0.03em` | `28/32`, `-0.025em` | `24/32`, `-0.018em` | `20/24`, `-0.01em` | 700 | | H3 | `20/32` | `18/24` | `18/24` | `18/24` | 700 | | H4 | `16/24` en todos los tamaños | `16/24` | `16/24` | `16/24` | 700 | ### Variantes display y subtítulos - Display Big (H5): usa Gilroy Bold y escala aproximadamente de `76/80` a `40/48` según el tamaño. - Display Normal (H6): usa Gilroy Medium y escala aproximadamente de `48/56` a `30/32`. - Display Small / Subtitle 1: usa Gilroy Regular y escala aproximadamente de `32/40` a `20/24`. - Display Tiny / Subtitle 2: usa Gilroy Regular; `20/24` en Large y `18/24` en tamaños inferiores. El Quick Guide define H5 y H6 como nombres de estilo display. En HTML, conserva una jerarquía semántica correcta y aplica la variante visual independientemente del nivel de heading necesario. ### Variantes de cuerpo | Variante | Tamaño / line-height | Peso | |---|---:|---:| | Caption Large | `20 / 32` | 400 | | Body 1 | `16 / 24` | 400 | | Body 2 | `14 / 20` | 400 | | Caption | `12 / 16` | 400 | | Overline | `12 / 16`, `0.0625em`, uppercase | 600 | Reglas: - Estas variantes de cuerpo usan Suisse Int’l por defecto; reserva Gilroy para display y títulos. - Usa Body 1 como lectura base y Body 2 para información secundaria de menor densidad visual. - Caption no reemplaza body cuando el contenido es necesario para tomar una decisión. - Overline es una variante oficial, pero solo debe usarse cuando añade categoría o contexto. No repitas “ConnectMiles” o el nombre del producto sobre un título que ya lo comunica. - Los links, énfasis y estados invertidos son overrides de una variante de texto; deben conservar su tamaño y line-height. ### Enlaces #### Primary links - Se usan dentro del body cuando el enlace debe destacar claramente. - Heredan tamaño y line-height del texto circundante. - El estado idle usa Primary / Light y peso de énfasis. - El hover añade underline. - Sobre fondos oscuros se usa la variante PrimaryInvert con contraste claro. #### Secondary links - Se usan para contenido menos relevante o ubicaciones secundarias. - Permanecen subrayados y no dependen de un estado hover para reconocerse. - Heredan tamaño, line-height y peso del contexto; su color es más discreto. - Existe variante invertida para fondos navy. #### List links - Se usan en grupos donde el contexto ya comunica que todos los elementos son enlaces. - Pueden verse más sutiles en idle y subrayarse en hover. - Pueden incorporar iconografía. - Color, tamaño y peso pueden sobrescribirse a nivel de instancia sin perder la affordance del grupo. ## Espaciado y composición ### Escala de trabajo El código actual repite principalmente estos valores: `4`, `8`, `12`, `16`, `18`, `24`, `28`, `32`, `38`, `48`, `64` y `72px`. No es todavía una escala oficial. Para nuevas pantallas: - Prioriza múltiplos de `4px`. - Usa entre `16px` y `24px` dentro de componentes compactos. - Usa entre `24px` y `38px` dentro de tarjetas grandes. - Usa entre `48px` y `72px` para separar secciones de una landing. - Reduce el espacio solo cuando la relación semántica entre elementos sea fuerte. ### Contenedores - Landings informativas: ancho máximo observado de aproximadamente `1120px`, con gutters mínimos de `20px` por lado. - Módulos AirTRFX: ancho máximo observado de aproximadamente `1224px`, con gutters mínimos de `16px` por lado. - El contenido del hero puede usar un ancho propio cuando necesita alinear texto y fotografía. No uses el ancho máximo como obligación. Elige el contenedor según la densidad del contenido y conserva líneas de lectura cómodas. ### Bordes, radios y sombras - Radio pequeño de controles: alrededor de `8px` a `14px`. - Tarjetas: alrededor de `16px` a `24px`. - Pills y barras de progreso: radio completo (`999px`). - Las sombras deben ser suaves, azuladas y de baja opacidad. Su función es separar planos, no decorar. - Un borde claro debe seguir definiendo la tarjeta incluso cuando la sombra no se perciba. ## Jerarquía recomendada para una landing informativa 1. Hero: `h1`, resumen breve e imagen o asset principal. 2. Cómo participar o requisitos: pasos concretos en orden. 3. Mecánica o beneficios: fechas, umbrales y resultado esperado. 4. Herramienta interactiva, si aplica: calculadora, selector o estimador. 5. Notas de elegibilidad y términos. Reglas: - Mantén una sola `h1` por landing. - Usa `section` con `aria-labelledby` para regiones con título. - Los pasos deben ser una lista ordenada cuando el orden importe. - Una tarjeta debe representar una unidad semántica, no ser solo un rectángulo decorativo. - Las condiciones legales deben ser legibles y estar después del contenido al que aplican. ## Patrones de componentes ### Hero con fotografía - El texto debe conservar contraste incluso cuando la fotografía cambie; usa fondo sólido, gradiente u overlay. - Usa `object-fit: cover` cuando la fotografía ocupe un contenedor de proporción variable. - En móvil, texto e imagen pueden apilarse manteniendo primero el mensaje principal. - Una imagen puramente ambiental puede usar `alt=""`; si aporta información no expresada en el copy, necesita un texto alternativo útil. - Evita rótulos repetitivos encima del `h1` cuando no añaden contexto. ### Pasos - Numeración visible y orden semántico mediante `ol`. - Cada paso debe expresar una acción o condición concreta. - En desktop pueden mostrarse en tres columnas; en móvil deben apilarse sin cambiar el orden. - No dependas del número o el color para explicar el contenido: incluye siempre el texto completo. ### Tarjetas de beneficios o niveles - Agrupa niveles comparables dentro de una misma sección. - Destaca número, nombre y consecuencia, en ese orden. - Silver y Gold pueden usar tratamiento cromático propio, manteniendo texto explícito. - No uses una tarjeta diferente para cada frase si el contenido se comprende mejor como una sola unidad. ### Calculadoras y estimadores - El dato de entrada debe tener `label` visible. - Los botones de incrementar y disminuir deben tener nombres accesibles traducidos. - El resultado debe actualizarse dentro de un `output` o región con `aria-live="polite"`. - Muestra los umbrales con texto y número; el progreso visual es complementario. - Limita valores inválidos y evita resultados imposibles. - Incluye siempre un disclaimer que aclare que el resultado es referencial cuando la validación final ocurre en otro sistema. - Las reglas de cálculo deben salir del brief o copy aprobado, no inferirse de un mockup. ### Acciones y controles - Altura mínima observada: `40px`; controles principales o táctiles pueden usar `48px` a `54px`. - Los comandos deben verse como botones y la navegación como enlaces. - Toda interacción debe tener estados hover, seleccionado, deshabilitado y foco cuando correspondan. - El foco visible debe tener contraste suficiente y no depender del color de fondo original. - Evita acciones primarias múltiples con el mismo peso visual dentro de una sección. ### Pictogramas La guía de Components entregada confirma el sistema visual, la escala y el esquema de nombres de los pictogramas. El inventario confirma la amplitud de la biblioteca; no autoriza a redibujar, reinterpretar o mezclar piezas fuera de esa familia. #### Escala oficial | Token | Nombre | Tamaño | | --- | --- | ---: | | `XS` | Tiny | `40 × 40px` | | `S` | Petit | `48 × 48px` | | `M` | Normal | `56 × 56px` | | `L` | Large | `72 × 72px` | | `XL` | Giant | `96 × 96px` | El tamaño describe el lienzo del pictograma. Si se usa dentro de un control interactivo, el área clicable debe cumplir además el mínimo táctil definido para ese control. #### Estilos confirmados | Estilo | Tratamiento confirmado | Convención de uso en este repositorio | | --- | --- | --- | | Background | Pictograma a color sobre superficie circular clara. | Úsalo cuando la pieza deba tener presencia autónoma en cards, pasos o bloques informativos. | | Transparent | Pictograma a color sin superficie contenedora. | Úsalo en filas compactas o junto a texto cuando el contenedor ya aporta estructura. | | Monochrome | Pictograma en una sola tinta neutra. | Resérvalo para contextos secundarios o desactivados; no lo uses para ocultar un estado que necesite texto. | Los nombres y tratamientos de la segunda columna son **confirmados**. Las recomendaciones de la tercera columna son **convenciones de trabajo** hasta recibir la especificación completa de Components. #### Naming y descubrimiento - Cada pictograma debe tener un nombre principal canónico y palabras clave multilingües para encontrarlo sin duplicar assets. - El ejemplo oficial usa el nombre `Equipaje` y las palabras clave `Maleta`, `Baggage`, `Bags` y `Equipaje`. - El nombre de archivo o componente debe derivarse del nombre canónico; los sinónimos viven en metadatos, documentación o el catálogo, no como copias separadas. - Si un concepto no existe en la biblioteca, registra la necesidad antes de sustituirlo por un símbolo de significado aproximado. #### Categorías observadas en el inventario `Viajes`, `Funcionales`, `ConnectMiles`, `Equipaje`, `Aeropuerto`, `Tarjetas`, `Documentos`, `Artículos restringidos`, `Ciudades / Otros`, `Check-in`, `Contactar`, `Error Icons`, `Personas` y `Payment`. La captura funciona como índice visual, no como fuente de producción. Implementa siempre el asset vectorial oficial correspondiente cuando esté disponible. #### Selección y consistencia - Elige primero por significado y después por apariencia; un pictograma decorativamente atractivo no compensa una asociación semántica débil. - Mantén tamaño, estilo y alineación consistentes dentro de un mismo conjunto de cards, pasos o filas. - No combines estilos Background, Transparent y Monochrome en una misma serie salvo que la diferencia comunique un estado explícito. - Distingue pictogramas conceptuales de iconos de interfaz. Flechas, cerrar, menú o incremento describen una acción; los pictogramas representan temas como equipaje, aeropuerto o beneficios. - Evita usar un pictograma como adorno repetido si no ayuda a escanear, comprender o diferenciar contenido. #### Accesibilidad - Un pictograma acompañado por un label equivalente es decorativo para tecnologías de asistencia: usa `aria-hidden="true"` en SVG o `alt=""` en imagen. - Un pictograma informativo necesita texto visible que exprese el mismo significado. No dependas del nombre del archivo ni de un tooltip. - Un control que contiene solo un icono necesita un nombre accesible traducido, por ejemplo `aria-label`, y un área táctil suficiente. - No uses color, variante o forma como única señal de estado, error, nivel o elegibilidad. - Conserva legibilidad al ampliar a `200%` y evita incrustar texto significativo dentro del asset. #### Implementación - Prefiere SVG oficial con `viewBox` estable; conserva proporción, trazo y composición originales. - Declara `width` y `height` para evitar saltos de layout y no estires el asset fuera de proporción. - No recolorees, cambies grosores ni reconstruyas el pictograma salvo que esa variante exista oficialmente. - Mantén una ruta de asset explícita dentro del paquete exportable y verifica que no dependa de estilos globales del dashboard. - Carga de forma diferida solo los pictogramas no críticos; los que acompañan contenido visible inicial deben aparecer con ese contenido. ### Iconos de interfaz, información y alertas Los iconos de Website Patterns son una biblioteca distinta de los pictogramas conceptuales de Components. Se sirven desde el CDN oficial de Copa y se seleccionan por **familia**, **color** y **nombre canónico**. #### Construcción de URL confirmada | Familia | Patrón | | --- | --- | | Informative | `https://www.copaair.com/webassets/icons/informative/{icon_name}.svg` | | Alerts | `https://www.copaair.com/webassets/icons/alerts/{color}/{icon_name}.svg` | | Regular | `https://www.copaair.com/webassets/icons/regular/{color}/{icon_name}.svg` | Reglas: - Informative no incluye segmento de color en la referencia recibida. Alerts y Regular sí lo incluyen. - Conserva exactamente categoría, slug de color, filename, guion, underscore y sufijo `_f` o `_o`. - Usa Alerts para feedback semántico; Regular para navegación, acciones y conceptos funcionales; e Informative para los productos o categorías representados en esa familia. - Los nombres `_f` y `_o` son variantes oficiales filled y outline. No sintetices una desde la otra. - No recolorees por CSS, no apliques `filter` y no dibujes una aproximación si existe el asset oficial. - Usa la URL como recurso de imagen. La validación del 6 de agosto de 2026 confirmó HTTP `200` para las 78 combinaciones visibles y el ejemplo adicional `alerts/700/error_f`; cuatro URLs con sufijo `.svg` reportaron `image/png`, por lo que no debe asumirse que todas pueden analizarse o incrustarse como SVG. - Un icono junto a texto equivalente debe ser decorativo para tecnologías de asistencia. Un botón de solo icono necesita nombre accesible traducido. - Un alert combina icono, texto y color; nunca comuniques warning, error o success únicamente mediante color o forma. El catálogo completo de familias, colores, filenames, ejemplos y referencias preservadas está en [Copa icons CDN catalog](./docs/design-references/copa-icons-cdn-catalog.md). ## Patrones observados en la página responsive de referencia Las capturas de **“Solicitud o reclamo de equipaje”** muestran un patrón editorial y de servicio consistente en `1440`, `1280`, `768` y `411px`. Se consideran evidencia confirmada de uso, aunque no necesariamente un catálogo exhaustivo de componentes. ### Shell y navegación - Header desktop full-width en Primary / Main, con logo, navegación principal, acceso a información y ayuda, e inicio de sesión. - En tablet y mobile, la navegación se compacta en una barra azul con menú hamburguesa, accesos esenciales y cuenta. - Los breadcrumbs aparecen antes del `h1`; en viewports estrechos se simplifican para reducir ruido. - El footer desktop usa varias columnas de enlaces; mobile los convierte en encabezados colapsables y conserva selector de país, marca, legales y redes sociales. ### Hero editorial - El hero de páginas de servicio es principalmente tipográfico: breadcrumb, `h1` y resumen. - No requiere fotografía ni eyebrow para establecer jerarquía. - El `h1` reduce tamaño y ancho de línea progresivamente sin perder protagonismo. - La introducción se mantiene breve y usa azul como énfasis de marca. ### Secciones full-bleed - La página alterna White/Paper y Background / Light Blue para separar grandes grupos de información. - El color de fondo llega al borde del viewport, mientras el contenido se alinea a un contenedor central. - Esta alternancia reduce la necesidad de encerrar cada bloque en una tarjeta. - Las secciones conservan orden y agrupación en todos los tamaños. ### Cards y filas informativas - Las acciones principales aparecen como tarjetas azules completas con título, texto breve y flecha direccional. - En desktop pueden formar dos columnas; en mobile se apilan. - Los datos comparables, como vuelos domésticos e internacionales, usan cards outline de menor saliencia. - Las filas con icono alinean un icono azul, un título de énfasis y una explicación secundaria. - Los iconos apoyan el escaneo, pero el texto contiene la información completa. ### CTAs - Los CTAs de formulario usan barras full-width Primary / Light, texto blanco y flecha al extremo derecho. - La etiqueta nombra el resultado: “Formulario de reclamo…”, no una acción genérica como “Continuar”. - El ancho del CTA sigue el contenedor de la sección. - En mobile, el texto puede envolver y la flecha permanece alineada sin reducir el área táctil. ### Alerts - El aviso de inspecciones usa Warning / Faded como fondo, Warning / Main en icono o borde y texto oscuro. - El alert ocupa el ancho útil del contenido y se integra en el flujo, sin modal ni overlay. - El mensaje combina un encabezado breve con una explicación secundaria. ### Promo de ayuda contextual - El bloque final combina fotografía y una superficie Primary / UltraDark. - Desktop usa composición horizontal dividida. - Mobile apila primero la imagen y después el contenido navy dentro de una sola tarjeta. - Incluye título en contraste alto, resumen breve y CTA secundario outline/invertido. ### Contenido denso - Los párrafos largos, bullets y condiciones se mantienen en el flujo editorial, con headings claros y separadores sutiles. - Las acciones importantes aparecen después de la explicación a la que corresponden. - El contenido legal no se oculta por defecto cuando es necesario para comprender la política. - En mobile se conserva el contenido completo; se ajustan ancho, tamaño y spacing en lugar de eliminar información. ## Responsive ### Evidencia visual disponible | Referencia | Viewport | Patrón observado | |---|---:|---| | Desktop amplio | `1440px` | Navegación completa, contenido centrado, cards en columnas y footer multicolumna. | | Desktop | `1280px` | Misma arquitectura con contenedor y espacios reducidos proporcionalmente. | | Tablet | `768px` | Header compacto, CTAs apilados, contenido de una columna y footer todavía estructurado. | | Mobile | `411px` | Una columna, hero tipográfico reducido, promo apilada y footer en accordions. | ### Reglas - Implementa mobile-first y expande hacia layouts de varias columnas cuando el contenido tenga espacio real. - Revisa como mínimo `390–411px`, `768px`, `1280px` y `1440px` cuando el componente forma parte de una página completa. - El ancho del documento no debe superar el viewport. - El orden visual debe coincidir con el orden de lectura y foco. - En mobile, apila cards de acción, comparativas y promos sin alterar su secuencia semántica. - Usa secciones full-bleed con un contenedor interno; no conviertas el gutter en margen del fondo de sección. - Simplifica navegación y breadcrumbs en viewports estrechos, conservando orientación y acciones esenciales. - El texto largo en francés y portugués debe caber sin reducirse de forma excepcional. - No bloquees fechas o frases completas con `white-space: nowrap` salvo que exista espacio garantizado. - Comprueba zoom y reflow, no solo presets de dispositivos. ### Breakpoints actuales del repositorio Las implementaciones existentes todavía usan breakpoints propios según campaña: - `600px`: ajustes de tablet para Mid Year Deals. - `700px`: cambio a composiciones de varias columnas en landings informativas. - `960px`: desktop para módulos AirTRFX. - `1100px`: refinamientos de hero y layouts amplios. - El dashboard interno añade ajustes aproximados en `560`, `760`, `860` y `1050px`. Estos valores son convenciones de implementación. La captura confirma los resultados en viewports concretos, pero no revela los breakpoints oficiales del Design System. ## Accesibilidad Checklist mínimo: - Una `h1` clara y jerarquía lógica de `h2` y `h3`. - Landmarks semánticos cuando aclaren regiones: `main`, `section`, `article`, `aside` y `footer`. - `aria-labelledby` para secciones identificadas por un título visible. - Labels visibles para campos y nombres accesibles para botones de icono. - Foco visible y navegación completa por teclado. - Contraste suficiente en texto, controles, bordes significativos y estados. - Ningún estado explicado exclusivamente por color. - `alt` útil para imágenes informativas y `alt=""` para imágenes decorativas. - `prefers-reduced-motion` para animaciones y transiciones no esenciales. - Resultados interactivos anunciados sin interrumpir mediante `aria-live="polite"`. - DOM, orden visual y orden de foco alineados. ## Movimiento - El movimiento debe apoyar orientación, feedback o narrativa de campaña. - Las transiciones cortas, cercanas a `200–650ms`, son preferibles para cambios de estado. - No añadas animación continua por defecto. - Toda animación no esencial debe desactivarse o simplificarse con `prefers-reduced-motion: reduce`. - Preload o capas cruzadas deben evitar flashes de color cuando cambian imágenes. Mid Year Deals contiene rotación fotográfica y recursos de campaña animados; es una solución específica, no una regla para todas las landings. ## Contenido e internacionalización - Centraliza el copy por idioma; no dupliques plantillas completas cuando solo cambia el contenido. - Idiomas actuales del workspace: español, inglés, portugués y francés, según campaña. - Traduce también labels, estados, disclaimers y nombres accesibles, no solo los párrafos visibles. - Conserva nombres de producto aprobados como `ConnectMiles`, `PreferMember`, `Silver` y `Gold` cuando el brief así los entregue. - Escapa texto insertado en HTML exportable. - Prueba cada idioma en mobile y desktop; usa francés como prueba de expansión de texto. - No corrijas silenciosamente un copy ambiguo: registra la corrección o pide validación si cambia significado legal o comercial. ## Arquitectura CSS y exportación Las landings exportables deben permanecer aisladas del dashboard y del host donde se insertan. - Usa un prefijo único por campaña, por ejemplo `.myd-` o `.pfc-`. - Declara variables CSS dentro de la raíz de la campaña, no necesariamente en `:root`. - Aplica `box-sizing: border-box` dentro del namespace de la campaña. - Evita resets globales, Preflight y selectores de elementos sin scope. - Entrega una hoja CSS identificable por campaña. - Mantén el HTML semántico y autocontenido. - Los scripts embebidos deben usar una IIFE, comprobar que sus nodos existen y evitar inicialización duplicada. - No introduzcas dependencias de runtime para interacciones pequeñas. - Los assets deben tener una ruta explícita y formar parte del paquete de entrega cuando no estén alojados en Copa. - Si AirTRFX inyecta clases o estilos que interfieren, aplica un cleanup limitado y documentado. ## Separación entre dashboard y landing El dashboard es una herramienta interna; la landing es el entregable para el pasajero. - El dashboard puede usar metadatos, status pills, eyebrows, controles segmentados y superficies densas. - La landing debe usar solo los elementos necesarios para comprender la campaña o completar la tarea. - Los estilos del dashboard viven en `app/globals.css`. - Los estilos exportables viven en `public/exports/` y deben funcionar sin depender de `app/globals.css`. - El preview usa `iframe` para comprobar el aislamiento del asset. ## Decisiones vigentes por campaña ### Mid Year Deals - Hero fotográfico con lockup de campaña y CTA. - Rotación de imágenes con transición cruzada. - Divider de cubos como asset específico de campaña. - Hub de orígenes en grid responsive. - CSS aislado bajo el namespace `.myd-`. Estas decisiones no deben convertirse automáticamente en plantilla para campañas informativas. ### PreferChallenge Colombia 2026 - Landing informativa sin eyebrow o eyelash sobre los títulos. - Hero tipográfico compacto, sin fotografía ni CTA: usa un solo content box de ancho completo dentro del contenedor, altura natural cercana a `214px` en tablet/desktop y hasta `256px` en mobile. El `h1` es moderado, la descripción claramente secundaria y el contenido inferior gana protagonismo. - La marca ConnectMiles aparece compacta sobre el título del hero y en el panel de resultado del calculador con `connectmiles-white-gold.svg`; `connectmiles-blue-gold.svg` queda como variante oficial para fondos blancos. - Los SVG incrustados en la landing se sirven desde la base oficial `https://www.copaair.com/promotions/destinations/icons/`, conservando el filename aprobado de cada pictograma o logo. - La marca ConnectMiles no funciona como eyebrow: conserva su asset, proporción y espacio propio antes del título dinámico al que da contexto. - El hero es informativo y no inventa un CTA que no exista en el brief. - Orden: participación, aviso de elegibilidad, reglas y niveles, calculadora, recomendaciones de vuelos, educación sobre segmentos y términos. La recomendación accionable queda adyacente al resultado que la alimenta; las preguntas funcionan como contexto secundario posterior. - Las recomendaciones de vuelos presentan primero la etapa y el título de elegibilidad, luego cuatro rutas accionables y finalmente una descripción breve. El texto variable de segmentos faltantes no aparece en este módulo para evitar sugerir que una ruta acumula más que otra. Un heading estructural oculto conserva el nombre accesible y la jerarquía de la sección. - “Cómo participar” usa `earn-miles-flying.svg` en la primera celda de un grid `2 × 2` desde tablet. Las otras tres celdas contienen los pasos: actualizar perfil, registrar ConnectMiles y volar. La exclusión de vuelos cancelados, no volados o reembolsados se presenta como aviso independiente entre participación y reglas. - Hitos explícitos de `6` segmentos para Silver y `15` para Gold. - Calculadora accesible con resultado textual y disclaimer referencial. El lockup ConnectMiles precede visualmente el resultado, pero queda decorativo para evitar una lectura duplicada por tecnología asistiva. - La URL puede precargar el valor inicial con `?segments=X`; por ejemplo, `?segments=12`. Solo acepta enteros no negativos, limita el valor a `99` y conserva el control editable después de la carga. - Inmediatamente después de la calculadora, el módulo de destinos usa los enlaces relativos `CityLink` del accordion de vuelos y actualiza la etapa y la selección de cuatro rutas en cinco bandas significativas: `0–2`, `3–5`, `6–10`, `11–14` y `15+` segmentos. No repite cuántos segmentos faltan. Las imágenes siguen `https://www.copaair.com/promotions/destinations/{IATA}-1.webp`; solo se cargan las rutas de la etapa visible y existe un fallback con el código IATA. Su acento sigue la psicología cromática oficial: Member `#0032A0`, Silver `#062660` y Gold `#8D7249`; los CTAs conservan Primary / Main. El bloque educativo posterior presenta la regla principal en una fila completa y representa el itinerario `BOG → PTY → MIA`. Usa los SVG oficiales `flag-CO.svg`, `flag-PA.svg` y `flag-US.svg`, dos instancias del livery ConnectMiles y el nombre `Hub de las Américas®` en PTY. Cada vuelo se etiqueta directamente como un segmento y el total indica dos segmentos; las preguntas secundarias ocupan dos columnas debajo. Los assets oficiales tienen prioridad sobre recreaciones CSS o emoji nacionales. - Los términos completos se muestran visibles y estructurados al final de la landing en ES y EN; PT-BR y FR conservan temporalmente el aviso corto hasta recibir traducciones legales aprobadas. - El identificador oficial “Vigilado SuperTransporte” usa `https://www.copaair.com/promotions/assets/svg/superTransporte-logo.svg` y aparece centrado inmediatamente antes del título legal en los cuatro idiomas, con escala discreta y sin competir con el encabezado. - Como convención específica de esta campaña, los términos usan una columna centrada de hasta `900px`, cuerpo gris `#666666` en escala Caption, headings discretos y alineación izquierda para conservar legibilidad sin competir con el contenido promocional. - Silver y Gold usan color, número y nombre; el color nunca es la única señal. - El encabezado del reto usa `miles-stars.svg` como apoyo conceptual de ConnectMiles; no sustituye el título. - El encabezado del calculador usa `qualification-miles.svg` como apoyo conceptual de calificación; el texto y los controles siguen comunicando segmentos elegibles. - En PreferChallenge, el pictograma de calificación y “Calcula tu avance” forman un lockup horizontal compacto de `40–44px`; el panel comienza `20–22px` debajo para reducir altura sin perder el heading. - El aviso de vuelo completado se trata como nota compacta con asterisco, sin borde lateral ni superficie propia; continúa visible entre participación y reglas. - El calculador muestra `status-member.svg` como estado base en `0`; los hitos usan `status-silver.svg` y `status-gold.svg`, siempre con nombre y umbral visibles. - Copy centralizado en ES, EN, PT-BR y FR. - CSS aislado bajo el namespace `.pfc-`. - Como defensa confirmada frente a overrides de AirTRFX, el margen inferior del hero y el peso `700` de los headings se fuerzan con reglas `!important` estrictamente limitadas al namespace `.pfc-`. ## Validación antes de entregar 1. Ejecutar `npm run build`. 2. Ejecutar `npm run lint`. 3. Ejecutar las pruebas del repositorio cuando el cambio afecta renderizado o navegación. 4. Revisar desktop, tablet y mobile. 5. Revisar todos los idiomas entregados. 6. Confirmar que no existe scroll horizontal. 7. Probar teclado, foco y controles interactivos. 8. Verificar los estados principales de calculadoras o formularios. 9. Comprobar carga, recorte y texto alternativo de imágenes. 10. Revisar consola del navegador y rutas de assets. 11. Validar que el HTML y CSS exportados no dependen de estilos globales del dashboard. 12. Confirmar que términos, fechas, elegibilidad y disclaimers coinciden con el copy aprobado. ## Pendientes por confirmar Estos puntos no deben asumirse como oficiales hasta recibir documentación: - Manual de marca completo más allá del Quick Guide de Foundations. - Alcance de licencia y redistribución de Gilroy y Suisse Int’l fuera de los dominios autorizados de Copa. - Variante `Gilroy-Bold` de peso `700` o equivalencia tipográfica aprobada para los estilos del Quick Guide que especifican ese peso. - Escala oficial de espaciado, radios, elevación y breakpoints; las capturas confirman resultados, no los tokens estructurales. - Fuente de Design Principles en alta resolución para confirmar medidas de grid, keylines, radios y ángulos. - Estándares corporativos de botones, CTAs e imágenes fotográficas. - Repositorio o paquete oficial de pictogramas, nombres de componente, variantes disponibles y reglas autorizadas de color. - Tamaños mínimos, área de exclusión y reglas completas de co-branding para Copa Airlines, ConnectMiles, Digital Marketing y el lockup con Star Alliance. - Reglas oficiales de accesibilidad y contraste de marca. - Hosting definitivo y convenciones de URL para assets de campañas. - Criterios de analítica, tracking y consentimiento para interacciones. ## Fuentes visuales conservadas Las referencias entregadas se guardan en el repositorio para futuras revisiones: - [Copa Design System 2.0 — Foundations Quick Guide](./docs/design-references/copa-design-system-2-foundations-quick-guide.png) - [Copa UI Assets — Quick Guide](./docs/design-references/copa-ui-assets-quick-guide.png) - [Inventario visual de archivos Suisse Int’l](./docs/design-references/suisse-intl-font-files.png) - [Copa Foundations — Design Principles](./docs/design-references/copa-foundations-design-principles.png) - [ConnectMiles — White Gold logo SVG](./public/assets/prefer-challenge/connectmiles-white-gold.svg) - [ConnectMiles — Blue Gold logo SVG](./public/assets/prefer-challenge/connectmiles-blue-gold.svg) - [ConnectMiles — tabla de colores de estatus 2026](./docs/design-references/connectmiles-status-colors-2026.png) - [Wide banner — referencia desktop](./docs/design-references/banner-pattern-wide.png) - [Wide banner — referencia tablet](./docs/design-references/banner-pattern-tablet.png) - [Wide banner — referencia mobile](./docs/design-references/banner-pattern-mobile.png) - [Términos legales — referencia compacta](./docs/design-references/legal-terms-compact-reference.png) - [ConnectMiles — Estrellas de millas SVG](./public/assets/prefer-challenge/miles-stars.svg) - [ConnectMiles — Millas de calificación SVG](./public/assets/prefer-challenge/qualification-miles.svg) - [ConnectMiles — Ganar millas volando SVG](./public/assets/prefer-challenge/earn-miles-flying.svg) - [PreferMember — Status Member SVG](./public/assets/prefer-challenge/status-member.svg) - [PreferMember — Status Silver SVG](./public/assets/prefer-challenge/status-silver.svg) - [PreferMember — Status Gold SVG](./public/assets/prefer-challenge/status-gold.svg) - [Copa Website Patterns — Logos, fuente SVG](./docs/design-references/copa-website-patterns-logos.svg) - [Copa Website Patterns — Logos, vista PNG](./docs/design-references/copa-website-patterns-logos.png) - [Copa Components — guía de pictogramas](./docs/design-references/copa-components-pictograms-guidelines.png) - [Copa Components — inventario de pictogramas](./docs/design-references/copa-components-pictograms-inventory.png) - [Copa Website Patterns — catálogo CDN de iconos y correcciones del landing](./docs/design-references/copa-icons-cdn-catalog.md) - [Página de equipaje — desktop 1440px](./docs/design-references/baggage-claims-desktop-1440.png) - [Página de equipaje — desktop 1280px](./docs/design-references/baggage-claims-desktop-1280.png) - [Página de equipaje — tablet 768px](./docs/design-references/baggage-claims-tablet-768.png) - [Página de equipaje — mobile 411px](./docs/design-references/baggage-claims-mobile-411.png) Al extraer una regla nueva desde una captura, registra el viewport y distingue entre un patrón recurrente y una decisión específica de esa página. ## Gobierno del documento Actualiza esta guía cuando: - llegue una fuente oficial que confirme o contradiga una convención; - una campaña introduzca un patrón reutilizable; - una revisión de accesibilidad cambie una regla; - un requisito de AirTRFX o del host altere la arquitectura de exportación; - una decisión deje de ser específica y se convierta en estándar del workspace. Cada cambio debe indicar si la regla es confirmada, una convención de trabajo o está pendiente de validación. ## Historial - **2026-08-06:** se corrigió la estrategia tipográfica a dos familias: Gilroy para títulos y display; Suisse Int’l para UI, texto pequeño y lectura prolongada. Se verificaron 18 WOFF en el CDN público y las cuatro variantes primarias del Quick Guide. - **2026-08-06:** se documentaron las familias Informative, Alerts y Regular del CDN oficial, el patrón autorizado de títulos de sección y la prohibición de numeración decorativa, title lashes genéricos y estados visuales heredados de OpenAI. - **2026-08-05:** se publicó el sistema en Cloudflare Pages con landing humana, `prompt.md`, guía completa y `llms.txt`; el repositorio independiente quedó creado localmente y el remoto de Azure permanece pendiente del permiso para crear repositorios. - **2026-08-05:** se confirmaron las rutas de producción de los logos de Copa Airlines, ConnectMiles y Digital Marketing; se contemplaron promo modules reutilizables entre Homepage y Promociones ConnectMiles, y se documentaron las diez variantes WOFF disponibles de Gilroy con una estrategia de carga aislada. - **2026-08-04:** la explicación de segmentos pasó a una fila completa con el itinerario BOG–PTY–MIA, el Hub de las Américas®, dos vuelos etiquetados y la bandera oficial de Estados Unidos. - **2026-08-04:** se sustituyeron las banderas recreadas por los SVG oficiales `flag-CO.svg` y `flag-PA.svg`, y se movió el logo oficial de SuperTransporte antes del título legal. - **2026-08-04:** se refinó PreferChallenge con un aviso compacto de asterisco, un lockup horizontal para el encabezado de calculadora y una explicación BOG–PTY mediante mini-banderas y el livery oficial `https://www.copaair.com/promotions/assets/svg/livery_connectmiles-flipped.svg`. - **2026-08-04:** se reemplazó el hero fotográfico de PreferChallenge por un hero tipográfico compacto con logo ConnectMiles; participación pasó a un grid 2 × 2 de tres pasos más aviso independiente, el módulo de destinos dejó de mostrar segmentos faltantes y la educación incorporó el ejemplo BOG → PTY = 1 segmento. - **2026-07-29:** se corrigió la validación del parámetro `?segments=` para evitar que AirTRFX elimine el escape `\d` al serializar el script. - **2026-07-29:** se reforzaron el margen inferior del hero y el peso tipográfico de los headings de PreferChallenge frente a overrides de AirTRFX. - **2026-07-29:** se migraron los SVG incrustados de PreferChallenge a la ruta oficial `https://www.copaair.com/promotions/destinations/icons/`. - **2026-07-29:** se fijó el hero horizontal de PreferChallenge en `294px` y se habilitó la precarga del calculador mediante el parámetro compartible `?segments=`. - **2026-07-29:** se rediseñó el hero de PreferChallenge como un banner editorial compacto, reduciendo altura y contraste de escala entre título y descripción. - **2026-07-29:** se invirtió el módulo de destinos para mostrar primero el progreso y las rutas, dejando el título y la descripción como cierre inferior del box. - **2026-07-29:** se añadió la actualización de país de residencia y nacionalidad como primer paso, se movió el título de vuelos al box de destinos y se compactaron sus cards. - **2026-07-29:** se unificaron los dos títulos del módulo de destinos en un único encabezado accionable y se eliminó el heading interno redundante. - **2026-07-29:** se acercó el grid dinámico a la calculadora, desplazando las preguntas debajo, y se alineó su acento con los colores oficiales Member, Silver y Gold. - **2026-07-29:** se reemplazaron las recomendaciones estáticas de PreferChallenge por un grid dinámico de destinos que responde al progreso, usa enlaces relativos del accordion oficial y carga imágenes por IATA bajo demanda. - **2026-07-29:** se movió el lockup ConnectMiles al resultado del calculador y se incorporó un patrón de educación sobre segmentos con recomendaciones contextuales de vuelos oficiales desde Colombia. - **2026-07-29:** se redujo la saliencia visual de los términos de PreferChallenge mediante una columna compacta, centrada y gris, manteniendo el contenido completo y el sello regulatorio visible. - **2026-07-29:** se incorporó el patrón oficial de wide banner en tres tamaños, los logos ConnectMiles White Gold y Blue Gold, la paleta de estatus actualizada y el identificador regulatorio de SuperTransporte en PreferChallenge. - **2026-07-29:** se confirmó el umbral Gold en 15 segmentos y se incorporaron los términos completos aprobados en ES y EN a PreferChallenge. - **2026-07-29:** se incorporó el pictograma oficial Ganar millas volando al encabezado de participación y al paquete de exportación de PreferChallenge. - **2026-07-29:** se incorporó el pictograma oficial Millas de calificación al calculador y al paquete de exportación de PreferChallenge. - **2026-07-29:** se incorporó el pictograma oficial Estrellas de millas al encabezado y al paquete de exportación de PreferChallenge. - **2026-07-29:** se incorporó el pictograma oficial Member como estado base del calculador de PreferChallenge. - **2026-07-29:** se incorporaron Design Principles y los pictogramas oficiales de status Silver y Gold usados por PreferChallenge. - **2026-07-29:** se incorporó el manejo de logos corporativos, marcas de producto, lockups con Star Alliance y colocación en banners. - **2026-07-29:** se incorporaron la escala, los estilos, el naming y el inventario oficial de pictogramas de Copa Components. - **2026-07-29:** se incorporaron Copa Design System 2.0 / Foundations y la página responsive de equipaje como fuentes visuales confirmadas. - **2026-07-29:** primera versión basada en el dashboard, Mid Year Deals y PreferChallenge Colombia 2026.