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
The same page, ready to useStart the party, enter a name, guest count and colors and generate an invitation; edit and regenerate it. Homeware, Patterns, Party and Made in Italy reveal content; no invitations are sent.
Full-page preview · interact directly
What to look for
- 01Use Milano '88’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the Milano '88 task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete Milano '88 page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep Milano ’88’s cream ground, pink CTA, pink/yellow/teal cards and circle/triangle/rectangle hero. Retain the cards’ 2px radius and 4px 4px hard shadow, without adding full-screen monochrome dots or forcing 10px radii. The invitation uses its existing 2px black rim, 7px 7px hard shadow and 2deg tilt; name, guest count and palette update that card. Reuse current preview.tokens: background #FFF4E3; foreground #232323; accent #FF5C8A / #fff; card #FFFFFF; border #232323; radius 2px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow 4px 4px 0 #232323. Use generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows. Full-page operations: Start the party, enter a name, guest count and colors and generate an invitation; edit and regenerate it. Homeware, Patterns, Party and Made in Italy reveal content; no invitations are sent. Share one renderer between static covers, the detail experience and /style-scenes/memphis/ (English /en/style-scenes/memphis/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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