Playfulsystem
Memphis Design
This prompt produces genuinely distinct output
Generates UI inspired by the Memphis Group — bold geometric shapes, clashing color combinations, squiggly lines, confetti patterns, and the joyfully chaotic energy of 1980s Italian postmodernism.
geometricbold colorspatterns80s
Added February 3, 2026 by unslop.dev
Example output
Memphis hero card
View code
<div style="padding: 2rem; background: #ffd23f; position: relative; overflow: hidden;">
<div style="position: absolute; top: 10px; right: 30px; width: 40px; height: 40px; border-radius: 50%; background: #ff5e8f; border: 3px solid black;"></div>
<div style="position: absolute; bottom: 20px; right: 80px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 35px solid #4a90e2; transform: rotate(15deg);"></div>
<div style="background: white; border: 3px solid black; box-shadow: 6px 6px 0 black; padding: 2rem; max-width: 22rem; position: relative; z-index: 1;">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
<div style="width: 12px; height: 12px; border-radius: 50%; background: #ff5e8f; border: 2px solid black;"></div>
<div style="width: 12px; height: 12px; background: #4a90e2; border: 2px solid black;"></div>
<div style="width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #2dd4bf;"></div>
</div>
<h2 style="font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 900; text-transform: uppercase; color: #1a1a1a; margin: 0 0 0.75rem 0; line-height: 1;">Design<br><span style="color: #ff5e8f;">Breaks</span><br>Rules</h2>
<p style="font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; color: #333; line-height: 1.6; margin: 0 0 1.5rem 0; font-weight: 500;">Good design knows the rules. Great design knows when to smash them into colorful little pieces.</p>
<div style="display: flex; gap: 0.5rem;">
<button style="background: #ff5e8f; color: white; border: 3px solid black; box-shadow: 3px 3px 0 black; padding: 0.625rem 1.25rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; cursor: pointer;">Join Now</button>
<button style="background: #4a90e2; color: white; border: 3px solid black; box-shadow: 3px 3px 0 black; padding: 0.625rem 1.25rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 900; text-transform: uppercase; cursor: pointer;">Explore</button>
</div>
</div>
</div>Badge and tag collection
Design
Radical
Postmodern
1980s
Chaos
View code
<div style="padding: 2rem; background: white; position: relative;">
<div style="display: flex; gap: 0.625rem; flex-wrap: wrap; max-width: 28rem;">
<span style="background: #ff5e8f; color: white; border: 2px solid black; box-shadow: 2px 2px 0 black; padding: 0.25rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase;">Design</span>
<span style="background: #ffd23f; color: #1a1a1a; border: 2px solid black; box-shadow: 2px 2px 0 black; padding: 0.25rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; border-radius: 9999px;">Radical</span>
<span style="background: #4a90e2; color: white; border: 2px solid black; box-shadow: 2px 2px 0 black; padding: 0.25rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase;">Postmodern</span>
<span style="background: #2dd4bf; color: #1a1a1a; border: 2px solid black; box-shadow: 2px 2px 0 black; padding: 0.25rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; border-radius: 9999px;">1980s</span>
<span style="background: #b794f6; color: white; border: 2px solid black; box-shadow: 2px 2px 0 black; padding: 0.25rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase;">Chaos</span>
</div>
</div>Feature blocks
Bold
Dare to make choices that make people feel something.
Wild
Combine what shouldn't be combined. That's where magic hides.
Free
No grid. No system. Just shape, color, and intention.
View code
<div style="padding: 2rem; background: #4a90e2;">
<div style="display: flex; gap: 0.75rem; max-width: 32rem;">
<div style="flex: 1; background: #ffd23f; border: 3px solid black; box-shadow: 4px 4px 0 black; padding: 1.25rem; position: relative;">
<div style="position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: #ff5e8f; border: 2px solid black;"></div>
<h3 style="font-family: 'DM Sans', sans-serif; font-size: 1.125rem; font-weight: 900; text-transform: uppercase; color: #1a1a1a; margin: 0 0 0.5rem 0;">Bold</h3>
<p style="font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #333; line-height: 1.5; margin: 0; font-weight: 500;">Dare to make choices that make people feel something.</p>
</div>
<div style="flex: 1; background: #ff5e8f; border: 3px solid black; box-shadow: 4px 4px 0 black; padding: 1.25rem; border-radius: 12px;">
<h3 style="font-family: 'DM Sans', sans-serif; font-size: 1.125rem; font-weight: 900; text-transform: uppercase; color: white; margin: 0 0 0.5rem 0;">Wild</h3>
<p style="font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: rgba(255,255,255,0.9); line-height: 1.5; margin: 0; font-weight: 500;">Combine what shouldn't be combined. That's where magic hides.</p>
</div>
<div style="flex: 1; background: white; border: 3px solid black; box-shadow: 4px 4px 0 black; padding: 1.25rem;">
<h3 style="font-family: 'DM Sans', sans-serif; font-size: 1.125rem; font-weight: 900; text-transform: uppercase; color: #1a1a1a; margin: 0 0 0.5rem 0;">Free</h3>
<p style="font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #333; line-height: 1.5; margin: 0; font-weight: 500;">No grid. No system. Just shape, color, and intention.</p>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a Memphis Design style — the joyful chaos of Ettore Sottsass and the Memphis Group. Bold geometric shapes, clashing colors that shouldn't work together but absolutely do, squiggly decorative lines, confetti-like accents, and asymmetric compositions. This is anti-minimalism. This is design that refuses to behave. VISUAL RULES: - Background: Bold and flat. Bright pink (#ff5e8f), electric blue (#4a90e2), sunny yellow (#ffd23f), or white with colored pattern overlays. Sections alternate colors dramatically. - Palette: Clashing on purpose. Pink (#ff5e8f), blue (#4a90e2), yellow (#ffd23f), teal (#2dd4bf), coral (#ff6b6b), lavender (#b794f6), green (#4ade80). Use 3-4 colors per component in combinations that create tension — pink next to yellow, blue next to teal. - Black: #1a1a1a as the grounding element. Black borders, black text, black shapes. Black holds the chaos together. - Text: Black (#1a1a1a) on light/colored backgrounds. White on dark. Bold is the baseline — headers in 800-900 weight. - Typography: `font-family: 'Sora', 'Space Grotesk', 'DM Sans', sans-serif`. Geometric sans-serif. Headings: UPPERCASE, letter-spacing: 0.05em, font-weight: 900. Body: font-weight: 500. Text feels architectural. - Shapes: Circles, triangles, squiggles, zigzag lines, and dots as DECORATION. These float around and behind content. A pink circle here, a yellow triangle there. They're not functional — they're joyful. - Borders: 3px solid black. Thick and confident. On cards, buttons, shapes. - Border radius: Mixed. Some elements sharp (0), some rounded (12px), some circular (50%). The mix IS the aesthetic. One card might be sharp while the next is rounded. - Shadows: Solid offset. `box-shadow: 5px 5px 0 black` or `box-shadow: 6px 6px 0 #ff5e8f` (colored shadows). Never blurred. - Patterns: Dots, stripes, zigzags, confetti as backgrounds. Use repeating-linear-gradient for stripes, radial-gradient for dots. Bold, visible, decorative. SPECIFIC PATTERNS: - Cards: White or colored bg, 3px black border, solid shadow. May have geometric shape decoration (circle in corner, triangle accent). Asymmetric layout encouraged. - Buttons: Solid color fill, 3px black border, solid shadow. UPPERCASE bold text. Different colors per button in a group. Hover: shift shadow direction. - Geometric decorations: Scattered circles, triangles, squares in various colors. Positioned absolutely, partially overlapping content. Not icons — abstract shapes. - Headers: HUGE text (text-4xl+), uppercase, multi-color. May split words across colors: "MEM" in pink, "PHIS" in blue. - Dividers: Zigzag or wavy lines instead of straight rules. In a contrasting color. ANTI-PATTERNS: - No muted colors. No pastels. No "sophisticated" restraint. GO BIG. - No subtle anything. No shadow-sm, no border-gray-200, no text-gray-400. - No matching colors. The palette should feel slightly wrong (that's what makes it right). - No minimalism. Fill the space. Add shapes. More is more. - No serif fonts. No handwriting. Bold geometric sans only. - No dark mode. Memphis lives in bright light and bright color.
Related prompts
847
Users
23
Issues
99%
Uptime
Playful
Isometric / Low-Poly 3D
system
Generates UI with isometric perspective and low-poly 3D aesthetics — CSS-transformed parallelograms, 30-degree angles, layered depth planes, faceted geometric shapes, and the charming dimensionality of a game world rendered in HTML.
Playful
Acid Rave
system
Generates UI pulsing with 90s rave energy — acid green on black, warped typography, smiley faces, repetitive grid patterns, and the frenetic joy of underground dance culture. 303 bassline as a design system.
Features
Everything you need to grow
Simple tools for complex problems. Built for teams of all sizes.
âš¡
Lightning Fast
Deploy in seconds, not hours. Speed is our obsession.
🔒
Secure by Default
Enterprise-grade security without the enterprise headaches.
📊
Smart Analytics
Insights that actually help. No vanity metrics here.
Playful
Corporate Memphis / Alegria
system
Generates UI in the Corporate Memphis / Alegria style — the flat illustration-driven aesthetic of big tech: oversized rounded shapes, muted-but-cheerful pastels, generous whitespace, and the friendly-corporate vibe of every SaaS landing page from 2018-2023.