A versão curta
- A estética anos 80 constrói-se com cores néon sobre fundos escuros, letras cromadas, gradientes de pôr do sol, grelhas em perspetiva e tons pastel de Miami.
- Grande parte do que hoje se chama estética anos 80 chega filtrada pela synthwave, um estilo musical e visual que reviveu o cinema, os arcades e os sintetizadores dos anos 80 a partir dos anos 2000.
- Um gradiente de pôr do sol que vai do amarelo ao violeta, passando por laranja e rosa, muitas vezes cortado em faixas horizontais, é o fundo mais reconhecível dos anos 80.
- As letras cromadas imitam metal polido com uma linha de horizonte nítida a meio das letras, onde o reflexo de um céu claro encontra o reflexo de um chão escuro.
- O néon funciona melhor em linhas e formas sobre fundo escuro; mantém o brilho longe do texto corrido para continuar legível.
Nesta página
A estética anos 80 é néon sobre preto, letras cromadas, gradientes de pôr do sol cortados em faixas e uma grelha luminosa a correr até ao horizonte, com um lado mais suave de pastéis de Miami e padrões Memphis. A versão de hoje vem sobretudo da synthwave, um estilo que reviveu filmes, jogos de arcade e música de sintetizador dos anos 80 a partir dos anos 2000. Abaixo ficam os ingredientes principais, paletas com códigos, o CSS de um pôr do sol e de uma grelha, e como usar tudo isto sem cair no disfarce.
Os ingredientes da estética anos 80
De onde vem
Para que serve
De onde vem
Para que serve
De onde vem
Para que serve
De onde vem
Para que serve
De onde vem
Para que serve
De onde vem
Para que serve
De onde vem
Para que serve
Estética anos 80 e synthwave
A synthwave, por vezes chamada outrun por causa do jogo de condução da Sega de 1986, é um género musical que cresceu online a partir de meados dos anos 2000 e vai buscar muito às bandas sonoras dos filmes dos anos 80. Os seus grafismos definiram o visual que muita gente imagina hoje: um céu violeta escuro, um sol às riscas, uma grelha magenta e letras cromadas. O filme Drive, de 2011, e a sua banda sonora ajudaram a levar o estilo para o grande público.
Por isso, quando um briefing diz anos 80, pergunta qual. A versão noturna da synthwave, a versão diurna de pastéis de Miami e a versão de padrões Memphis são três visuais diferentes. As cores synthwave e as cores vaporwave aprofundam os dois revivalismos da internet, e o design Memphis trata do lado dos padrões.
Paletas de cores dos anos 80
O gradiente cromado é o que vale a pena estudar. O metal polido reflete um céu claro por cima de um chão escuro, por isso a cor começa clara, escurece até ao meio, passa a escuro numa linha de horizonte nítida e volta a clarear em direção à base. É essa linha dura que o faz parecer metal e não cinzento. Os efeitos de texto cromado mostram como aplicá-lo a letras, e os gradientes de pôr do sol trazem versões mais suaves do céu.
Constrói um pôr do sol e uma grelha anos 80 em 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;
}.sun e .floor dentro de .scene.Para animar, desloca o background-position do chão para baixo em ciclo e a grelha parece vir ao teu encontro. Respeita as definições de movimento reduzido quando o fizeres; os gradientes animados em CSS tratam do padrão.
Fontes e letras dos anos 80
A tipografia fazia grande parte do trabalho nos gráficos da década. Os títulos de filmes e os logótipos de produtos usavam itálicos pesados para dar velocidade, maiúsculas cromadas ou extrudidas para dar drama, e manuscritos de pincel soltos para tudo o que se passava numa praia. Uma só palavra tratada assim pode carregar um design inteiro.
- As sem serifas pesadas em itálico sugerem movimento, ideais para tudo o que seja desportivo ou rápido.
- As maiúsculas cromadas funcionam para uma ou duas palavras, no máximo; linhas mais longas perdem o reflexo.
- Os manuscritos de pincel combinam com a paleta de Miami, em tamanho pequeno ao lado de uma sem serifas forte.
- As fontes de píxeis e de grelha piscam o olho aos arcades, mas leem-se mal abaixo de um tamanho grande, por isso guarda-as para títulos.
Para famílias a experimentar, as fontes retro listam opções por década.
Como usar a estética anos 80 sem cair no cliché
Cliché
- Sol, grelha, palmeiras, cromado e VHS ao mesmo tempo
- Brilho néon à volta de cada linha de texto
- Uma fonte manuscrita, uma cromada e uma de píxeis juntas
- Retro por retro, sem ligação à marca
Ponderado
- Um ingrediente protagonista, como o sol às fatias
- Néon em linhas e formas, letra nítida em zonas calmas
- Uma fonte de exibição para o título, uma sem serifas simples para os detalhes
- Uma razão: um produto retro, um aniversário, uma noite de música
Se desenhas no Gradiently, os tratamentos de letras Extrudir e Rasto dão a um título a profundidade e a velocidade de um genérico dos anos 80, e um Mark escuro com luz violeta e magenta faz o céu da noite para ele, mantendo a sua zona mais calma atrás das palavras para a letra continuar nítida.
Um cartaz de noite anos 80: fundo escuro, um título forte, detalhes pequenos e simples.
Uma miniatura de YouTube de 1280×720 com um título curto e pesado que se lê em tamanho pequeno.
O visual assenta bem em noites de música, canais de jogos, lançamentos de produtos retro, aniversários e tudo o que queira uma piscadela de nostalgia. Se queres a década seguinte, lê a estética anos 90.
Perguntas frequentes
O que é a estética anos 80?
Um estilo visual feito de cores néon sobre fundos escuros, letras cromadas, gradientes de pôr do sol, grelhas em perspetiva, pastéis de Miami e padrões Memphis.
Que cores tem uma paleta dos anos 80?
Magenta néon, ciano laser e amarelo sol sobre meia-noite e violeta profundo para o visual noturno, ou rosa flamingo, verde piscina e pêssego para o visual de Miami.
Qual é a diferença entre a estética anos 80 e a synthwave?
A estética anos 80 é o design da própria década. A synthwave é um estilo musical e artístico posterior que a revive, e os seus grafismos moldaram o visual de pôr do sol néon e grelha que muita gente imagina hoje.
Como faço um pôr do sol anos 80 em CSS?
Usa um gradiente linear vertical do amarelo ao violeta, passando por laranja e rosa, e acrescenta paragens secas ou uma máscara para cortar faixas escuras na metade inferior.
Que fontes parecem dos anos 80?
Letras de exibição cromadas ou extrudidas, manuscritos de pincel e sem serifas pesadas em itálico. Usa uma para o título e uma sem serifas simples para o resto.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil