Perfiles · Reserva
Quedó libre, volvió y metió el penal que eliminó a Boca
La historia de Santiago Meloni: de quedar libre en Octava a definir un Superclásico de Reserva.
PorPablo Molina5 jul
Nota destacada
/01
Colores oficiales de River
Los tres colores con los que el club se identifica oficialmente. Son la base de todo el sitio.
Rojo River
Acentos, links, llamados a la acción
Negro
Bordes, texto principal, fondos oscuros
Blanco
Fondos limpios, texto sobre oscuro
/02
Paleta del sitio
A partir de los oficiales se derivan estos tonos para usar en el sitio: variantes de rojo, distintos grises y dos beiges para los fondos.
#EB192E
Rojo
Acentos · CTAs
#C21020
Rojo profundo
Hover / pressed
#FEE5E8
Rosa suave
Fondos sutiles
#0A0A0A
Tinta
Texto principal
#141414
Tinta elevada
Fondos oscuros
#FAFAF7
Papel
Fondo general
#FFFFFF
Papel puro
Cards y superficies
#111113
Texto fuerte
Títulos
#3A3A3F
Texto medio
Cuerpo
#6B6B72
Texto suave
Meta y fechas
#C8C8CD
Borde claro
Bordes finos
#E4E4E7
Borde muy claro
Separadores
/03
Tipografías
Cuatro tipografías que conviven. Una para títulos editoriales, otra para marcadores y scores, una para el texto común y la última para datos y fechas.
Título grande (Newsreader)
Inferiores
Título mediano (Newsreader)
Un título editorial
Título mediano en italic rojo
Riverplatense
Texto de las notas (Inter)
El pibe llegó a los once con una zurda que parecía de jugador de veinticinco. Lo vio por primera vez Miguel, en una cancha de tierra, con el viento cruzado y un arco sin redes.
Marcadores y scores (Anton, sólo números)
River 3 — 0 Boca
Datos, fechas y firmas (mono)
Por Tomás Rivera · 18 Abr · 1:27
Etiqueta arriba del título (rojo)
Entrevista · Reserva · Nuevo
/04
Marcos y sombras
El sello visual del sitio: borde negro grueso y una sombra desplazada en lugar de blureada. Hay seis variantes según cuánto se quiere destacar la pieza.
Marco simple
Solo borde
Sombra al pasar el mouse
Pasale el mouse
Marco con sombra (jerarquía alta)
Para destacadas
Sombra roja (acento)
Acento rojo
Marco invertido (sobre oscuro)
Fondo negro
Sombra roja grande (newsletter)
Caja newsletter
/05
Botones
Botones con marco y sombra. Al pasar el mouse la sombra se aplasta y el botón se mueve para dar sensación de click. Se adaptan al fondo donde están: oscuros sobre blanco, claros sobre negro.
Sobre fondo claro
Sobre fondo oscuro
Botón del newsletter (rojo)
Newsletter/06
Filtros y etiquetas
Para marcar el tipo de nota, una división, un jugador relacionado, o cualquier dato corto.
Entrevista · ReservaTomás Rivera · 18 Abr · 1:27
/07
Firma del autor
Aparece en cada card de nota: foto circular (o iniciales si no hay foto) + nombre + fecha. Hay un tamaño normal y uno un poco más grande.
Pablo Molina5 jul
Pablo Molina5 jul
SFSin Foto5 jul
/09
Selectores desplegables
Para filtrar el archivo de notas. Se abren al hacer click y se cierran al hacer click afuera o apretar Escape.
Dropdowns compactos con label + valor. Rellenos (fondo ink) cuando hay selección, outline cuando están en estado default. Cerrar con click afuera o Escape.
Estado · tipo=null · division=reserva · formato=null
/10
Cuerpo de una nota
Así se ve el texto adentro de una nota: primera letra grande en rojo, subtítulos serif, y bloques de cita con borde rojo a la izquierda.
Desde los once años, cada vez que River Infantiles llegaba a un desempate, el banco miraba al mismo pibe. Hoy tiene dieciséis, juega en Cuarta y carga sobre la espalda una estadística rara: doce penales pateados en torneos oficiales, doce goles.
La rutina del miércoles
La armó con el preparador de arqueros. Cada miércoles, al final del entrenamiento, se quedaba media hora extra. No a pegarle fuerte. A mirar.
«No es algo que yo haya pedido. Un día me lo dieron y no lo solté más.»
El método
A entender cómo se movía el arquero antes de que la pelota saliera del pie.
/11
Frase destacada
Una cita resaltada con borde rojo a la izquierda, en italic, para llamar la atención sobre algo que dijo el entrevistado.
«Cuando te ponés esta camiseta, nada es por casualidad. Es casi como firmar algo sin papeles.»
— Franco Mastantuono · Entrevista 17 Abr
/12
Separadores
Líneas finas y etiquetas chiquitas que se usan para dividir secciones.
Línea fina sobre fondo claro
Línea fina sobre fondo oscuro
Etiqueta con guión rojo
Seguí bajando
Etiqueta de sección
03 · Archivo completo
/13
Cards de nota
Una sola card adaptada a tres tipos de contenido: video corto (vertical), video largo (horizontal) y nota escrita.
/15
Card grande
La que aparece a la izquierda del bento de la home, ocupando dos columnas. Marco con sombra fuerte para destacar.
/16
Nota principal de la portada
La primera pieza arriba de todo: texto a la izquierda y foto a la derecha, marco con sombra grande.
/17
Lista de noticias
Caja al costado del bento con noticias breves. Cada item con número, foto chiquita y título.
/18
Lista numerada
Estilo lo último de la cantera: número rojo grande, tipo y división, título y fecha.
- 015 jul
Entrevistas · Reserva
Meloni: el debut soñado en el Superclásico
- 024 jul
Análisis · Cuarta
El plan de la camada 2007-2008: de la Quinta a la Reserva
- 035 jul
Perfiles · Reserva
Quedó libre, volvió y metió el penal que eliminó a Boca
- 041 jul
Entrevistas · Quinta
Cómo se forma un zaguero: charla con la Quinta
- 055 jul
Crónicas · Reserva
La Reserva ganó el Superclásico por penales y es finalista
/21
Barra de navegación — variantes de color
Cinco esquemas para la parte de arriba, todos con la paleta del sitio. La barra de secciones (abajo) queda negra en todas; lo que cambia es la franja superior y el masthead del medio.
A · Capas de tinta (actual)
Rojo profundo → tinta elevada → tinta. Profundidad sutil.
Mar 27 MayEdición · Nº 001
Inferiores R.Notas
DivisionesNotasEntrevistasNews
B · Rojo arriba
Franja roja plena arriba, el resto negro.
Mar 27 MayEdición · Nº 001
Inferiores R.Notas
DivisionesNotasEntrevistasNews
C · Monolito negro
Todo negro, el rojo solo como acento.
Mar 27 MayEdición · Nº 001
Inferiores R.Notas
DivisionesNotasEntrevistasNews
D · Masthead claro
Franja roja, masthead blanco, secciones negras.
Mar 27 MayEdición · Nº 001
Inferiores R.Notas
DivisionesNotasEntrevistasNews
E · Rojo dominante
Masthead rojo pleno entre dos negros.
Mar 27 MayEdición · Nº 001
Inferiores R.Notas
DivisionesNotasEntrevistasNews
Botones de redes
Aparecen fijos a la izquierda en todas las páginas (en pantallas grandes). Llevan a las redes del periodista: X, Instagram, TikTok, YouTube, Facebook.
(Acá hay un ejemplo estático. En el sitio aparecen fijos a la izquierda y siguen el scroll.)