Memphis Design
孟菲斯风格
Aliases:孟菲斯风格孟菲斯设计八十年代波普风波点波浪线装饰风彩色几何涂鸦风水磨石撞色风Memphis MilanoPostmodern Pop
What is it
The postmodern anti-functionalist language: squiggles, dots, zigzags and confetti spots in saturated clashing colors with bold black outlines, deliberately breaking grids and order. It embraces the cheap and the festive — happily ugly against modernist good taste.
Design spec
Typography
Bold sans with playful type
Color
Cream base; pink #FF5C8A, yellow #FFD23F, teal #3EC6A8
Border
2px black outlines
Shadow
4px 4px 0 offset hard shadows
Spacing
Deliberately tilted, misaligned
Motion
150ms light bouncy offsets with a short ease-out; honour prefers-reduced-motion
States
Hover offsets and deepens the hard shadow; focus shows a visible 2px black frame; active shifts flush to the shadow; disabled desaturates without shifting; error uses a pink accent
Style in action
See the full page, then try the interactive sceneFull-page preview
PLAY &
REPEAT!
Playful geometry from the eighties.
Polka dots · Zigzags · Candy colors
Start the party →Pink, blue, yellow and green
Dots and zigzags
Deliberately uneven
Interactive scene
Loading demo…
✓ When to use
- Streetwear, toys, parties and festivals that need joyful energy
- Children and creative education products — festive, non-threatening
- Short campaigns that must be unforgettable at a glance
✕ When not to use
- Tools and reading products used for long focused sessions
- Premium, restrained brands or serious decision-makers
- Dense interfaces where decoration drowns function
Variants
Classic Memphis
经典孟菲斯
Ettore Sottsass — black-and-white ground, big blobs, squiggles
Terrazzo
水磨石
Confetti fragments across the surface — density as texture
Neo-Memphis
新孟菲斯
Web-adapted — more whitespace, thinner outlines
Implementation
background-image: radial-gradientborder: 3px solid #000box-shadow: 5px 5px 0border-radius: 50%clip-pathThe classic recipe: a black-and-white geometric ground (dots via tiled radial-gradient, stripes via repeating-linear-gradient); elements in saturated clashes (lemon, coral, lake blue, violet) with 2–3px black outlines and offset solid shadows; squiggles and zigzags as SVG or clip-path, capped at three to five. Dark mode swaps black for ink blue and keeps the saturation.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a Memphis Design card and button section in the current project. Inspect the existing design tokens first; scope the Memphis palette and ground patterns independently. Requirements: - Black-and-white geometric ground (dots/stripes) + saturated clash blocks + black outlines + offset solid shadows - Three to five doodle accents (squiggles, zigzags, shapes) - Text contrast compliant; decoration never carries key information - Dark mode on ink blue with saturation kept - Respect prefers-reduced-motion for hover effects - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language of playing composition with geometry: circle, triangle and square in primary red, yellow and blue plus black, asymmetric yet balanced. Decoration obeys function — every plane and line carries structure, and a poster reads as a study in geometric relations.
StylesSimilarA loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.
StylesSimilarA visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffects