Design for AI

Estilo Memphis: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de memphis. Também chamado de design Memphis, estilo Memphis Group, pós-moderno anos 80, design de rabiscos. 1981-1988 (Memphis Group, Milão); revival na web 2015-2020.

Traços

  • confete de formas geométricas: rabiscos, zigue-zagues, círculos, triângulos, pontos de terrazzo
  • pastéis e primárias que se chocam sobre branco ou preto: rosa, verde-azulado, amarelo, lavanda
  • contornos pretos grossos e preenchimentos chapados, sem sombreamento
  • padrões em todo lugar: bolinhas, listras, grades, textura de rabisco
  • assimetria lúdica, formas se sobrepõem e inclinam
  • sans geométrica robusta (à la Futura) em caixa alta
  • blocos de cor usados como fundos de seção

Paleta

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

Tipografia

Futura é comercial; gratuitas: Jost, Outfit, Poppins ou League Spartan; títulos 700 em caixa alta a 40-64px com tracking 0.05em, corpo 400 a 16-17px

Faça

  • crie um conjunto de 6-8 formas SVG (rabisco, zigue-zague, círculo, semicírculo, triângulo, pontos) e espalhe-as em posições fixas
  • contorne as formas com 2-3px de preto para lerem como uma ilustração unificada
  • use padrões como preenchimento de seção a 10-15% de opacidade para o texto continuar legível

Evite

  • não use gradientes nem sombras; Memphis é chapado e contornado
  • não centralize tudo simetricamente; incline e desloque
  • não faça com bom gosto; o estilo é barulhento por natureza

Conhecido por: Móveis de Ettore Sottsass, abertura de Saved by the Bell, branding da Nickelodeon nos anos 80, ilustrações do Mailchimp em 2018 (parcial)

Semente 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

Construa o site em estilo Memphis. Fundo #ffffff, texto e contornos #000000, preenchimentos #ff6f91, #19a7ce, #ffd93d, #b39ddb e #2ec4b6. Fonte Jost: títulos 700 em caixa alta a 56/36/24px com tracking 0.05em, corpo 400 a 17px. Espalhe formas SVG inline atrás do hero em posições fixas: um rabisco rosa, um zigue-zague preto, um círculo amarelo, um triângulo lavanda e um campo de pequenos pontos pretos; cada forma tem contorno preto de 3px e uma leve rotação (-12deg a 15deg). Cards e botões: preenchimentos chapados, border 3px solid #000, border-radius 0 ou círculo completo para selos, sem sombras. Os fundos de seção alternam branco, #ffd93d e um padrão de bolinhas preto e branco (radial-gradient, 12px, opacity 0.15). A nav é uma barra preta com links brancos em caixa alta. Hover: o preenchimento troca instantaneamente para a próxima cor da paleta. Movimento limitado a uma flutuação suave de 6s em duas formas decorativas.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo Memphis. Fundo #ffffff, texto e contornos #000000, preenchimentos #ff6f91, #19a7ce, #ffd93d, #b39ddb e #2ec4b6. Fonte Jost: títulos 700 em caixa alta a 56/36/24px com tracking 0.05em, corpo 400 a 17px. Espalhe formas SVG inline atrás do hero em posições fixas: um rabisco rosa, um zigue-zague preto, um círculo amarelo, um triângulo lavanda e um campo de pequenos pontos pretos; cada forma tem contorno preto de 3px e uma leve rotação (-12deg a 15deg). Cards e botões: preenchimentos chapados, border 3px solid #000, border-radius 0 ou círculo completo para selos, sem sombras. Os fundos de seção alternam branco, #ffd93d e um padrão de bolinhas preto e branco (radial-gradient, 12px, opacity 0.15). A nav é uma barra preta com links brancos em caixa alta. Hover: o preenchimento troca instantaneamente para a próxima cor da paleta. Movimento limitado a uma flutuação suave de 6s em duas 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 }

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