Design for AI

Estilo Corporate Memphis: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de corporate memphis. Também chamado de estilo Alegria, ilustração de big tech, ilustração de pessoas flat, estilo de ilustração do Facebook, globohomo (pejorativo). 2017-2022 (Alegria do Facebook em 2017, depois em todo lugar); hoje amplamente ridicularizado mas ainda comum.

Traços

  • pessoas vetoriais flat com membros alongados, cabeças minúsculas, sem detalhe facial, tons de pele incompatíveis (azul, roxo)
  • paleta viva mas segura: coral, verde-azulado, mostarda, lavanda sobre branco
  • sans geométrica arredondada e amigável; muitos botões em pílula e cards com raio de 12-16px
  • ilustração hero à direita, manchete à esquerda, fileira de três recursos abaixo
  • gradientes discretos ou nenhum; muito limpo, sombras de baixo contraste
  • otimismo genérico: pessoas batendo high-five, plantas, laptops, gráficos abstratos
  • lê instantaneamente como "template de landing page de startup"

Paleta

#ffffff página, #1a1a2e texto, #ff6b6b coral, #4ecdc4 verde-azulado, #ffd166 mostarda, #a78bfa lavanda, #f7f7fb superfície

Tipografia

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

Faça

  • se precisar usar, encomende ou desenhe ilustrações com peso de linha consistente e uma única fonte de luz
  • limite a uma ilustração hero; os ícones devem ser ícones de linha simples, não mais pessoinhas
  • combine com texto forte e específico para a página ter algo que a ilustração não tem

Evite

  • não use em 2026 a menos que a marca já seja dona disso; lê como template de banco de imagens e não sinaliza nada
  • não use figuras de pele roxa para fingir diversidade
  • não deixe a ilustração carregar a mensagem; ela nunca carrega

Conhecido por: Facebook (Alegria, 2017-2020), Hims, Lyft, marketing adjacente aos Google Doodles, Stripe (2018 parcial)

Semente 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

Construa o site no estilo de ilustração corporate Memphis (Alegria), de forma deliberada e consistente. Fundo #ffffff, superfícies #f7f7fb, texto #1a1a2e, acentos coral #ff6b6b, verde-azulado #4ecdc4, mostarda #ffd166, lavanda #a78bfa. Fonte Poppins: títulos 700 a 52/36/24px, corpo 400 a 18px line-height 1.6. Hero: duas colunas, manchete e botão em pílula (#ff6b6b, texto branco, raio 999px, 48px de altura) à esquerda, uma ilustração vetorial flat à direita: duas figuras com membros alongados e cabeças pequenas, preenchimentos chapados, sem contornos, uma planta abstrata e um card de UI flutuante. Fileira de recursos: três cards, raio 16px, padding 32px, box-shadow 0 8px 24px rgba(26,26,46,0.08), cada um com um selo de ícone circular de 48px num tom de acento (acento a 15% de alpha). Depoimentos com avatares redondos. Divisores de seção curvos (onda SVG) entre as faixas brancas e #f7f7fb. Movimento: os cards sobem 4px no hover, 200ms; a ilustração do hero flutua 8px ao longo de 4s.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site no estilo de ilustração corporate Memphis (Alegria), de forma deliberada e consistente. Fundo #ffffff, superfícies #f7f7fb, texto #1a1a2e, acentos coral #ff6b6b, verde-azulado #4ecdc4, mostarda #ffd166, lavanda #a78bfa. Fonte Poppins: títulos 700 a 52/36/24px, corpo 400 a 18px line-height 1.6. Hero: duas colunas, manchete e botão em pílula (#ff6b6b, texto branco, raio 999px, 48px de altura) à esquerda, uma ilustração vetorial flat à direita: duas figuras com membros alongados e cabeças pequenas, preenchimentos chapados, sem contornos, uma planta abstrata e um card de UI flutuante. Fileira de recursos: três cards, raio 16px, padding 32px, box-shadow 0 8px 24px rgba(26,26,46,0.08), cada um com um selo de ícone circular de 48px num tom de acento (acento a 15% de alpha). Depoimentos com avatares redondos. Divisores de seção curvos (onda SVG) entre as faixas brancas e #f7f7fb. Movimento: os cards sobem 4px no hover, 200ms; a ilustração do hero flutua 8px ao longo de 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 }

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