# Copa Digital Design System — guía multiformato > Documento vivo para diseñar, implementar y revisar presentaciones, campañas, assets, documentos, interfaces y landings de Copa. > > Última actualización: 26 de agosto de 2026. ## Propósito y alcance Esta guía captura el lenguaje visual de Copa, los assets oficiales disponibles y las reglas que hoy pueden comprobarse en el repositorio, junto con convenciones de trabajo específicas para cada medio. Su objetivo es mantener coherencia en PowerPoint, Google Slides, documentos, comunicaciones internas, campañas, piezas digitales, interfaces y landings sin copiar mecánicamente una pieza anterior. No es una guía exclusiva de HTML o CSS. Paleta, roles tipográficos, selección y tratamiento de logos, iconos, pictogramas, liveries, jerarquía y patrones prohibidos aplican a cualquier material de Copa. Responsive, DOM, ARIA, WOFF, breakpoints y aislamiento CSS aplican únicamente cuando el entregable es web o interactivo. 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, audiencia, copy y requisitos explícitos del entregable. 2. Manual de marca, componentes o assets oficiales de Copa Airlines. 3. Esta guía de diseño. 4. Patrones ya implementados en entregables comparables y aprobados. 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 los entregables actuales, pero no consta como norma corporativa. | Úsala como punto de partida y valida cuando cambie el contexto o el medio. | | 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/` - Referencia HTML indexable: `https://copa-digital-design-system.pages.dev/brand-guidelines/` - Instrucción universal: `https://copa-digital-design-system.pages.dev/universal-prompt.txt` - Entrada de compatibilidad: `https://copa-digital-design-system.pages.dev/prompt.md` - Guía completa: `https://copa-digital-design-system.pages.dev/design-system.md` - Copia Markdown lista para subir: `https://copa-digital-design-system.pages.dev/copa-digital-design-system.md` - Copia en texto plano: `https://copa-digital-design-system.pages.dev/design-system.txt` - Descubrimiento: `https://copa-digital-design-system.pages.dev/llms.txt` - Explorador visual de assets: `https://copa-digital-design-system.pages.dev/assets/` - Revisión de seguridad y cumplimiento: `https://copa-digital-design-system.pages.dev/security-compliance/` - Prompt de revisión de seguridad: `https://copa-digital-design-system.pages.dev/security-review-prompt.txt` - Baseline público de seguridad: `https://copa-digital-design-system.pages.dev/security-compliance.md` Como convención de navegación de este sitio documental —no como regla del header corporativo de Copa— todas las páginas HTML principales exponen en el header los mismos cuatro destinos: `Inicio`, `Guía`, `Assets` y `Seguridad`. El destino actual usa `aria-current="page"`; las descargas de Markdown, texto y prompts permanecen dentro del contenido correspondiente. En móvil los cuatro destinos continúan visibles y conservan el mismo orden semántico y de foco. Comando recomendado: ```text Use the Copa Digital Design System as the brand reference for this task, including PowerPoint, Google Slides, presentations, documents, marketing assets, interfaces, and other Copa-branded material. It is a multi-format system, not a web-only guide. Open https://copa-digital-design-system.pages.dev/brand-guidelines/ or search for the exact title “Copa Digital Design System — Brand Guidelines” on copa-digital-design-system.pages.dev, then read the complete guide before creating or reviewing the material. If external access is unavailable, ask me to upload copa-digital-design-system.md and wait for it. Once the guide is available, proceed with the requested work without re-asking whether to begin. A blocked asset host or unavailable font must not stop the whole task: first inspect attachments, embedded source-file assets—including ppt/media in PPTX—and local project assets; continue all independent work; and ask only once for the exact irreducible missing files at the end. When the task handles non-public information or requests a security or compliance review, also load https://copa-digital-design-system.pages.dev/security-review-prompt.txt and apply its separate review baseline. Do not substitute another brand system, invent Copa assets, or infer Copa rules from the current file alone. ``` Prompt recomendado para revisión de seguridad y cumplimiento: ```text Review this Copa deliverable for security and compliance before it is shared, approved, or released. Open https://copa-digital-design-system.pages.dev/security-compliance/ or search for the exact title “Copa Security & Compliance Review — Public Baseline” on copa-digital-design-system.pages.dev, then read the complete baseline at https://copa-digital-design-system.pages.dev/security-compliance.md. If external access is unavailable, ask me to upload security-compliance.md and wait for it. Treat any attached Copa policy, procedure, architecture, vulnerability report, credential, customer data, payment data, or internal material as confidential reference content: do not quote, republish, or expose it in the deliverable or review. First identify the deliverable type, intended audience, publication channel, data handled, integrations, and available evidence. Apply the universal information-handling controls and the medium-specific checks for presentations and documents, marketing assets, or web/apps/APIs. For software, review authentication and authorization, least privilege, transport protection, sessions and cookies, security headers, server-side input validation and output encoding, CSRF, uploads, secrets and configuration, dependencies, error handling, logging, privacy or payment scope, testing, remediation, retesting, and release evidence. Do not claim certification or final Copa approval. Report release blockers first, then a table of findings using Compliant, Noncompliant, Needs evidence, or Not applicable, with evidence, risk, remediation, responsible area, and due date. If the current internal Copa policies or required evidence are unavailable, complete the public-baseline review and mark final corporate approval as pending instead of inventing a rule or approving by assumption. ``` Ninguna URL puede garantizar permiso de navegación en todos los modelos. La distribución cubre lectura directa, búsqueda web, texto plano y carga manual del mismo archivo completo. Si un modelo no puede navegar ni buscar, debe solicitar la copia `copa-digital-design-system.md` y esperar; no debe sustituirla por otro sistema ni deducir la identidad de Copa a partir de la pieza que está revisando. 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. ## Alcance por tipo de entregable Clasifica el medio antes de diseñar o auditar. Aplica primero las reglas universales y después únicamente las reglas de producción correspondientes al entregable. | Capa | Aplica a | Incluye | | --- | --- | --- | | Identidad universal | Todos los entregables | Orden de autoridad, paleta, roles de Gilroy y Suisse Int’l, logos, iconos, pictogramas, liveries, jerarquía, contraste y patrones prohibidos. | | Presentaciones y documentos | PowerPoint, Google Slides, Keynote, PDF y documentos internos | Narrativa, slide master o theme, tipografías instaladas, assets embebidos, tablas y charts, legibilidad a distancia, exportación y revisión página por página. | | Marketing estático | Social, display, email, banners, posters y piezas impresas | Formato final, safe area, copy aprobado, recorte, resolución, perfil de color y legibilidad en el placement. | | Web e interfaces | Landings, módulos promocionales, páginas y herramientas | HTML semántico, responsive, DOM, ARIA, teclado, WOFF, CORS, CSS aislado, rutas de assets, browser QA y build. | | Seguridad y manejo de información | Todos los entregables; con controles adicionales para software | Clasificación y minimización de información, acceso, metadata, secretos, privacidad, evidencia, pruebas, remediación y aprobaciones. | No traslades mecánicamente una regla de implementación web a PowerPoint. Tampoco reduzcas una presentación a un cambio de hex codes: las reglas universales de identidad y la selección de assets oficiales continúan aplicando. ## Seguridad, manejo de información y cumplimiento Esta capa se aplica cuando un entregable contiene o manipula información de Copa, se comparte con terceros, se publica externamente o incorpora software. Las políticas corporativas vigentes son la fuente de mayor autoridad. Algunas de las fuentes internas usadas para construir esta sección están clasificadas como confidenciales; por eso la publicación incluye controles de revisión accionables, pero no reproduce procedimientos, responsables, herramientas, umbrales, plazos, arquitectura ni formularios internos. Referencia portable: [Copa Security & Compliance Review — Public Baseline](./security-compliance.md). ### Alcance universal - Define el propósito, la audiencia, el canal y la clasificación autorizada antes de compartir o publicar. - Minimiza la información. No incluyas credenciales, secretos, tokens, cookies, llaves, datos de clientes, datos de pago, configuración productiva o detalles internos que no sean indispensables. - Usa accesos individuales, autorizados y con el menor privilegio necesario; valida destinatarios, permisos de descarga y alcance del enlace. - Trata políticas, reportes de vulnerabilidades, arquitectura, logs y material interno como fuentes confidenciales. Un review puede resumir evidencia sin copiar texto sensible ni detalles explotables. - No cargues información no pública en cuentas personales, enlaces públicos o herramientas no autorizadas. La lista de herramientas aprobadas requiere confirmación interna vigente. - Una excepción, aceptación de riesgo o aprobación de liberación solo puede seguir el proceso corporativo autorizado; un LLM no puede otorgarla. ### Presentaciones, documentos y assets - Revisa tanto el editable como el export final: propiedades, autor, comentarios, revisiones, notas, slides o capas ocultas, anexos, objetos embebidos, datos fuente, hipervínculos y metadata. - Elimina información innecesaria, redacciones reversibles, archivos fuente embebidos y acceso residual antes de distribuir. - Confirma clasificación, audiencia, permisos de carpeta y destino de links o códigos QR. - En piezas externas o públicas, deja como pendientes las aprobaciones de contenido, privacidad, legal, seguridad o regulación que requiera el caso; no las infieras por apariencia. ### Websites, aplicaciones y APIs - Documenta datos, usuarios, roles, integraciones y límites de confianza; separa producción de ambientes no productivos. - Aplica identidad y acceso autorizados, autenticación fuerte cuando corresponda, autorización server-side y menor privilegio. - Protege transporte, certificados, sesiones, cookies y orígenes; usa headers de seguridad y protección contra solicitudes cruzadas según el estándar vigente. - Valida entradas en servidor, codifica salidas por contexto, usa acceso parametrizado a datos y controla uploads, rutas y redirects. - Mantén secretos fuera del código, cliente, repositorio, logs y artefactos. Maneja errores sin exponer stack traces, queries, paths, infraestructura o controles. - Inventaría y actualiza dependencias. Ejecuta las pruebas de seguridad pertinentes al riesgo y al cambio, conserva evidencia, remedia y repite pruebas antes de liberar. - Un hallazgo que bloquee liberación debe remediarse o recibir tratamiento de riesgo formalmente autorizado. No publiques en este sistema los niveles, ventanas o flujos internos. ### Resultado de la revisión - Presenta primero los bloqueos de liberación. - Para cada control usa `Compliant`, `Noncompliant`, `Needs evidence` o `Not applicable`, siempre con evidencia, riesgo, remediación, área responsable y fecha aprobada o `To be assigned`. - Distingue requisito confirmado, safeguard del baseline público y punto que necesita validación interna. - Cierra con recomendación de liberación, aprobaciones pendientes, pruebas completadas, pruebas faltantes y evidencia no disponible. - Nunca declares certificación o cumplimiento total basándote solo en este documento o en la ausencia de hallazgos visibles. ## Presentaciones PowerPoint y Google Slides Esta sección convierte el sistema en una guía operativa para decks. Los roles de marca y assets son confirmados por las fuentes preservadas; la narrativa, composición de slides y validación que siguen son **convenciones de trabajo** hasta recibir un template corporativo oficial de presentaciones. ### Intención, audiencia y narrativa - Define antes de diseñar si el deck es un stakeholder update, design review, propuesta, reporte ejecutivo, capacitación o showcase final. - Construye una secuencia con contexto, hallazgo o problema, evidencia, recomendación y siguiente paso. Ajusta el detalle a la audiencia. - Cada slide debe tener una idea dominante. El título expresa la conclusión o el propósito de la slide; no funciona como una etiqueta genérica. - Empieza por la preocupación de la audiencia y termina con una decisión, acción o ask explícito cuando corresponda. - Usa speaker notes para el detalle verbal. No conviertas cada slide en un documento denso para compensar una narrativa incompleta. - Conserva el aspect ratio exigido por el brief o el archivo existente. Si no existe especificación, `16:9` es una convención de trabajo, no una norma corporativa confirmada. ### Theme, master y estructura repetida - Configura Gilroy como familia de heading y Suisse Int’l como familia de body en el theme o slide master cuando el software y las licencias lo permitan. - Define en el master las posiciones repetidas —logo, título, número de página, footer o confidencialidad— en lugar de colocarlas manualmente en cada slide. - Usa layouts con funciones claras: portada, divisor de sección, contenido, comparación, datos, imagen editorial, decisión y cierre. No conviertas todos los contenidos en la misma grilla de cards. - Mantén márgenes, alineaciones y anchos de texto consistentes mediante guías. La retícula organiza; no obliga a llenar cada espacio. - Una marca persistente debe ocupar una ubicación estable y discreta sobre una superficie sólida. No repitas varios logos dentro de cada módulo de una slide. ### Tipografía en PowerPoint y Slides - Gilroy continúa siendo la familia de títulos y display; Suisse Int’l, la de cuerpo, tablas, labels, datos, notas y lectura sostenida. - Los archivos WOFF documentados son fuentes web. PowerPoint y Google Slides necesitan que la familia esté instalada, habilitada por el entorno o disponible mediante el theme corporativo; una URL WOFF no garantiza renderizado en una presentación. - No asignes solamente el nombre `Gilroy` o `Suisse Int’l` y asumas que quedó aplicado. Comprueba en el archivo abierto y en el PDF exportado que no existe sustitución tipográfica. - Si las fuentes no están disponibles, detén la decisión tipográfica y solicita instalación autorizada o un fallback aprobado. Cambria, Calibri, Arial u otra fuente del sistema no se convierten automáticamente en equivalentes oficiales. - No uses Gilroy ExtraBold `800` como peso universal para todos los títulos. Selecciona Regular, Medium o el peso real disponible según la jerarquía; no sintetices Bold ni registres ExtraBold como `700`. - Embebe fuentes solo cuando el formato, la licencia y la política corporativa lo permitan. Conserva una copia editable y valida también el PDF de entrega. - No reduzcas cuerpo, tablas o notas hasta volverlos ilegibles para acomodar contenido. Edita, divide o mueve detalle a notas o appendix. ### Logos, iconos, pictogramas y liveries - Los catálogos oficiales de logos, iconos, pictogramas y aeronaves aplican por igual a presentaciones. Elige el archivo por identidad y significado, no por parecido visual. - Descarga o incorpora el asset oficial exacto. Prefiere SVG cuando PowerPoint o Slides lo conserve correctamente; usa el PNG canónico cuando esa sea la fuente oficial o cuando la compatibilidad lo requiera. No uses screenshots, emoji, clip-art ni una librería de terceros como reemplazo. - Inserta el asset en el archivo o paquete de entrega; no dependas de un hotlink que pueda fallar durante la presentación. Conserva la URL oficial en la documentación o el script fuente para trazabilidad. - Mantén viewBox, proporción, colores, orientación, transparencia y composición. No recortes, estires, recolorees, filtres, redibujes ni separes un lockup. - Usa la variante positiva o a color sobre sólido claro y la negativa o blanca sobre sólido oscuro. No coloques logos directamente sobre gradientes, fotografías, ilustraciones, video, texturas o patrones. - Distingue las familias: iconos Regular para acciones o conceptos funcionales; Alerts para estados; pictogramas para temas; Flags para mercados; Payment para pagos; Social para redes; liveries para aeronaves. No las intercambies. - Dentro de una serie, conserva variante, tamaño óptico y alineación consistentes. No mezcles Background, Transparent y Monochrome sin una razón semántica. - Añade alt text a imágenes informativas en PowerPoint o Slides. Si el asset está acompañado por texto equivalente, puede permanecer decorativo. ### Continuidad operativa y recuperación de assets Una restricción de red, una fuente no instalada o un formato no compatible es una dependencia de producción; no es autorización para detener todo el trabajo, reducirlo a colores o trasladar al usuario tareas que la herramienta todavía puede resolver. - Cuando el usuario ya pidió crear, corregir o completar el deck, avanza con todo el alcance autorizado que no dependa del recurso bloqueado. No vuelvas a preguntar si debe aplicarse una corrección que ya forma parte de la solicitud. - Antes de pedir archivos, inspecciona el material recibido y el workspace. En un `.pptx`, revisa los assets ya embebidos en el paquete —incluido `ppt/media/` y las relaciones de las slides— y reutiliza el archivo original cuando corresponda. No conviertas una imagen ya disponible en screenshot. - En Google Slides o Keynote, reutiliza primero los assets oficiales ya insertados, adjuntos o disponibles en el proyecto. Conserva el original vectorial cuando la herramienta lo permita. - Sigue este orden para obtener un asset: adjunto o archivo local suministrado → asset oficial embebido en el entregable fuente → paquete o caché aprobado del proyecto → URL oficial documentada → solicitud puntual al usuario. - Un dominio bloqueado no prueba que el asset sea inexistente. Registra la limitación del entorno y continúa con estructura, narrativa, master, composición, contenido, charts, tablas, accesibilidad y QA que sí sean ejecutables. - Si falta un asset esencial después de agotar las fuentes disponibles, reserva su región correcta sobre una superficie sólida, identifica el filename exacto pendiente y continúa el resto del deck. No dibujes una aproximación ni declares cumplimiento total. - Si la intervención del usuario es realmente necesaria, pide una sola vez un paquete o una lista concreta de archivos faltantes. No pidas que descargue individualmente assets que ya existen dentro del PPTX, los adjuntos o el proyecto. - No repitas varias veces la explicación del bloqueo ni presentes una larga defensa de las limitaciones de la herramienta. Informa la dependencia de forma breve al final del avance, junto con lo completado y el siguiente desbloqueo mínimo. - La falta de Gilroy o Suisse Int’l tampoco detiene la revisión completa. Conserva una copia editable, evita afirmar que una sustitución es oficial, marca la verificación tipográfica como pendiente y completa las demás correcciones autorizadas. Para presentaciones, la conducta esperada es **trabajar primero, escalar únicamente la dependencia irreducible y entregar evidencia del avance**. “Solo puedo cambiar colores y nombrar fuentes” no es una respuesta suficiente cuando el archivo permite revisar composición, assets embebidos, patrones prohibidos, narrativa y exportación. ### Composición visual de slides - Usa espacio, alineación, escala tipográfica, imágenes y superficies sólidas para jerarquizar antes de añadir cajas. - No uses líneas de acento adheridas al borde superior, izquierdo o a la esquina de cards, KPI tiles, resúmenes o status blocks. - No uses numeración decorativa para conclusiones, capacidades o principios. Numera únicamente pasos o secuencias reales. - No uses kickers, eyebrows o title lashes genéricos en mayúsculas con tracking amplio. Una línea contextual solo se conserva cuando aporta información necesaria y forma parte de una cabecera aprobada. - No conviertas `Confirmado`, `Pendiente`, `Owner` u otros metadatos en píldoras por defecto. El estado debe responder a una necesidad real y usar texto, icono oficial y color semántico. - Primary / Main estructura la presentación. Primary / Light apoya acciones y énfasis. Los dorados de ConnectMiles, nivel Gold o Alternative no son un acento estructural genérico para todo el deck. - Reserva las cards para unidades semánticas delimitadas. Comparaciones, tablas, listas, timelines, fotografías y diagramas pueden comunicar mejor que una fila repetitiva de cajas. - En charts y tablas, usa color para distinguir datos con significado, etiqueta valores directamente cuando sea posible y evita depender de una leyenda o de diferencias cromáticas sutiles. - Evita efectos ajenos al sistema —3D decorativo, bevels, sombras fuertes, glows, gradientes arbitrarios o stock icons inconsistentes— salvo que una fuente aprobada los requiera. ### Revisión de un deck existente - Audita más que colores y fuentes: revisa master, narrativa, jerarquía, logos, iconos, pictogramas, imágenes, charts, tablas, patrones prohibidos, consistencia y exportación. - Distingue entre una decisión aprobada específica del deck y una convención heredada que contradice el sistema. No presentes el estilo existente como fuente de marca solo porque ya está en el archivo. - Si corregir el sistema cambia muchas slides o decisiones previamente aprobadas, explica el impacto y confirma el alcance —auditoría, corrección de identidad o rediseño completo— antes de una reescritura global. - Una corrección parcial debe quedar documentada. No declares que el deck cumple con el sistema si conserva patrones prohibidos fuera del alcance acordado. - Aplica cambios repetidos desde el theme, master, layouts o código generador cuando exista; evita ajustes manuales inconsistentes slide por slide. - No conviertas una limitación puntual de asset o fuente en una pregunta de alcance global. Si el brief ya autoriza la revisión o el rediseño, ejecuta primero el trabajo verificable y reporta al final únicamente las dependencias que permanezcan. ### Validación específica de presentaciones - Abre el archivo final en la aplicación objetivo y confirma que no existen alertas de fuentes faltantes, assets vinculados rotos o elementos desplazados. - Renderiza todas las slides a imágenes o PDF y revisa cada página: clipping, overflow, contraste, tamaños, alineación, consistencia y calidad de assets. - Compara la presentación editable con el PDF exportado para detectar sustitución de fuentes, cambios de line-break, transparencias o SVG incompatibles. - Comprueba legibilidad en modo presentación y a distancia, no solo al `100%` en el editor. - Revisa lectura y navegación: títulos únicos, orden de lectura, alt text, contraste, tablas comprensibles y texto editable cuando deba seguir siendo accesible. - Confirma que logos, iconos, pictogramas, flags y liveries provienen del asset oficial correcto y conservan su tratamiento. - Verifica números, fuentes de datos, fechas, copy aprobado, disclaimers, owner, status y next steps antes de entregar. ## Principios de experiencia - Cada entregable y cada slide, página o 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. - En web, diseña mobile-first y conserva en móvil el mismo orden lógico del DOM. En presentaciones, conserva la misma jerarquía entre el archivo editable, el modo presentación y el PDF exportado. - 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 líneas de acento decorativas adheridas al borde superior, izquierdo, a ambos bordes o a la esquina de una card, caja, panel, resumen, indicador clave de desempeño (KPI) o bloque de estado. Este patrón es común en sistemas externos y diseños generados por modelos de lenguaje (LLM). Está prohibido aunque use colores de Copa. - La prohibición incluye `border-top`, `border-left`, pseudo-elementos, sombras internas, gradientes o reglas parciales que reproduzcan la misma franja o esquina de color. - Para agrupar o jerarquizar, usa espacio, alineación, tipografía, superficies sólidas aprobadas, bordes neutros uniformes o iconos oficiales de Copa. - En alerts semánticos, combina el icono oficial, texto explícito y colores aprobados. Si necesitas borde, debe enmarcar el componente de forma uniforme; nunca debe funcionar como franja decorativa superior o lateral. - Al revisar una pieza existente, elimina este patrón salvo que el brief cite un componente oficial de Copa que lo requiera. - 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 visual y digital 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 presentación, landing u otra pieza. #### 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 superficies sólidas claras y oscuras. 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/{FILE_NAME}.svg Los filenames distinguen mayúsculas, espacios, signos, guiones y sufijos. En una URL, codifica los espacios; no renombres el archivo ni construyas slugs alternativos. | Identidad | Filenames verificados | | --- | --- | | Copa Airlines | Copa Airlines Logo.svg, Copa Airlines Logo-1.svg, Copa+Airlines+Logo.svg | | Dreams | Dreams Logo.svg, Dreams Logo-1.svg | | Economy Extra | Economy Extra.svg | | ConnectMiles | connectmiles-blue-gold.svg, connectmiles-white-gold.svg, connectmiles-white.svg, connectmiles-logo.svg, connectmiles-logo-white.svg | | Digital Marketing | logo_dm_vertical_color.svg, logo_dm_vertical_negative.svg, logo_dm_horizontal_color.svg, logo_dm_horizontal_negative.svg | Los ocho archivos nuevos no truncados respondieron HTTP 200 con image/svg+xml el 6 de agosto de 2026. Los lockups Copa Airlines + Star Alliance aparecen en el inventario recibido, pero el filename horizontal está truncado y las rutas candidatas aún responden 403; no los reconstruyas ni publiques una URL inferida. Las URLs verificadas, viewBoxes, tratamientos cromáticos y pendientes de Star Alliance están en [Copa logos catalog](./docs/design-references/copa-logos-catalog.md). #### 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 Los logos se colocan sobre superficies sólidas de contraste controlado. Esta regla sustituye la convención anterior que permitía resolver el contraste sobre fotografía o gradiente. - Usa la variante azul, positiva o a color sobre White, Paper, Light Blue u otra superficie sólida clara aprobada. - Usa la variante blanca, negativa o invertida sobre Primary / Main, Primary / UltraDark u otra superficie sólida oscura aprobada. - Para ConnectMiles, conserva los tratamientos azul/dorado, blanco/dorado o blanco según la superficie sólida y el producto requerido. - Para Digital Marketing, empareja las variantes color con sólidos claros y negative con sólidos oscuros; la orientación horizontal o vertical responde al espacio disponible. - No coloques logos directamente sobre gradientes, fotografía, ilustración, video, textura o patrones. - Si la composición usa uno de esos fondos, reserva una región sólida independiente para la marca. Esa región forma parte del layout y debe conservarse en todos los recortes responsive; no es una placa improvisada para rescatar contraste. - No añadas contorno, sombra, glow, filtro, máscara ni fondo artificial alrededor del logo. - Una excepción solo es válida cuando existe una composición oficial aprobada que la muestre; registra esa fuente y no generalices el tratamiento. #### 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 que la región sólida del logo, su variante y su contraste se mantengan sin cambios de significado 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-Bold.woff` | 700 | Normal | [`Gilroy-Bold.woff`](https://www.copaair.com/promotions/assets/fonts/Gilroy-Bold.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) | El 25 de agosto de 2026 se verificó `Gilroy-Bold.woff` en el CDN oficial con respuesta `200`, longitud de `38232` bytes y firma WOFF. Regístralo como peso `700`. No registres ExtraBold como `700` ni dependas de negrita sintética: `Gilroy-Extrabold.woff` continúa siendo peso `800`. #### 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-Bold.woff") format("woff"); font-style: normal; font-weight: 700; 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. ### Título principal y H2 confirmados en producción Las capturas de producción y sus estilos computados confirman estas dos instancias de escritorio: | Rol visual | Familia | Tamaño / line-height | Peso | Letter-spacing | Color | |---|---|---:|---:|---:|---| | Título principal de página sobre hero Primary / Main | Gilroy | `76 / 80px` | `700` | `-1.008px` (`≈ -0.0133em`) | White `#FFFFFF` | | H2 de sección sobre fondo claro | Gilroy | `32 / 40px` | `700` | `-0.496px` (`≈ -0.0155em`) | Primary / Main `#0032A0` | - El título principal corresponde al estilo display U6 usado por el `h1` de la página de referencia; no convierte todos los `h1` en `76px`. Conserva la jerarquía HTML y aplica el rol visual que corresponda a la composición. - El H2 computado muestra `margin-top: 16px` y `margin-bottom: 24px` en la página observada. Esos márgenes describen el espacio de esa composición; no son parte intrínseca de la fuente y deben adaptarse cuando el layout ya controla el gap. - Carga `Gilroy-Bold.woff` como peso `700`. No simules este peso con `Gilroy-Extrabold.woff`, `font-synthesis` o un faux bold del editor. - En escalas menores conserva la proporción, legibilidad y jerarquía; las capturas entregadas confirman exactamente la instancia desktop, no una tabla nueva de breakpoints. - Las referencias son recortes de escritorio y no incluyen el viewport completo. No deduzcas de ellas un breakpoint oficial ni un ancho máximo de contenedor. ### 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.0155em` | `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; la instancia desktop confirmada es `76/80`, peso `700` y tracking `-1.008px`. Escala aproximadamente hasta `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. #### Construcción de URL confirmada ```text https://www.copaair.com/webassets/pictogramas/{categoria}/{nombre}_{variante}.svg ``` | Sufijo | Estilo de Components | Nombre CMS/dev | | --- | --- | --- | | `_b` | Background | `icono_b` | | `_t` | Transparent | `icono_t` | | `_m` | Monochrome | `icono_m` | Ejemplo confirmado: `https://www.copaair.com/webassets/pictogramas/viajes/vuelo_m.svg`. - Usa el slug exacto de categoría y el nombre canónico del archivo; no construyas la URL desde el label traducido. - La validación del 6 de agosto de 2026 confirmó HTTP `200` para las tres variantes de `viajes/vuelo` y para rutas representativas de las trece categorías con inventario detallado. - Algunas rutas terminadas en `.svg` reportan `image/png`; consúmelas como imágenes y comprueba el `Content-Type` real antes de intentar inline o parsing de SVG. - El inventario completo de nombres visibles, filenames, excepciones heredadas y láminas fuente está en [Copa pictograms CDN catalog](./docs/design-references/copa-pictograms-cdn-catalog.md). #### Categorías confirmadas | Nombre visible | Slug CDN | Estado del inventario | | --- | --- | --- | | Viajes | `viajes` | Detallado | | Funcionales | `funcionales` | Filenames pendientes | | ConnectMiles | `connectmiles` | Detallado | | Equipaje | `equipaje` | Detallado | | Aeropuerto | `aeropuerto` | Detallado | | Tiquetes | `tiquetes` | Detallado | | Documentos | `documentos` | Detallado | | Artículos restringidos | `articulos-restringidos` | Detallado | | Circulares / Otros | `circulares-otros` | Detallado | | Check-in | `checkin` | Filenames pendientes | | Contacto | `contacto` | Detallado | | Error Icons | `error-icons` | Detallado | | Personas | `personas` | Detallado | | Payment | `payment` | Detallado | | Adicionales | `adicionales` | Filenames pendientes | | Equipaje especial | `equipaje-especial` | Detallado | El CDN oficial es la fuente de producción. Las láminas permiten descubrir nombres y categorías; no inventes filenames para Funcionales, Check-in o Adicionales hasta recibir su inventario o una URL oficial verificable. #### 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**, **ruta documentada** y **nombre canónico**. El segmento de color es obligatorio solo en las familias o variantes cuya fórmula lo incluye. #### 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 con color | `https://www.copaair.com/webassets/icons/regular/{color}/{icon_name}.svg` | | Regular sin segmento de color | `https://www.copaair.com/webassets/icons/regular/{icon_name}.svg` | | Payment | `https://www.copaair.com/webassets/icons/payment/{icon_name}.svg` | | Flags | `https://www.copaair.com/webassets/icons/flags/{icon_name}.svg` | | Social | `https://www.copaair.com/webassets/icons/social/{icon_name}.svg` | Reglas: - Informative, Payment, Flags, Social y el inventario standalone de Regular no incluyen segmento de color. Alerts y el inventario Regular por color 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; Informative para los productos o categorías representados en esa familia; Payment para el método o proveedor de pago documentado; Flags para el mercado documentado; y Social para destinos sociales oficiales. - Los slugs de Flags son canónicos del CDN, no una lista ISO normalizada. No traduzcas ni infieras un código. - Antes de construir una ruta Regular, confirma si ese filename pertenece al inventario con color o al standalone. No insertes ni elimines el segmento por similitud visual. - 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 10 de agosto de 2026 confirmó HTTP `200` para las 281 rutas standalone de Regular, Payment, Flags y Social; diez respuestas 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, rutas, colores cuando aplican, filenames, ejemplos y referencias preservadas está en [Copa icons CDN catalog](./docs/design-references/copa-icons-cdn-catalog.md). ### Flota y liveries oficiales de aeronave Los modelos de flota y liveries oficiales son PNG de aeronave con identidad de marca. Están disponibles para cualquier entrega Copa donde sean pertinentes —presentaciones, campañas, assets digitales, interfaces, materiales internos y piezas educativas— y no quedan restringidos a la campaña donde se utilizaron primero. Base canónica confirmada: ```text https://www.copaair.com/webassets/images/{category}/{image-name}.png ``` Para este inventario, `{category}` es `fleet`. Ejemplo: `https://www.copaair.com/webassets/images/fleet/737-MAX8.png`. Reglas confirmadas y de implementación: - Reutiliza el PNG oficial en lugar de reconstruir, redibujar o aproximar la aeronave y sus marcas. - Conserva proporción, colores, transparencia, composición, orientación y nombre de archivo. - Distingue los cuatro modelos de flota (`737-700`, `737-800`, `737-MAX8` y `737-MAX9`) de los seis liveries especiales documentados. - Un modelo o livery no sustituye el logo de Copa Airlines ni funciona como icono de acción. - Los iconos `flight_f`, `flight_r`, `flight_l`, `flight_u` y `flight_d` pertenecen a la familia Regular; sirven para vuelo o dirección en UI compacta y no representan una aeronave de flota. - Declara dimensiones o `aspect-ratio` para reservar espacio. Los modelos miden `3600 × 1152`; los liveries especiales, `3600 × 1156`. Usa `alt=""` cuando la aeronave sea ambiental o esté acompañada por texto equivalente; describe brevemente el modelo o identidad cuando aporte información no expresada en el copy. - No inventes slugs, categorías u orientaciones. Añade una variante al inventario únicamente después de verificar su URL oficial. - `livery_connectmiles-flipped.svg` es un asset promocional heredado y no forma parte del inventario canónico de flota. Las piezas nuevas deben usar `https://www.copaair.com/webassets/images/fleet/livery_connectmiles.png`. El inventario de diez PNG oficiales, las URLs de los cinco iconos `flight_*` de la referencia y la guía de selección están en [Copa aircraft liveries catalog](./docs/design-references/copa-liveries-catalog.md). ## Explorador visual de assets La ruta `/assets/` del Copa Digital Design System funciona como catálogo de descubrimiento y verificación visual. Mantiene el landing principal enfocado en el prompt y separa la consulta intensiva de assets en una herramienta propia. ### Alcance - Iconos de Website Patterns: Informative, Alerts, Regular con color, Regular standalone, Payment, Flags y Social. - Pictogramas de Components con variantes Background, Transparent y Monochrome. - Logos corporativos, de producto y de Digital Marketing con tratamiento sobre superficie sólida. - Modelos de flota y liveries oficiales confirmados. - Archivos Gilroy y Suisse Int’l documentados, con specimen visual cargado bajo demanda. ### Modelo de uso 1. Busca por nombre, filename, familia o categoría. 2. Filtra por tipo, categoría y variante. 3. Comprueba el asset sobre fondo claro, oscuro o automático. 4. Ajusta XS–XL cuando se trate de iconos o pictogramas. 5. Copia la URL oficial o un snippet de implementación. 6. Abre el asset original cuando necesites revisar el archivo en su fuente. El explorador usa un manifiesto generado desde los catálogos verificados. Iconos, pictogramas, logos y liveries se previsualizan directamente desde `copaair.com`; las 28 fuentes WOFF verificadas se conservan también dentro del sitio exclusivamente para que el specimen visual funcione sin depender de CORS, mientras la URL que se copia sigue siendo la oficial. No reconstruye los archivos ni modifica su contenido. Los resultados se paginan para no solicitar cientos de imágenes simultáneamente. ### Densidad del catálogo (convención de trabajo) - El explorador es una herramienta de consulta, no un landing promocional: su shell puede ocupar casi todo el ancho disponible, con un máximo de 1880px para controlar la longitud de línea y el tamaño de las tarjetas. - La cuadrícula usa tarjetas de al menos 215px y puede mostrar hasta ocho columnas en pantallas amplias. Debe reducir columnas automáticamente; no se fuerzan ocho columnas cuando nombres, metadata o acciones dejan de ser legibles. - El área de preview tiene una altura compacta y estable de `128px`. En Iconos y Pictogramas, el selector XS–XL debe mostrar completos los cinco tamaños oficiales —`40`, `48`, `56`, `72` y `96px`— sin recorte ni distorsión; permanece deshabilitado en Todos, Logos, Liveries y Tipografías porque esas familias usan escalas propias. - Las cards mantienen altura uniforme por fila y fijan las acciones al final para facilitar el escaneo horizontal. En móvil pasan a una columna y las acciones se apilan. - Esta densidad es específica del explorador de assets y no sustituye las reglas de composición de páginas editoriales o promocionales. ### Gobierno y accesibilidad - Un asset entra al manifiesto solo después de documentar su filename y URL oficial; no se generan slugs por analogía. - Un fallo de preview se comunica con texto y no convierte una URL candidata en verificada. - Búsqueda, filtros, tamaño y fondo tienen labels visibles y funcionan por teclado. - El resultado conserva nombre visible, filename, familia, categoría y variante para reducir ambigüedad. - Las previews son decorativas porque la metadata visible comunica la identidad; el snippet de logo sí incluye el nombre de marca como `alt` inicial. - El fondo oscuro o claro es una herramienta de comprobación. No autoriza una combinación que contradiga la guía de uso del logo o del asset. - Las tipografías se cargan solo para las cards visibles. Existencia del archivo no equivale a autorización de uso en cualquier peso. Estado actual: publicado en Cloudflare Pages y validado en producción. ## Sistema de páginas Copa: shell, flujo y composición Cinco vistas desktop entregadas —Homepage, Todos los temas, Información de equipaje, ConnectMiles y Experiencia a bordo— confirman que la identidad de Copa no se limita a tokens o componentes aislados. También depende de un **flujo de página**, un shell compartido y una jerarquía que cambia según la tarea. La documentación detallada, los blueprints y las cinco fuentes preservadas están en [Copa web page composition and flow patterns](./docs/design-references/copa-web-page-composition-patterns.md). ### Clasificación antes de componer | Arquetipo | Tarea dominante | Secuencia base | | --- | --- | --- | | Homepage / discovery | Buscar un vuelo y descubrir contenido relevante. | Header → buscador → accesos rápidos → destinos/promos/servicios → preparación → footer. | | Hub de temas | Encontrar una categoría o ruta de información. | Header → hero → grupo principal expandido → accordions secundarios → footer. | | Landing de categoría | Elegir el siguiente paso dentro de un tema. | Header → hero → rutas principales → gestiones/educación → alert → pasos → footer. | | Producto / loyalty | Comprender beneficios y actuar. | Header → hero → navegación local → beneficios → CTA → formas de obtener/usar → footer. | | Editorial / experiencia | Explorar una propuesta mediante narrativa y detalle. | Header → hero → imagen/resumen → accesos → historias → comparativas/detalle → footer. | No empieces por una grilla de cards. Define primero la tarea dominante, las necesidades del usuario y el arquetipo; luego elige componentes por función. ### Shell global - En páginas completas de Copa, el header Primary / Main contiene la marca al inicio, navegación principal en el centro y utilidades —país/idioma, avisos y sesión— al extremo opuesto. - El header es navegación global. Una campaña no debe duplicarlo ni crear otro nivel global dentro del contenido. - El footer corporativo usa una superficie gris clara y un orden estable: lockup Copa + Star Alliance y país/idioma; columnas de enlaces; divisor; premios y redes; copyright. - Header y footer se heredan del host cuando la pieza es un módulo embebido. Solo una página standalone los incluye, una vez cada uno. - No reconstruyas lockups, premios, social icons ni navegación si existe el componente corporativo del host. - En mobile, la navegación global se compacta y los grupos secundarios del footer pueden convertirse en accordions sin ocultar identidad, país/idioma, legales esenciales o copyright. - Para el footer standalone de Copa Digital Design System, usa `logo_dm_horizontal_color.svg`: la variante es transparente y se coloca sobre Grey 100 o sólido claro. `logo_dm_horizontal_negative.svg` contiene una superficie propia y se reserva para el contexto oscuro correspondiente. ### Hero, orientación y navegación local - Los interiores comienzan con hero Primary / Main full-width: breadcrumb, una H1 directa y un resumen opcional. - La imagen editorial, si existe, comienza después del hero. No es obligatoria para establecer jerarquía. - Breadcrumbs expresan la arquitectura real del sitio, no el historial del navegador. - La navegación local puede seguir al hero en una fila compacta de links con iconos y labels; permanece secundaria respecto a la tarea principal. - Homepage es la excepción funcional: el buscador de vuelos domina y puede solaparse visualmente entre la región azul y el contenido blanco. ### Selección de componentes por función | Necesidad | Patrón | | --- | --- | | Navegar a un tema | Link temático sin card: pictograma, título, resumen y chevron. | | Comparar beneficios o modalidades | Cards outline con estructura equivalente. | | Destacar una historia o promoción | Banner dividido o card editorial con región sólida para el copy. | | Marcar un cambio importante de capítulo | Banda Light Blue full-bleed con contenedor interno. | | Comunicar una condición contextual | Alert inline con icono oficial, texto y enlace. | | Explicar acciones en orden | Lista ordenada; la numeración es semántica, no decorativa. | | Reducir muchas categorías secundarias | Accordion accesible; lo crítico permanece visible. | | Presentar detalle extenso | Flujo editorial con headings, párrafos, listas e imágenes relacionadas. | Reglas: - Los links sencillos no necesitan card; las cards representan unidades semánticas delimitadas. - No encierres todos los módulos en rectángulos con sombra. El espacio, el heading y la alineación agrupan antes que el borde. - Los banners con fotografía separan el copy en una superficie sólida; no colocan logos ni texto crítico directamente sobre una imagen variable. - Primary / Main estructura header y hero; White/Paper domina lectura; Light Blue separa capítulos reales. - Alterna módulos anchos, grids, links sin card y bandas según la tarea para evitar una página visualmente plana o repetitiva. - Los pictogramas Background son una señal repetida para temas y beneficios; los chevrons indican navegación, pero el label sigue nombrando el destino. ### Jerarquía de acciones - Reserva el botón sólido para el siguiente paso dominante. - Usa outline o link con chevron para explorar o profundizar. - Una CTA bar full-width es una transición de alta saliencia hacia una acción transversal; incluye microcopy y resultado claro. - Una sección no debe contener varias acciones distintas con el mismo peso. - No ocultes requisitos, alertas, precios, elegibilidad o el siguiente paso dentro de accordions. ### Semántica, responsive y accesibilidad - Mantén `header`, `nav`, `main` y `footer` como landmarks distintos. - Conserva una H1 y una arquitectura de headings por capítulos. - DOM, lectura, layout y foco permanecen en el mismo orden cuando las columnas se apilan. - Los banners divididos apilan imagen y contenido en mobile sin mover el texto crítico sobre la fotografía. - Los accordions usan `button`, `aria-expanded`, `aria-controls` y panel asociado. - Una card completamente clicable tiene un único destino y evita links anidados. - Verifica contraste, foco, zoom, reflow, áreas táctiles, expansión de idioma y textos alternativos. Estas reglas son evidencia visual y convenciones operativas derivadas de páginas aprobadas. No prueban por sí solas medidas exactas de grid, gutters, breakpoints o estados interactivos; esos valores siguen pendientes de la implementación oficial. ## 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 ### Web e interfaces 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. ### PowerPoint, Google Slides y PDF 1. Abrir el archivo en la aplicación objetivo y revisar todos los layouts del theme o slide master utilizados. 2. Confirmar que Gilroy y Suisse Int’l se renderizan realmente y que no existe sustitución silenciosa. 3. Renderizar todas las slides y revisar clipping, overflow, line-breaks, alineación, contraste y consistencia. 4. Comparar el archivo editable con el PDF exportado. 5. Verificar que logos, iconos, pictogramas, flags y liveries sean oficiales, estén embebidos y conserven su proporción y variante. 6. Revisar tablas, charts, datos, fuentes, fechas, copy, disclaimers y notas del presentador. 7. Confirmar legibilidad en modo presentación y no únicamente dentro del editor. 8. Revisar orden de lectura, títulos de slide, alt text y texto editable cuando aplique. 9. Comprobar que el deck no introduzca patrones visuales prohibidos ni una paleta estructural ajena al sistema. 10. Probar el archivo en el equipo o entorno desde el que se presentará cuando sea posible. ## 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. - 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. - Filenames y láminas detalladas de las categorías Funcionales, Check-in y Adicionales; no deben inferirse a partir del nombre visible. - 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. - Template, theme y slide master corporativo oficial para PowerPoint, Google Slides o Keynote. - Distribución autorizada de las fuentes desktop Gilroy y Suisse Int’l, capacidades de embedding y fallback aprobado para equipos sin las familias instaladas. - Tamaños mínimos, safe areas, márgenes y posiciones oficiales de logos para presentaciones. ## 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) - [Cards con línea de acento superior y lateral: referencia prohibida](./docs/design-references/copa-prohibited-accent-border-cards.png) - [Explorador de assets — referencia de densidad full-width](./docs/design-references/copa-asset-explorer-density-feedback.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 — catálogo de logos, fondos y URLs](./docs/design-references/copa-logos-catalog.md) - [Copa — inventario de archivos de logos](./docs/design-references/copa-logo-file-inventory.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 Components — catálogo CDN de pictogramas](./docs/design-references/copa-pictograms-cdn-catalog.md) - [Copa Components — nomenclatura CMS y construcción de URL](./docs/design-references/copa-pictograms-cms-naming.png) - [Copa Website Patterns — catálogo CDN de iconos y correcciones del landing](./docs/design-references/copa-icons-cdn-catalog.md) - [Copa — catálogo de liveries e iconos de vuelo](./docs/design-references/copa-liveries-catalog.md) - [Copa Website Patterns — Regular, iconos de vuelo](./docs/design-references/copa-regular-flight-icons.png) - [Copa — patrones de composición y flujo de páginas](./docs/design-references/copa-web-page-composition-patterns.md) - [Copa Homepage — vista desktop](./docs/design-references/copa-page-flow-homepage.png) - [Copa Todos los temas — vista desktop](./docs/design-references/copa-page-flow-all-topics.png) - [Copa Información de equipaje — vista desktop](./docs/design-references/copa-page-flow-baggage-information.png) - [Copa ConnectMiles — vista desktop](./docs/design-references/copa-page-flow-connectmiles.png) - [Copa Experiencia a bordo — vista desktop](./docs/design-references/copa-page-flow-onboard-experience.png) - [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) - [Copa producción — título principal](./docs/design-references/copa-main-title-production.png) - [Copa producción — estilos computados del título principal](./docs/design-references/copa-main-title-computed.png) - [Copa producción — H2 de sección](./docs/design-references/copa-h2-production.png) - [Copa producción — estilos computados del H2](./docs/design-references/copa-h2-computed.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-26:** el sitio público incorporó una navegación global consistente hacia Inicio, Guía, Assets y Seguridad; el estado activo es explícito y los cuatro destinos permanecen visibles en móvil. - **2026-08-26:** se incorporó una ruta separada de revisión de seguridad y cumplimiento para presentaciones, documentos, assets, landings, aplicaciones y APIs. El baseline público protege la confidencialidad de las políticas fuente, exige evidencia, distingue hallazgos y bloqueos de liberación y no permite que un LLM certifique cumplimiento o apruebe excepciones. - **2026-08-25:** se confirmaron desde producción el título principal desktop en Gilroy Bold `76/80`, peso `700`, tracking `-1.008px`, y el H2 desktop en `32/40`, peso `700`, tracking `-0.496px`; se verificó y añadió `Gilroy-Bold.woff` desde el CDN oficial sin reasignar ExtraBold. - **2026-08-11:** se añadió continuidad operativa para agentes con red o fuentes restringidas: deben inspeccionar assets embebidos en PPTX, agotar fuentes locales, avanzar con el trabajo independiente del bloqueo y escalar una dependencia puntual sin trasladar al usuario la producción completa. - **2026-08-11:** la guía se convirtió en un sistema multiformato y añadió reglas operativas para PowerPoint, Google Slides y PDF: narrativa, theme/master, fuentes desktop, logos, iconos, pictogramas, charts, revisión de decks existentes y validación de exportación. - **2026-08-11:** la distribución pública dejó de depender de `fetch and follow` y añadió referencia HTML indexable, búsqueda, Markdown descargable y texto plano; cuando un LLM no puede navegar debe solicitar la guía para subirla y no sustituirla por otro sistema. - **2026-08-10:** el selector XS–XL del explorador quedó limitado a Iconos y Pictogramas y sus cinco tamaños oficiales ahora se muestran completos dentro de un preview estable de 128px. - **2026-08-10:** se prohibieron las cards, cajas y paneles con líneas de acento decorativas en el borde superior, izquierdo o en esquina; el prompt exige retirarlas y usar jerarquía, superficies, bordes uniformes o iconografía oficial. - **2026-08-10:** el explorador adoptó un shell casi full-width de hasta 1880px, previews compactos y una cuadrícula responsive de hasta ocho columnas; la convención queda limitada a esta herramienta de consulta. - **2026-08-10:** se incorporaron al catálogo 281 iconos oficiales adicionales: 178 Regular sin segmento de color, 51 Payment, 48 Flags y 4 Social; sus rutas fueron verificadas y el explorador pasó a 899 entradas. - **2026-08-10:** se corrigió el inventario de aeronaves con la ruta canónica `webassets/images/fleet/`, cuatro modelos y seis liveries especiales en PNG; el SVG promocional heredado de ConnectMiles dejó de tratarse como asset de flota. - **2026-08-06:** se publicó `/assets/` como explorador visual de 618 entradas verificadas —iconos, pictogramas, logos, liveries y tipografías— con búsqueda, filtros, fondos de preview, tamaños y copia de URL o snippet. - **2026-08-06:** se documentaron el shell, cinco arquetipos de página y la gramática de composición observada en Homepage, Todos los temas, Información de equipaje, ConnectMiles y Experiencia a bordo; el footer interno usa el logo horizontal color transparente de Digital Marketing sobre sólido claro. - **2026-08-06:** se documentó el CDN oficial de pictogramas, sus sufijos Background/Transparent/Monochrome, dieciséis categorías y 162 nombres visibles de trece inventarios; Funcionales, Check-in y Adicionales quedan pendientes de filenames. - **2026-08-06:** se corrigió el uso de logos a superficies sólidas claras u oscuras, se prohibió su colocación directa sobre gradientes e imagen variable y se inventariaron los SVG alojados en la base oficial. - **2026-08-06:** se habilitó la reutilización transversal de liveries oficiales y se separaron las aeronaves de los cinco iconos funcionales `flight_*` de la familia Regular; el inventario fue corregido el 10 de agosto con la fuente oficial de flota. - **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.