Design for AI

Memphis: UI design prompt

Palette, type rules and a pasteable prompt for memphis. Also called Memphis design, Memphis Group style, 80s postmodern, squiggle design. 1981-1988 (Memphis Group, Milan); web revival 2015-2020.

Traits

  • confetti of geometric shapes: squiggles, zigzags, circles, triangles, terrazzo dots
  • clashing pastels and primaries on white or black: pink, teal, yellow, lavender
  • thick black outlines and flat fills, no shading
  • patterns everywhere: polka dots, stripes, grids, scribble texture
  • playful asymmetry, shapes overlap and tilt
  • chunky geometric sans (Futura-like) in caps
  • colour blocks used as section backgrounds

Palette

#ffffff base, #000000 outlines, #ff6f91 pink, #19a7ce teal, #ffd93d yellow, #b39ddb lavender, #2ec4b6 mint

Type

Futura is commercial; free: Jost, Outfit, Poppins or League Spartan; headings 700 caps at 40-64px with 0.05em tracking, body 400 at 16-17px

Do

  • create a set of 6-8 SVG shapes (squiggle, zigzag, circle, half-circle, triangle, dots) and scatter them at fixed positions
  • outline shapes in 2-3px black so they read as a unified illustration
  • use patterns as section fills at 10-15% opacity so text stays legible

Don't

  • do not use gradients or shadows; Memphis is flat and outlined
  • do not centre everything symmetrically; tilt and offset
  • do not make it tasteful; the style is loud by design

Known for it: Ettore Sottsass furniture, Saved by the Bell titles, 80s Nickelodeon branding, Mailchimp 2018 illustrations (partial)

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

Build the site in Memphis style. Background #ffffff, text and outlines #000000, fills #ff6f91, #19a7ce, #ffd93d, #b39ddb and #2ec4b6. Font Jost: headings 700 uppercase at 56/36/24px with 0.05em tracking, body 400 at 17px. Scatter inline SVG shapes behind the hero at fixed positions: a pink squiggle, a black zigzag, a yellow circle, a lavender triangle and a field of small black dots; each shape has a 3px black outline and a slight rotation (-12deg to 15deg). Cards and buttons: flat fills, border 3px solid #000, border-radius 0 or full circle for badges, no shadows. Section backgrounds alternate white, #ffd93d and a black-and-white polka dot pattern (radial-gradient, 12px, opacity 0.15). Nav is a black bar with white uppercase links. Hover: fill swaps to the next palette colour instantly. Motion limited to a gentle 6s float on two decorative shapes.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in Memphis style. Background #ffffff, text and outlines #000000, fills #ff6f91, #19a7ce, #ffd93d, #b39ddb and #2ec4b6. Font Jost: headings 700 uppercase at 56/36/24px with 0.05em tracking, body 400 at 17px. Scatter inline SVG shapes behind the hero at fixed positions: a pink squiggle, a black zigzag, a yellow circle, a lavender triangle and a field of small black dots; each shape has a 3px black outline and a slight rotation (-12deg to 15deg). Cards and buttons: flat fills, border 3px solid #000, border-radius 0 or full circle for badges, no shadows. Section backgrounds alternate white, #ffd93d and a black-and-white polka dot pattern (radial-gradient, 12px, opacity 0.15). Nav is a black bar with white uppercase links. Hover: fill swaps to the next palette colour instantly. Motion limited to a gentle 6s float on two decorative shapes.

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

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