Design for AI

Corporate Memphis: UI design prompt

Palette, type rules and a pasteable prompt for corporate memphis. Also called Alegria style, big tech illustration, flat people illustration, Facebook illustration style, globohomo (pejorative). 2017-2022 (Facebook Alegria 2017, then everywhere); now widely mocked but still common.

Traits

  • flat vector people with elongated limbs, tiny heads, no facial detail, mismatched skin colours (blue, purple)
  • bright but safe palette: coral, teal, mustard, lavender on white
  • rounded, friendly geometric sans; lots of pill buttons and 12-16px radius cards
  • hero illustration on the right, headline on the left, three-feature row below
  • muted gradients or none; very clean, low-contrast shadows
  • generic optimism: people high-fiving, plants, laptops, abstract charts
  • reads as "startup landing page template" instantly

Palette

#ffffff page, #1a1a2e text, #ff6b6b coral, #4ecdc4 teal, #ffd166 mustard, #a78bfa lavender, #f7f7fb surface

Type

Poppins, DM Sans, Nunito or Manrope; headings 700 at 40-56px, body 400 at 16-18px

Do

  • if you must use it, commission or draw illustrations with a consistent line weight and one light source
  • limit to one hero illustration; icons should be simple line icons, not more little people
  • pair it with strong, specific copy so the page has something the illustration does not

Don't

  • do not use it in 2026 unless the brand already owns it; it reads as a stock template and signals nothing
  • do not use purple-skinned figures to fake diversity
  • do not let the illustration carry the message; it never does

Known for it: Facebook (Alegria, 2017-2020), Hims, Lyft, Google Doodle-adjacent marketing, Stripe (2018 partial)

CSS seed
: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

Build the site in the corporate Memphis (Alegria) illustration style, deliberately and consistently. Background #ffffff, surfaces #f7f7fb, text #1a1a2e, accents coral #ff6b6b, teal #4ecdc4, mustard #ffd166, lavender #a78bfa. Font Poppins: headings 700 at 52/36/24px, body 400 at 18px line-height 1.6. Hero: two-column, headline and pill button (#ff6b6b, white text, radius 999px, 48px tall) left, a flat vector illustration right: two figures with elongated limbs and small heads, flat fills, no outlines, one abstract plant and a floating UI card. Feature row: three cards, radius 16px, 32px padding, box-shadow 0 8px 24px rgba(26,26,46,0.08), each with a 48px circular icon badge in an accent tint (accent at 15% alpha). Testimonials with round avatars. Curved section dividers (SVG wave) between white and #f7f7fb bands. Motion: cards lift 4px on hover, 200ms; hero illustration floats 8px over 4s.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in the corporate Memphis (Alegria) illustration style, deliberately and consistently. Background #ffffff, surfaces #f7f7fb, text #1a1a2e, accents coral #ff6b6b, teal #4ecdc4, mustard #ffd166, lavender #a78bfa. Font Poppins: headings 700 at 52/36/24px, body 400 at 18px line-height 1.6. Hero: two-column, headline and pill button (#ff6b6b, white text, radius 999px, 48px tall) left, a flat vector illustration right: two figures with elongated limbs and small heads, flat fills, no outlines, one abstract plant and a floating UI card. Feature row: three cards, radius 16px, 32px padding, box-shadow 0 8px 24px rgba(26,26,46,0.08), each with a 48px circular icon badge in an accent tint (accent at 15% alpha). Testimonials with round avatars. Curved section dividers (SVG wave) between white and #f7f7fb bands. Motion: cards lift 4px on hover, 200ms; hero illustration floats 8px over 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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.