Design for AI

Estilo Retrofuturismo: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de retrofuturismo. Também chamado de retrofuturismo, design da era atômica, UI da era espacial, futuro dos anos 1950, estilo Jetsons, futurismo mid-century. anos 1950-1960 (era atômica, corrida espacial); uso na web de 2018 em diante (marcas que querem otimismo com nostalgia).

Traços

  • formas de bumerangue e explosão de estrela, anéis de órbita, átomos, foguetes, pistolas de raio
  • paleta mid-century: turquesa, tangerina, mostarda, vermelho cereja sobre creme ou carvão
  • retângulos arredondados com tratamento cromado ou bicolor; curvas de tela de TV
  • fontes script de display (letreiros Googie) misturadas com sans geométrica larga em caixa alta
  • pontos de meio-tom, impressão desregistrada, texturas de papel envelhecido
  • ilustração no estilo da publicidade dos anos 1950: confiante, sorridente, otimista
  • movimento: elementos em órbita, letreiros de lâmpada piscando, rotação suave

Paleta

#f4e9d8 creme, #2b2b2b carvão, #3fb8af turquesa, #f37021 tangerina, #e4b429 mostarda, #c8102e cereja

Tipografia

Monoton ou Pacifico para uma manchete script, Righteous ou Bungee para display em caixa alta, Josefin Sans ou a Jost parecida com Futura para o corpo a 16-17px; display 48-96px

Faça

  • construa um SVG de explosão de estrela (12-16 pontas finas) e um SVG de órbita atômica e use-os como marcadores de seção
  • use formas de tela de TV: border-radius 24px 24px 24px 24px / 40px nos cards, levemente abaulados
  • combine uma fonte script com uma fonte larga em caixa alta; o par é o estilo

Evite

  • não use neon; isso é cyberpunk. O retrofuturismo é luz do dia e impresso
  • não use gradientes cromados em todo lugar; no máximo um ou dois acentos cromados
  • não use ícones flat modernos; desenhe-os como pictogramas dos anos 1950 com pontas arredondadas

Conhecido por: Fallout (Vault-Tec), Disney Tomorrowland, lanchonetes Googie, imagens da Space Needle, bares tiki

Semente CSS
:root {
  --bg: #f4e9d8;
   --fg: #2b2b2b;
   --accent: #3fb8af;
   --accent2: #f37021;
   --accent3: #e4b429;
   --accent4: #c8102e;
   --radius: 24px 24px 24px 24px / 40px 40px 40px 40px;
   --font: 'Jost',sans-serif;
   --font-display: 'Righteous',sans-serif
}
Prompt

Construa o site em estilo retrofuturista da era atômica. Fundo creme #f4e9d8 com uma textura de papel envelhecido (ruído SVG a opacity 0.08, multiply), texto #2b2b2b, paleta turquesa #3fb8af, tangerina #f37021, mostarda #e4b429, cereja #c8102e. Fontes: Pacifico para uma palavra script no hero a 72px em #c8102e, Righteous em caixa alta para títulos a 56/36/24px com tracking 0.04em, Jost 400 a 17px para o corpo. Decore com SVGs inline: uma explosão de estrela de 16 pontas em #e4b429 atrás do título do hero, um átomo com três anéis de órbita girando lentamente (20s linear) no canto, formas de bumerangue em turquesa como divisores de seção. Os cards usam forma de tela de TV (border-radius 24px / 40px), contorno 3px #2b2b2b e uma faixa de cabeçalho bicolor. Botões: pílula, preenchimento #f37021, texto creme em Righteous, contorno 3px #2b2b2b, sombra deslocada dura 4px 4px 0 #2b2b2b. Padrão de pontos de meio-tom (radial-gradient 3px) sobre as imagens do hero. Movimento: rotação da órbita, um efeito de lâmpada piscando de 1.2s num letreiro; nada mais.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo retrofuturista da era atômica. Fundo creme #f4e9d8 com uma textura de papel envelhecido (ruído SVG a opacity 0.08, multiply), texto #2b2b2b, paleta turquesa #3fb8af, tangerina #f37021, mostarda #e4b429, cereja #c8102e. Fontes: Pacifico para uma palavra script no hero a 72px em #c8102e, Righteous em caixa alta para títulos a 56/36/24px com tracking 0.04em, Jost 400 a 17px para o corpo. Decore com SVGs inline: uma explosão de estrela de 16 pontas em #e4b429 atrás do título do hero, um átomo com três anéis de órbita girando lentamente (20s linear) no canto, formas de bumerangue em turquesa como divisores de seção. Os cards usam forma de tela de TV (border-radius 24px / 40px), contorno 3px #2b2b2b e uma faixa de cabeçalho bicolor. Botões: pílula, preenchimento #f37021, texto creme em Righteous, contorno 3px #2b2b2b, sombra deslocada dura 4px 4px 0 #2b2b2b. Padrão de pontos de meio-tom (radial-gradient 3px) sobre as imagens do hero. Movimento: rotação da órbita, um efeito de lâmpada piscando de 1.2s num letreiro; nada mais.

## Tokens
:root { --bg:#f4e9d8; --fg:#2b2b2b; --accent:#3fb8af; --accent2:#f37021; --accent3:#e4b429; --accent4:#c8102e; --radius:24px 24px 24px 24px / 40px 40px 40px 40px; --font:'Jost',sans-serif; --font-display:'Righteous',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.