Design for AI

Estilo Memphis: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para memphis. También llamado diseño Memphis, estilo del Grupo Memphis, posmoderno de los 80, diseño de garabatos. 1981-1988 (Grupo Memphis, Milán); revival web 2015-2020.

Rasgos

  • confeti de formas geométricas: garabatos, zigzags, círculos, triángulos, puntos de terrazo
  • pasteles y primarios que chocan sobre blanco o negro: rosa, verde azulado, amarillo, lavanda
  • contornos negros gruesos y rellenos planos, sin sombreado
  • patrones por todas partes: lunares, rayas, cuadrículas, textura de garabato
  • asimetría juguetona, las formas se solapan y se inclinan
  • sans geométrica robusta (tipo Futura) en mayúsculas
  • bloques de color usados como fondos de sección

Paleta

#ffffff base, #000000 contornos, #ff6f91 rosa, #19a7ce verde azulado, #ffd93d amarillo, #b39ddb lavanda, #2ec4b6 menta

Tipografía

Futura es comercial; libres: Jost, Outfit, Poppins o League Spartan; títulos 700 en mayúsculas a 40-64px con tracking 0.05em, cuerpo 400 a 16-17px

Haz

  • crea un set de 6-8 formas SVG (garabato, zigzag, círculo, semicírculo, triángulo, puntos) y espárcelas en posiciones fijas
  • contornea las formas con negro de 2-3px para que se lean como una ilustración unificada
  • usa patrones como rellenos de sección al 10-15% de opacidad para que el texto siga siendo legible

Evita

  • no uses gradientes ni sombras; Memphis es plano y con contorno
  • no centres todo de forma simétrica; inclina y desplaza
  • no lo hagas de buen gusto; el estilo es ruidoso por diseño

Conocido por: Muebles de Ettore Sottsass, títulos de Salvados por la campana, branding de Nickelodeon en los 80, ilustraciones de Mailchimp de 2018 (parcial)

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #000000;
   --accent: #ff6f91;
   --accent2: #19a7ce;
   --accent3: #ffd93d;
   --accent4: #b39ddb;
   --radius: 0;
   --border: 3px solid #000;
   --font: 'Jost',sans-serif
}
Prompt

Construye el sitio en estilo Memphis. Fondo #ffffff, texto y contornos #000000, rellenos #ff6f91, #19a7ce, #ffd93d, #b39ddb y #2ec4b6. Fuente Jost: títulos 700 en mayúsculas a 56/36/24px con tracking 0.05em, cuerpo 400 a 17px. Esparce formas SVG inline detrás del hero en posiciones fijas: un garabato rosa, un zigzag negro, un círculo amarillo, un triángulo lavanda y un campo de pequeños puntos negros; cada forma tiene un contorno negro de 3px y una ligera rotación (de -12deg a 15deg). Tarjetas y botones: rellenos planos, border 3px solid #000, border-radius 0 o círculo completo para las insignias, sin sombras. Los fondos de sección alternan blanco, #ffd93d y un patrón de lunares en blanco y negro (radial-gradient, 12px, opacity 0.15). La nav es una barra negra con enlaces blancos en mayúsculas. Hover: el relleno cambia al siguiente color de la paleta al instante. Movimiento limitado a una flotación suave de 6s en dos formas decorativas.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo Memphis. Fondo #ffffff, texto y contornos #000000, rellenos #ff6f91, #19a7ce, #ffd93d, #b39ddb y #2ec4b6. Fuente Jost: títulos 700 en mayúsculas a 56/36/24px con tracking 0.05em, cuerpo 400 a 17px. Esparce formas SVG inline detrás del hero en posiciones fijas: un garabato rosa, un zigzag negro, un círculo amarillo, un triángulo lavanda y un campo de pequeños puntos negros; cada forma tiene un contorno negro de 3px y una ligera rotación (de -12deg a 15deg). Tarjetas y botones: rellenos planos, border 3px solid #000, border-radius 0 o círculo completo para las insignias, sin sombras. Los fondos de sección alternan blanco, #ffd93d y un patrón de lunares en blanco y negro (radial-gradient, 12px, opacity 0.15). La nav es una barra negra con enlaces blancos en mayúsculas. Hover: el relleno cambia al siguiente color de la paleta al instante. Movimiento limitado a una flotación suave de 6s en dos formas decorativas.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --accent:#ff6f91; --accent2:#19a7ce; --accent3:#ffd93d; --accent4:#b39ddb; --radius:0; --border:3px solid #000; --font:'Jost',sans-serif }

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