80-talsestetik: neon, krom och solnedgångsgradienter

80-talsestetiken är neon på svart, kromad text, solnedgångsgradienter skurna i band och ett glödande rutnät som löper mot horisonten, med en mjukare sida av Miami-pastell och Memphis-mönster. Det mesta av dagens version kommer via synthwave, en stil som från 2000-talet och framåt återuppväckte 1980-talets filmer, arkadspel och synthmusik. Nedan går vi igenom de viktigaste ingredienserna, paletter med koder, CSS för en solnedgång och ett rutnät, och hur du använder stilen utan att den blir till en utklädnad.

80-talsestetikens ingredienser

80-talsestetik och synthwave

Synthwave, ibland kallad outrun efter Segas arkadbilspel från 1986, är en musikgenre som växte fram på nätet från mitten av 2000-talet och lånar mycket från 80-talets filmmusik. Dess omslagskonst formade den look många nu ser framför sig: en mörkt violett himmel, en randig sol, ett magentafärgat rutnät och kromad text. Filmen Drive från 2011 och dess soundtrack hjälpte stilen att nå en bredare publik.

Så när en brief säger 80-tal, fråga vilket 80-tal. Synthwave-natten, Miami-pastellen på dagen och Memphis-mönstren är tre olika looks. Synthwave-färger och vaporwave-färger går djupare in på de två internetväckelserna, och Memphis-design tar upp mönstersidan.

Färgpaletter från 80-talet

Kromgradienten är den som är värd att studera. Polerad metall speglar en ljus himmel över en mörk mark, så färgen går från ljus, fördjupas mot mitten, slår om till mörkt vid en skarp horisontlinje och ljusnar sedan igen mot botten. Den hårda linjen är det som får den att läsas som metall och inte som grått. Kromeffekter för text visar hur du använder den på bokstäver, och solnedgångsgradienter har mjukare versioner av himlen.

Bygg en 80-talssolnedgång och ett rutnät i 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;
}

För att animera det flyttar du golvets background-position nedåt i en loop, så ser det ut som att rutnätet rusar mot dig. Ta hänsyn till inställningen för minskad rörelse när du gör det; animerade CSS-gradienter går igenom mönstret.

80-talstypsnitt och bokstäver

Typografin gjorde mycket av jobbet i decenniets grafik. Filmtitlar och produktlogotyper använde tunga kursiva för fart, kromade eller extruderade versaler för dramatik och lösa penselskriftstilar till allt som utspelade sig på en strand. Ett enda ord som behandlas så kan bära en hel design.

• Tunga kursiva sans serif-typsnitt antyder rörelse, perfekt för allt sportigt eller snabbt.
• Kromade versaler fungerar för högst ett eller två ord; längre rader förlorar reflektionen.
• Penselskriftstilar passar ihop med Miami-paletten, satta små bredvid en kraftig sans.
• Pixel- och rutnätstypsnitt nickar åt arkadspel men läses dåligt under en större storlek, så spara dem till titlar.

För typsnittsfamiljer att prova listar retrotypsnitt alternativ efter decennium.

Så använder du 80-talsestetiken utan klichéer

Om du designar i Gradiently ger behandlingarna Extrudering och Spår för Lettering en rubrik djupet och farten hos ett 80-talstitelkort, och en mörk Mark med violett och magenta ljus blir nattens himmel för den, med sitt lugnaste område bakom orden så att texten förblir skarp.

Looken passar musikkvällar, spelkanaler, retroprodukter som lanseras, jubileer och allt som vill ha en blinkning av nostalgi. Vill du ha decenniet efter, läs 90-talsestetik.