Lo que sostiene el sitio de Elogio: concepto, tokens, wireframes, componentes con todos sus estados y lo que falta al llegar el contenido real.
Concepto
El elogio rompe la página: cada cosa que merece atención abre un hueco por donde entra la luz.
La idea sale del logo, donde una estrella parte la palabra en dos. En el sitio, esa estrella es la ventana por la que se ven las imágenes más importantes.
Principios. Una sola audacia por pantalla. Cada sección se comporta como su disciplina. El color es tinta de imprenta, plano y sin degradados. El lector que llega desde el celular es el primero en la fila.
Tokens
Color
Papel#FAFDF0 Fondo. Del logo.
Tinta noche#070733 Texto y modo oscuro.
Azul Elogio#0208F0 Acento fuerte. Del logo. Música.
Sala#02021C Campos oscuros. Tinte de la noche.
Azul claro#AEB8FF Enlaces y estados sobre fondo oscuro. Tinte del azul.
Contraste comprobado (mínimo AA: 4.5:1)
Par
Valores
Razón
Tinta sobre papel
#070733 / #FAFDF0
18.7:1
Azul sobre papel
#0208F0 / #FAFDF0
8.9:1
Música sobre papel
#0208F0 / #FAFDF0
8.9:1
Apagado sobre papel
#5A5C70 / #FAFDF0
6.4:1
Error sobre papel
#B3001B / #FAFDF0
6.9:1
Papel sobre azul
#FAFDF0 / #0208F0
8.9:1
Azul claro sobre azul
#AEB8FF / #0208F0
4.8:1
Papel sobre sala
#FAFDF0 / #02021C
19.8:1
Tinta sobre papel (botón en oscuro)
#070733 / #FAFDF0
18.7:1
Papel sobre noche (oscuro)
#FAFDF0 / #070733
18.7:1
Música sobre noche (oscuro)
#AEB8FF / #070733
10.2:1
Apagado sobre noche (oscuro)
#A9ABC2 / #070733
8.5:1
Error sobre noche (oscuro)
#FFB3C0 / #070733
11.5:1
Azul claro sobre sala
#AEB8FF / #02021C
10.8:1
Tipografía
Piazzolla para titulares, citas y cartelas. Archivo para texto corrido, etiquetas e interfaz.
--t-xs
13–14 px
Etiquetas y metadatos
--t-s
15–16 px
Bajadas de tarjeta, interfaz
--t-cuerpo
17–19 px, interlineado 1.6
Texto de lectura, máx. 65 caracteres
--t-m
20–24 px
Titular compacto
--t-l
24–36 px
Titular medio, bajada de artículo
--t-xl
32–60 px
Titular grande, citas
--t-2xl
44–104 px
Portada y artículo
--t-cartel
84–448 px (25vw)
Palabra de sección
Espacio, forma y movimiento
Espacio
--e-1 a --e-7: 4, 12, 20, 32, 52, 80 y 80–160 px. Margen lateral fluido de 16 a 56 px.
Radios
--r-0: 0 en todo. --r-punto: solo tiradores del audio.
Sombras
--s-dura: 5 px sólidos, sin difuminar y solo en hover.
Movimiento
--m-rapido 160 ms, --m-medio 320 ms, --m-lento 700 ms. Curva cubic-bezier(.2,.8,.2,1). Todo se apaga con prefers-reduced-motion.
Puntos de quiebre
360 (base), 768, 1024 y 1440 px.
Wireframes
Inicio
INICIO 360 → 1440
┌──────────────────────────────────────────┐
│ logo nav ············ buscar tema menú │ fija, se compacta
├──────────────────────────────────────────┤
│ lema ╲ ╱ │ campo azul
│ ─── ✶ FOTO ─── │ estrella crece
│ etiqueta ╱ ╲ │ con el scroll
│ TITULAR ENORME │
│ bajada, autor │
├──────────────────────────────────────────┤
│ Lo último │ móvil: carrusel
│ ┌─────┐ ┌───┐ ┌─────────┐ │
│ │ 4:5 │ │1:1│ │ 16:9 │ │
│ │ │ └───┘ └─────────┘ │
│ └─────┘ ┌───┐ compacta │
├──────────────────────────────────────────┤
│ MÚSICA (palabra a 25vw) │ campo azul
│ ┌───────────────┐ lema │
│ │ grande 1:1 │ media 4:5 │
│ └───────────────┘ compacta x2 │
├──────────────────────────────────────────┤
│ Cine lema │ sala oscura
│ ████ pantalla 2.39:1, a sangre ████ │
│ titular │
│ [16:9] [16:9] [16:9] │
├──────────────────────────────────────────┤
│ |cartela ✶ obra estrella │ muro blanco
│ |Arte │
│ [4:5] [4:5] │
├──────────────────────────────────────────┤
│ Fotos y video │ campo noche
│ [foto 3:2 ··········] cobertura │
│ concierto, fotógrafo cobertura, video │
├──────────────────────────────────────────┤
│ Agenda │
│ 13 nov Título Lugar etiqueta│ x5
├──────────────────────────────────────────┤
│ Boletín [correo][Suscribirme] ✶ │ campo azul
├──────────────────────────────────────────┤
│ Nosotros (manifiesto) │ Colabora │
├──────────────────────────────────────────┤
│ pie: lema, enlaces, redes, LOGO GIGANTE │
└──────────────────────────────────────────┘
Artículo
ARTÍCULO
┌──────────────────────────────────────────┐
│▓▓▓▓▓▓ barra de progreso │
│ cabecera │
├──────────────────────────────────────────┤
│ imagen o video de apertura, a sangre │
│ ┌───────────────────┐ │
│ │TITULAR que muerde │ la imagen │
│ └───────────────────┘ │
│ etiqueta, bajada en cursiva │
│ ─ autor, fotos, fecha, tiempo ───── │
├──────────────────────────────────────────┤
│ Capitular + cuerpo, 65 caracteres │
│ ... │
│ ████ cita a sangre con color de sección │
│ ... │
│ ░░░░ imagen a sangre ░░░░░░░░░░░░░░░░░░ │
│ ... │
│ [galería asimétrica → lightbox] │
│ ... │
│ Compartir: WhatsApp, X, enlace │
├──────────────────────────────────────────┤
│ Sigue por aquí [ ] [ ] [ ] │
│ Boletín, pie │
└──────────────────────────────────────────┘
Agenda
AGENDA
┌──────────────────────────────────────────┐
│ AGENDA (titular grande) │
│ [Lista | Calendario] │
│ Disciplina: Todas Música Cine Arte │
│ Ciudad: Todas Manizales Bogotá │
│ Fecha: [esta semana ▾] │
├──────────────────────────────────────────┤
│ noviembre ───────────────────────────── │
│ 13 Título del evento Lugar, ciudad tag│
│ 14 Título del evento Lugar, ciudad tag│
│ 19 ... │
├──────────────────────────────────────────┤
│ Calendario: L M M J V S D │
│ · · · · ● ● · │
│ El día seleccionado filtra la lista. │
├──────────────────────────────────────────┤
│ Vacío: "Sin eventos con estos filtros" │
│ [Quitar filtros] [Proponer un evento] │
└──────────────────────────────────────────┘
La estrella recorta solo tres cosas: la portada, una obra en Arte y el botón de video. Si aparece en cada tarjeta deja de ser un evento.
El duotono se hace con CSS (mix-blend-mode), no sobre el archivo. Una foto real en color adopta el tratamiento sin pasar por Photoshop, y puedes retirarlo por pieza quitando la clase.
Cada sección tiene un lenguaje propio: cartel, sala oscura, muro de galería. La tarjeta es la misma; cambia el contexto.
Piazzolla y Archivo salen de fundiciones argentinas, una elección latinoamericana y gratuita. Piazzolla tiene cortes afilados que conversan con las puntas del logo.
No hay etiquetas en mayúsculas ni radios por defecto. Los únicos círculos son los tiradores del audio.
En Fotos y video las imágenes van sin duotono ni grano: el trabajo de los fotógrafos se muestra como lo entregaron, y cada cobertura lleva su crédito.
La portada no retiene el scroll: alguien que llega desde Instagram baja de inmediato y la estrella crece mientras tanto.
El menú, el buscador y la galería usan dialog nativo, que da foco atrapado y tecla Esc sin librerías.
Qué ajustar con el contenido real
Completar lo resaltado en la Política de datos, retirar el aviso de borrador y pasarla por revisión legal antes de publicar.
Revisar las preguntas del Quiz con alguien de la escena local: salieron de prensa y fuentes públicas en noviembre de 2026. Los números de edición cambian cada año.
Revisar los lugares del mapa: salieron de Google Maps en noviembre de 2026 y pueden cerrar o cambiar de nombre.
Agregar enlaces reales de boletas en data-boleta y reemplazar las ediciones de ejemplo del boletín.
Poner ig.html en la bio de Instagram cuando el sitio esté publicado, y revisar qué pieza lleva como destacada. Hoy «Lo último» y los eventos se actualizan al reconstruir el sitio.
Reemplazar los marcadores en assets/img por fotos reales: 480, 960 y 1600 px de ancho. Revisar el recorte de la portada, porque una foto con el sujeto al centro funciona mejor dentro de la estrella.
Sustituir textos, autores, eventos y lugares: todos son ficticios y están escritos como ejemplo.
Confirmar el dominio. somoselogio.com es un supuesto usado en canónicas, Open Graph y datos estructurados.
Conectar el boletín y el formulario de Colabora con data-endpoint. Mientras tanto no envía nada y lo avisa en pantalla.
Confirmar que el formulario de Google enlazado desde tu bio de Instagram es el correcto para Colabora.
Agregar el ID de YouTube en data-video y las demás redes en el pie.
Conectar un CMS o generar una página por pieza: hoy todas las tarjetas abren el artículo de muestra y «Cargar más» muestra piezas que ya están en la página.
Reemplazar historia, convocatorias, autores, fotógrafos y coberturas: son ejemplos inventados, no datos de Elogio.
Autoalojar las fuentes en WOFF2 antes de publicar. Ahora vienen de Google Fonts con font-display: swap.
Probar titulares reales de más de 12 palabras en la portada, y pasar una auditoría con lector de pantalla.
