Design for AI

Estilo Retrofuturismo: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para retrofuturismo. También llamado retrofuturismo, diseño de la era atómica, UI de la era espacial, futuro de los años 50, estilo Jetsons, futurismo de mediados de siglo. años 50 y 60 (era atómica, carrera espacial); uso web de 2018 en adelante (marcas que quieren optimismo con nostalgia).

Rasgos

  • formas de bumerán y estallido de estrella, anillos orbitales, átomos, cohetes, pistolas de rayos
  • paleta de mediados de siglo: turquesa, mandarina, mostaza, rojo cereza sobre crema o carbón
  • rectángulos redondeados con tratamiento cromado o bicolor; curvas de pantalla de televisor
  • fuentes display de tipo script (rótulos Googie) mezcladas con sans geométricas anchas en mayúsculas
  • puntos de semitono, impresión desregistrada, texturas de papel envejecido
  • ilustración al estilo de la publicidad de los años 50: segura, sonriente, optimista
  • movimiento: elementos en órbita, rótulos de bombillas parpadeantes, rotación suave

Paleta

#f4e9d8 crema, #2b2b2b carbón, #3fb8af turquesa, #f37021 mandarina, #e4b429 mostaza, #c8102e cereza

Tipografía

Monoton o Pacifico para un único titular script, Righteous o Bungee para mayúsculas display, Josefin Sans o la parecida a Futura Jost para el cuerpo a 16-17px; display a 48-96px

Haz

  • construye un SVG de estallido de estrella (12-16 púas finas) y un SVG de órbita atómica y úsalos como marcadores de sección
  • usa formas de pantalla de televisor: border-radius 24px 24px 24px 24px / 40px en las tarjetas, ligeramente abombadas
  • combina una fuente script con una fuente ancha en mayúsculas; el emparejamiento es el estilo

Evita

  • no uses neón; eso es cyberpunk. El retrofuturismo es luz de día e impresión
  • no uses gradientes cromados por todas partes; uno o dos acentos cromados como máximo
  • no uses iconos planos modernos; dibújalos como pictogramas de los años 50 con extremos redondeados

Conocido por: Fallout (Vault-Tec), Tomorrowland de Disney, cafeterías Googie, imaginería del Space Needle, bares tiki

Semilla 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

Construye el sitio en estilo retrofuturista de la era atómica. Fondo crema #f4e9d8 con una textura de papel envejecido (ruido SVG a opacity 0.08, multiply), texto #2b2b2b, paleta turquesa #3fb8af, mandarina #f37021, mostaza #e4b429, cereza #c8102e. Fuentes: Pacifico para una única palabra script en el hero a 72px en #c8102e, Righteous en mayúsculas para títulos a 56/36/24px con tracking 0.04em, Jost 400 a 17px para el cuerpo. Decora con SVG inline: un estallido de 16 púas en #e4b429 detrás del título del hero, un átomo con tres anillos orbitales girando despacio (20s linear) en la esquina, formas de bumerán en turquesa como separadores de sección. Las tarjetas usan una forma de pantalla de televisor (border-radius 24px / 40px), contorno 3px #2b2b2b y una banda de cabecera bicolor. Botones: píldora, relleno #f37021, texto crema en Righteous, contorno 3px #2b2b2b, sombra desplazada dura 4px 4px 0 #2b2b2b. Patrón de puntos de semitono (radial-gradient 3px) sobre las imágenes del hero. Movimiento: rotación orbital, un efecto de bombilla parpadeante de 1.2s en un rótulo; nada más.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo retrofuturista de la era atómica. Fondo crema #f4e9d8 con una textura de papel envejecido (ruido SVG a opacity 0.08, multiply), texto #2b2b2b, paleta turquesa #3fb8af, mandarina #f37021, mostaza #e4b429, cereza #c8102e. Fuentes: Pacifico para una única palabra script en el hero a 72px en #c8102e, Righteous en mayúsculas para títulos a 56/36/24px con tracking 0.04em, Jost 400 a 17px para el cuerpo. Decora con SVG inline: un estallido de 16 púas en #e4b429 detrás del título del hero, un átomo con tres anillos orbitales girando despacio (20s linear) en la esquina, formas de bumerán en turquesa como separadores de sección. Las tarjetas usan una forma de pantalla de televisor (border-radius 24px / 40px), contorno 3px #2b2b2b y una banda de cabecera bicolor. Botones: píldora, relleno #f37021, texto crema en Righteous, contorno 3px #2b2b2b, sombra desplazada dura 4px 4px 0 #2b2b2b. Patrón de puntos de semitono (radial-gradient 3px) sobre las imágenes del hero. Movimiento: rotación orbital, un efecto de bombilla parpadeante de 1.2s en un rótulo; nada más.

## 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 }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.