Título de noticia de longitud realista, hasta noventa caracteres, sobre la vida académica
Resumen de hasta ciento sesenta caracteres que anticipa el contenido sin repetir el título. PLACEHOLDER
Posgrados Panamericana
Design system
Colores, tipografía, espaciado y componentes del nuevo sitio de Posgrados, con textos y programas reales. Los bloques marcados como PLACEHOLDER tienen la extensión que tendrá el contenido final, pero no son contenido del cliente.
Color
Estrategia Comprometida: el verde 329 CP es la identidad; los neutros se matizan hacia él; el dorado es línea, icono o texto sobre tinta. Todos los valores de marca son del manual; los neutros de interfaz son decisión B&O.
Superficie
- Base (papel)
--superficie-base · #F7F5F0 - Elevada
--superficie-elevada · #FFFFFF - Marca · 329 CP 100 %
--superficie-marca · #00685E - Marca atenuada · 329 CP 75 %
--superficie-marca-atenuada · #408E86 - Marca tinte
--superficie-marca-tinte · #E3EEEB - Profunda (pie)
--superficie-profunda · #14211F
Contenido y acento
- Tinta
--contenido-primario · #14211F - Secundario
--contenido-secundario · #3A4A47 - Terciario
--contenido-terciario · #5C6B68 - Error
--contenido-error · #A83A2D - Dorado 465 CP
--acento-ceremonial · #B9975B - Dorado metálico 10403 C
--acento-ceremonial-metalico · #AB8855 - Borde suave
--borde-suave · #C9D6D3
Pares medidos (WCAG 2.2)
- 15.21 : 1Tinta sobre papeltexto principal · ✅
- 8.56 : 1Secundario sobre papeldescripciones · ✅
- 5.13 : 1Terciario sobre papelmetadatos, RVOE · ✅
- 6.13 : 1Verde sobre papelenlaces, botón secundario · ✅
- 6.13 : 1Papel sobre verdeCTA, franco cuartel · ✅
- 5.63 : 1Verde sobre tintechip, filtro activo · ✅
- 6.03 : 1Dorado sobre tintatítulos del pie · ✅ único uso del dorado como texto
- 5.83 : 1Error sobre papelmensajes de error · ✅
- 2.7 : 1Dorado sobre papel❌ nunca como texto — solo filete o icono ≥ 24 px
- 3.55 : 1Papel sobre verde 75 %solo texto grande / superficie
Tipografía
Panamericana (serif propia) en títulos y cifras; Seravek (sans humanista) en cuerpo e interfaz. Georgia y Verdana solo como respaldo. Escala fluida entre 360 y 1280 px.
--texto-display · Panamericana 600 · 40→64 px · 1.05
Conoce la oferta de Posgrados que la Universidad Panamericana te ofrece en sus diferentes Campus.
--texto-h1 · Panamericana 600 · 30→44 px · 1.1 · caso más largo del inventario (80 caracteres)
Especialización en Derecho de las Tecnologías de la Información y Comunicación
--texto-h2 · Panamericana 400 · 24→32 px · 1.15
¿Cuál es su valor agregado?
--texto-contador · Panamericana 400 · 32→40 px | --texto-cifra · 22→26 px
150 programas 18 meses · Marzo 2026 · Presencial
--texto-h3 · Seravek 700 · 18→20 px · 1.3
Maestría en Propiedad Industrial, Derechos de Autor y Nuevas Tecnologías
--texto-cuerpo-grande · Seravek 400 · 18→19 px · 1.55 · medida 36 rem
La Maestría en Comunicación Institucional forma profesionales con competencias avanzadas en las áreas comunicación interna, cambio organizacional, manejo de crisis, comunicación digital, gestión de comunicación y construcción de relaciones.
--texto-cuerpo · Seravek 400 · 16 px · 1.6
Anclado a una metodología comprobable, la Maestría en Comunicación Institucional brinda el conocimiento y experiencia de docentes con amplia experiencia internacional que hacen de ésta, una Maestría fundamentada en el trabajo diario con una solidez teórica. Solicita una cita para atención personalizada.
--texto-etiqueta · Seravek 500 · 14 px | --texto-pequeno · Seravek 400 · 14 px · 1.5
Modalidad · Duración · Sede
RVOE SEP 20200723 de fecha 15/10/2020, Plan 2020, modalidad escolarizada, Augusto Rodin 498, Col. Insurgentes Mixcoac, Benito Juárez, CP 03920, Ciudad de México, México.
| Paso | Familia · peso | 360 → 1280 | Interlineado | Uso |
|---|---|---|---|---|
--texto-display | Panamericana 600 | 40 → 64 | 1.05 | Hero, portada de sede |
--texto-h1 | Panamericana 600 | 30 → 44 | 1.10 | Título de página, nombre de programa |
--texto-h2 | Panamericana 400 | 24 → 32 | 1.15 | Secciones |
--texto-contador | Panamericana 400 | 32 → 40 | 1.00 | Contador de resultados |
--texto-cifra | Panamericana 400 | 22 → 26 | 1.20 | Valor de dato clave |
--texto-h3 | Seravek 700 | 18 → 20 | 1.30 | Nombre en listado, subtítulos |
--texto-cuerpo-grande | Seravek 400 | 18 → 19 | 1.55 | Intro de ficha |
--texto-cuerpo | Seravek 400 | 16 | 1.60 | Texto corrido, campos, nav |
--texto-etiqueta | Seravek 500 | 14 | 1.40 | Etiquetas, chips (nunca versalitas) |
--texto-pequeno | Seravek 400 | 14 | 1.50 | RVOE, legales, metadatos |
--texto-boton | Seravek 500 | 16 | 1.00 | Botones |
Espaciado y ritmo
Base 8 px. Tres valores de sección que se alternan según el registro: compacta (Product), sección (mixto), amplia (Brand). Un solo valor uniforme está prohibido.
--espacio-hilo · 4--espacio-compacto · 8--espacio-base · 16--espacio-bloque · 24--espacio-grupo · 32--espacio-modulo · 48--espacio-seccion-compacta · 64--espacio-seccion · 96--espacio-seccion-amplia · 128Ritmo en una ficha (Brand → Product → mixto)
Franco cuartel (Brand)
--espacio-seccion-compacta
Datos clave · plan de estudios (Product)
--espacio-seccion
Asesor · formulario (mixto)
--espacio-seccion-amplia
También en otra sede · eventos (Brand)
Grid y contenedores
12 columnas a ≥ 900 px, 6 entre 600 y 899, flujo por debajo. Canal 24 px. Máximo 1200 px, anclado a la izquierda. Breakpoints provisionales: 600 · 900 · 1200, por dónde se rompe el contenido.
123456789101112
Franco cuartel en ficha: bloque de marca 5/12, contenido 7/12. Columna de lectura: 36 rem. Formulario: 32 rem.
Radios, bordes y elevación
Voz de marca: tela, roble, filete. Materiales con canto. Radio máximo 2 px; la pastilla solo en chips. Sombra únicamente en lo que flota.
--radio-nulo · 0
--radio-campo · 2
--radio-pastilla
--borde-fino · 1
--borde-medio · 1.5
--borde-grueso · 2
--borde-acento · 4
--sombra-flotante
Movimiento · L2+
El movimiento se gasta donde ayuda a decidir, nunca al hacer scroll. Tres momentos: el revelado del bloque de marca al entrar en pantalla (una vez), el contador y reacomodo al filtrar, y la respuesta al cursor en sedes y mosaico. Más micro-interacciones de estado: chips, acordeón, tarjetas, menú. Duraciones 120 / 200 / 400 ms, dos curvas, solo opacity, transform y colores. Con prefers-reduced-motion todo ocurre sin transición y el contador se anuncia por región viva.
Ver el revelado en Franco cuartel, el reacomodo en Filtros, contador, tarjeta y el hover en Sedes y mosaico.
Sistema gráfico · Franco cuartel + Tahalí
El bloque de marca aloja título, contexto y CTA sobre verde sólido; el tahalí (60°, una vez por página) cruza el borde entre bloque y foto o papel. Texto nunca sobre la foto.
Variante campaña (Inicio) — referencia ESIC
Titular de campaña ≤ 40 caracteres PLACEHOLDER · bloque 7/12 · display máx. 56 px y 12 ch · foto con punto focal · revelado una sola vez al entrar en pantalla · el tahalí nace en el borde y no cruza el centro de la foto
Posgrados Panamericana
Tu siguiente nivel empieza aquí.
150 programas de posgrado en tres campus, con horarios pensados para quien trabaja. PLACEHOLDER
Variante cabecera de ficha — con Datos clave y Chip de nivel
Contenido real de la ficha actual de Maestría en Comunicación Institucional (CDMX)
Maestría en Comunicación Institucional
- Inicio de clases
- Marzo 2026
- Horario
- Jueves de 19:00 a 22:00 hrs y sábado de 9:00 a 12:00 hrs
- Modalidad
- Presencial
- Duración
- 18 meses
- Sede
- UP CDMX · Mixcoac
Variante sin foto — sedes sin fotografía propia
Guadalajara, Aguascalientes y Santa Fe mientras no exista material. El tahalí va en 329 al 75 % (permitido por el manual); nada de banco.
Sede
Aguascalientes
31 programas de posgrado en Ingeniería, Empresariales, Pedagogía, Derecho y Agroalimentos.
Cabecera
Cinco elementos en primaria + CTA; secundaria en barra utilitaria a ≥ 900 px; menú en móvil. El enlace actual lleva atributo, línea y peso.
Reduce la ventana a menos de 900 px y pulsa «Menú» para ver el menú móvil (foco atrapado, Esc cierra). El logotipo es el WebP de 137 × 160 px disponible; se sustituye por el vector cuando llegue (B10).
Botón y enlace
Un primario por viewport. El hover del primario no cambia el fondo (el manual no permite variar el 329): añade un filete dorado exterior.
primario
secundario
enlace-botón
deshabilitado / enviando
Pasa el cursor y tabula para ver hover y foco. Enlace en texto: color marca y subrayado; en hover, tinta y subrayado de 2 px.
sobre marca (franco cuartel)
Chip
Filtro (interactivo; el estado activo lleva fondo, texto inverso y ✓) y etiqueta de nivel (estática). La única forma redonda del sitio.
MaestríaDoctoradoEducación continua
Campo y formulario de prospecto
Un solo esquema de campos en todo el sitio. Etiqueta visible siempre; obligatorio en texto; error junto al campo con icono y texto. Campus y programa prellenados en la variante ficha.
Mensaje de estado y estado vacío
Texto, no solo color. El dorado aparece como borde en advertencia, nunca como texto.
Recibimos tu solicitudUn asesor de Comunicación en CDMX te contacta en menos de 24 horas hábiles. PLACEHOLDER
Error: no pudimos enviar tu solicitudTus datos siguen aquí.
Próxima aperturaLa fecha de inicio publicada ya pasó. Consulta con tu asesor la siguiente generación.
Este programa también se imparte en Guadalajara con horario de fin de semana.
No hay programas de Filosofía en Aguascalientes
Prueba quitando un filtro, o revisa la oferta de Filosofía en CDMX.
Filtros, contador y tarjeta de programa
Demo funcional con 18 programas del inventario oficial. El contador es la región viva; al filtrar, las tarjetas se reacomodan a su nueva posición. La tarjeta es tipográfica: los programas no tienen foto.
18programasen la muestra
No hay programas con esa combinación
Prueba quitando un filtro.
Variante destacada (Inicio)
Datos clave sobre papel, bloque de asesor y RVOE
Los cinco datos en la misma posición en las 150 fichas. Un dato ausente se muestra, no se oculta. El asesor es una persona real cuando exista consentimiento; aquí, placeholder.
- Inicio de clases
- Marzo 2026
- Horario
- Jueves de 19:00 a 22:00 hrs y sábado de 9:00 a 12:00 hrs
- Modalidad
- Presencial
- Duración
- 18 meses
- Sede
- UP CDMX · Mixcoac
- Costo
- Consulta con tu asesor
Nombre del asesor PLACEHOLDER
Asesora de admisión · Comunicación · CDMX
asesor@up.edu.mx · Cel. 55 0000 0000
RVOE SEP 20200723 de fecha 15/10/2020, Plan 2020, modalidad escolarizada, Augusto Rodin 498, Col. Insurgentes Mixcoac, Benito Juárez, CP 03920, Ciudad de México, México.
Tarjeta de sede y Mosaico de sede
Cuatro sedes en tres campus. Solo Mixcoac tiene fotografía; las demás usan la variante sin fotografía hasta que exista material (nunca banco).
CDMX · Mixcoac
Augusto Rodin 498, Col. Insurgentes Mixcoac- Santa Fe
CDMX · Santa Fe
Av. Javier Barros Sierra 540, Col. Santa Fe - Guadalajara
Guadalajara
Av. Álvaro del Portillo 49, Ciudad Granja, Zapopan - Aguascalientes
Aguascalientes
José María Escrivá de Balaguer 101, Villas Bonaterra
Mosaico de sede — con fotografía (Mixcoac)
Narrativa PLACEHOLDER de longitud realista (≈ 430 caracteres, como la referencia ESIC)
CDMX · Mixcoac
Texto narrativo sobre la sede: por qué estudiar aquí, qué tiene la ciudad y el campus, cómo se vive el posgrado entre semana por la noche y los sábados. Este párrafo tiene la extensión que tendrá el contenido real, alrededor de cuatrocientos treinta caracteres, para que el bloque se diseñe con la medida correcta y no con una frase corta que después no cabe.
Mosaico de sede — sin fotografía (Guadalajara)
Guadalajara
Texto narrativo sobre la sede con la misma extensión que el anterior, para que la página de Sedes no cojee entre ciudades con foto y ciudades sin foto. Cuando lleguen las seis fotografías propias de Guadalajara, la plantilla cambia sola a la variante con mosaico; el editor no elige la variante. PLACEHOLDER
Guadalajara
Tarjeta de contenido · noticia y evento
Se lanzan solo si hay contenido real para tres meses (B24). Aquí todo es placeholder.
- 28oct
Sesión informativa: Maestría en Finanzas
19:00 · En línea · Empresariales PLACEHOLDER
- 03sep
Open house de posgrados · Guadalajara
10:00 · Presencial Realizado
Pasos, acordeón, migas y anclas
El proceso de admisión es la única secuencia numerada del sitio. El acordeón solo contiene contenido opcional, nunca datos clave ni RVOE.
Envía tu solicitud
Completa el formulario y un asesor te contacta para resolver dudas y revisar tu perfil. PLACEHOLDER
Entrega tus documentos
Texto de longitud realista sobre qué documentos se piden y en qué formato.
Entrevista y admisión
Texto de longitud realista sobre la entrevista y la carta de aceptación.
Contenido opcional y largo: materias por semestre, créditos, seminarios. PLACEHOLDER
Tipos de beca, requisitos y convenios (B25).
Banner de cookies y WhatsApp
Los únicos elementos con sombra: flotan sobre la página. Dos opciones de igual peso en cookies.
Pie
Superficie profunda; el único lugar donde el dorado es texto (6.03:1). Contenido real del pie actual.