Estética años 80: neón, cromo y degradados de atardecer

La estética de los 80 es neón sobre negro, letras cromadas, degradados de atardecer cortados en bandas y una rejilla brillante que corre hasta el horizonte, con un lado más suave de pasteles de Miami y patrones Memphis. Casi toda la versión actual llega a través del synthwave, un estilo que revivió desde los años 2000 las películas, los videojuegos recreativos y la música de sintetizador de los años ochenta. Debajo tienes sus ingredientes clave, paletas con códigos, el CSS de un atardecer y una rejilla, y cómo usarla sin caer en el disfraz.

Los ingredientes de la estética de los 80

Estética de los 80 y synthwave

El synthwave, a veces llamado outrun por el videojuego de conducción de Sega de 1986, es un género musical que creció en línea desde mediados de los años 2000 y toma mucho de las bandas sonoras del cine de los 80. Su arte definió el aspecto que mucha gente imagina hoy: un cielo violeta oscuro, un sol rayado, una rejilla magenta y letra cromada. La película Drive, de 2011, y su banda sonora ayudaron a llevar el estilo al gran público.

Así que cuando un briefing dice años 80, pregunta cuáles. La versión nocturna del synthwave, la versión diurna de pastel de Miami y la versión de patrones Memphis son tres looks distintos. Colores synthwave y colores vaporwave profundizan en los dos revivals de internet, y diseño Memphis cubre el lado de los patrones.

Paletas de colores de los 80

El degradado cromado es el que hay que estudiar. El metal pulido refleja un cielo claro sobre un suelo oscuro, así que el color va de claro, se profundiza hacia el medio, salta a oscuro en una línea de horizonte nítida y vuelve a aclararse hacia abajo. Esa línea dura es lo que hace que se lea como metal y no como gris. Efectos de texto cromado muestra cómo aplicarlo a la rotulación, y degradados de atardecer tiene versiones más suaves del cielo.

Construye un atardecer y una rejilla de los 80 en CSS

.scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0221 0%, #2b0a4a 55%, #0b0221 55%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(40vw, 320px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 45%, #ff2975 80%);
  /* slice the lower half into bands */
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 58% 61%, #000 61% 70%, transparent 70% 74%, #000 74% 83%, transparent 83% 88%, #000 88%);
}

.floor {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 55%;
  bottom: -20%;
  background-image:
    linear-gradient(#ff2fd0 2px, transparent 2px),
    linear-gradient(90deg, #ff2fd0 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: top center;
}

Para animarlo, mueve el background-position del suelo hacia abajo en bucle y la rejilla parecerá correr hacia ti. Respeta los ajustes de movimiento reducido al hacerlo; degradados animados con CSS cubre el patrón.

Fuentes y rotulación de los 80

La letra hacía gran parte del trabajo en los gráficos de la década. Los títulos de películas y los logos de producto usaban cursivas gruesas para dar velocidad, mayúsculas cromadas o extruidas para el drama y script de pincel suelto para todo lo que ocurría en una playa. Una sola palabra tratada así puede sostener todo un diseño.

• Palo seco cursivas gruesas sugieren movimiento, perfectas para todo lo deportivo o rápido.
• Mayúsculas cromadas funcionan para una o dos palabras como mucho; las líneas más largas pierden el reflejo.
• Script de pincel combina con la paleta de Miami, pequeño junto a una sans en negrita.
• Fuentes de píxel y de rejilla guiñan a los recreativos, pero se leen mal por debajo de un tamaño grande, así que resérvalas para títulos.

Para familias que probar, fuentes retro enumera opciones por década.

Cómo usar la estética de los 80 sin cliché

Si diseñas en Gradiently, sus tratamientos de rotulación Relieve y Estela dan a un titular la profundidad y la velocidad de un rótulo de película de los 80, y un Mark oscuro con luz violeta y magenta hace de cielo nocturno, manteniendo su zona más tranquila detrás de las palabras para que el texto siga nítido.

El look va bien con noches de música, canales de videojuegos, lanzamientos de productos retro, aniversarios y todo lo que quiera un guiño de nostalgia. Si quieres la década siguiente, lee estética de los 90.