Design for AI

Estilo Corporate Memphis: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para corporate memphis. También llamado estilo Alegria, ilustración de las big tech, ilustración de personas planas, estilo de ilustración de Facebook, globohomo (peyorativo). 2017-2022 (Facebook Alegria en 2017, después en todas partes); hoy muy parodiado pero todavía común.

Rasgos

  • personas vectoriales planas con extremidades alargadas, cabezas diminutas, sin detalle facial, colores de piel dispares (azul, púrpura)
  • paleta brillante pero segura: coral, verde azulado, mostaza, lavanda sobre blanco
  • sans geométrica redondeada y amigable; muchos botones píldora y tarjetas con radio de 12-16px
  • ilustración hero a la derecha, titular a la izquierda, fila de tres funciones debajo
  • gradientes apagados o ninguno; muy limpio, sombras de bajo contraste
  • optimismo genérico: gente chocando las manos, plantas, portátiles, gráficas abstractas
  • se lee al instante como "plantilla de landing de startup"

Paleta

#ffffff página, #1a1a2e texto, #ff6b6b coral, #4ecdc4 verde azulado, #ffd166 mostaza, #a78bfa lavanda, #f7f7fb superficie

Tipografía

Poppins, DM Sans, Nunito o Manrope; títulos 700 a 40-56px, cuerpo 400 a 16-18px

Haz

  • si tienes que usarlo, encarga o dibuja ilustraciones con un grosor de línea coherente y una sola fuente de luz
  • limítate a una ilustración hero; los iconos deberían ser iconos de línea simples, no más personitas
  • acompáñalo de un copy fuerte y concreto para que la página tenga algo que la ilustración no da

Evita

  • no lo uses en 2026 salvo que la marca ya lo tenga como propio; se lee como plantilla de stock y no comunica nada
  • no uses figuras de piel púrpura para fingir diversidad
  • no dejes que la ilustración lleve el mensaje; nunca lo hace

Conocido por: Facebook (Alegria, 2017-2020), Hims, Lyft, marketing cercano a los Doodles de Google, Stripe (2018, parcial)

Semilla CSS
:root {
  --bg: #ffffff;
   --surface: #f7f7fb;
   --fg: #1a1a2e;
   --accent: #ff6b6b;
   --accent2: #4ecdc4;
   --accent3: #ffd166;
   --radius: 16px;
   --shadow: 0 8px 24px rgba(26,26,46,0.08);
   --font: 'Poppins',sans-serif
}
Prompt

Construye el sitio en el estilo de ilustración corporate Memphis (Alegria), de forma deliberada y coherente. Fondo #ffffff, superficies #f7f7fb, texto #1a1a2e, acentos coral #ff6b6b, verde azulado #4ecdc4, mostaza #ffd166, lavanda #a78bfa. Fuente Poppins: títulos 700 a 52/36/24px, cuerpo 400 a 18px con line-height 1.6. Hero: dos columnas, titular y botón píldora (#ff6b6b, texto blanco, radio 999px, 48px de alto) a la izquierda, una ilustración vectorial plana a la derecha: dos figuras con extremidades alargadas y cabezas pequeñas, rellenos planos, sin contornos, una planta abstracta y una tarjeta de UI flotante. Fila de funciones: tres tarjetas, radio 16px, padding 32px, box-shadow 0 8px 24px rgba(26,26,46,0.08), cada una con una insignia de icono circular de 48px en un tinte de acento (acento al 15% de alfa). Testimonios con avatares redondos. Separadores de sección curvos (onda SVG) entre las bandas blancas y #f7f7fb. Movimiento: las tarjetas se elevan 4px en hover, 200ms; la ilustración del hero flota 8px durante 4s.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en el estilo de ilustración corporate Memphis (Alegria), de forma deliberada y coherente. Fondo #ffffff, superficies #f7f7fb, texto #1a1a2e, acentos coral #ff6b6b, verde azulado #4ecdc4, mostaza #ffd166, lavanda #a78bfa. Fuente Poppins: títulos 700 a 52/36/24px, cuerpo 400 a 18px con line-height 1.6. Hero: dos columnas, titular y botón píldora (#ff6b6b, texto blanco, radio 999px, 48px de alto) a la izquierda, una ilustración vectorial plana a la derecha: dos figuras con extremidades alargadas y cabezas pequeñas, rellenos planos, sin contornos, una planta abstracta y una tarjeta de UI flotante. Fila de funciones: tres tarjetas, radio 16px, padding 32px, box-shadow 0 8px 24px rgba(26,26,46,0.08), cada una con una insignia de icono circular de 48px en un tinte de acento (acento al 15% de alfa). Testimonios con avatares redondos. Separadores de sección curvos (onda SVG) entre las bandas blancas y #f7f7fb. Movimiento: las tarjetas se elevan 4px en hover, 200ms; la ilustración del hero flota 8px durante 4s.

## Tokens
:root { --bg:#ffffff; --surface:#f7f7fb; --fg:#1a1a2e; --accent:#ff6b6b; --accent2:#4ecdc4; --accent3:#ffd166; --radius:16px; --shadow:0 8px 24px rgba(26,26,46,0.08); --font:'Poppins',sans-serif }

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