Playfulsystem
Corporate Memphis / Alegria
This prompt produces genuinely distinct output
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.
corporate memphisalegriasaasstartupfriendly
Added February 16, 2026 by unslop.dev
Example output
Friendly feature grid
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.
View code
<div style="padding: 2rem; background: #f8f9fc;">
<div style="max-width: 36rem; text-align: center; margin: 0 auto;">
<span style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 600; color: #8b5cf6; background: #e8dff5; padding: 0.25rem 1rem; border-radius: 9999px; display: inline-block; margin-bottom: 1rem;">Features</span>
<h2 style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 1.75rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.5rem 0;">Everything you need to grow</h2>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.9375rem; color: #64748b; margin: 0 0 2rem 0;">Simple tools for complex problems. Built for teams of all sizes.</p>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
<div style="background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-align: center;">
<div style="width: 48px; height: 48px; background: #dbe8fd; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.25rem;">âš¡</div>
<h3 style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.9375rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.375rem 0;">Lightning Fast</h3>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.8125rem; color: #64748b; line-height: 1.5; margin: 0;">Deploy in seconds, not hours. Speed is our obsession.</p>
</div>
<div style="background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-align: center;">
<div style="width: 48px; height: 48px; background: #fde8d8; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.25rem;">🔒</div>
<h3 style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.9375rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.375rem 0;">Secure by Default</h3>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.8125rem; color: #64748b; line-height: 1.5; margin: 0;">Enterprise-grade security without the enterprise headaches.</p>
</div>
<div style="background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-align: center;">
<div style="width: 48px; height: 48px; background: #d4f0e7; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.25rem;">📊</div>
<h3 style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.9375rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.375rem 0;">Smart Analytics</h3>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.8125rem; color: #64748b; line-height: 1.5; margin: 0;">Insights that actually help. No vanity metrics here.</p>
</div>
</div>
</div>
</div>Friendly pricing card
View code
<div style="padding: 2rem; background: #f8f9fc;">
<div style="max-width: 20rem; background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; border: 2px solid #4a6cf7;">
<div style="background: linear-gradient(135deg, #4a6cf7, #8b5cf6); padding: 1.5rem; text-align: center;">
<span style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.1em;">Most Popular</span>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 800; color: #fff; margin: 0.25rem 0 0 0;">$29<span style="font-size: 1rem; font-weight: 400;">/mo</span></p>
</div>
<div style="padding: 1.5rem;">
<h3 style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 1.125rem; font-weight: 700; color: #1a1a2e; margin: 0 0 1rem 0; text-align: center;">Pro Plan</h3>
<div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 20px; height: 20px; background: #d4f0e7; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: #22c55e;">✓</span>
<span style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.875rem; color: #64748b;">Unlimited projects</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 20px; height: 20px; background: #d4f0e7; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: #22c55e;">✓</span>
<span style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.875rem; color: #64748b;">Priority support</span>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="width: 20px; height: 20px; background: #d4f0e7; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: #22c55e;">✓</span>
<span style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.875rem; color: #64748b;">Advanced analytics</span>
</div>
</div>
<button style="width: 100%; background: #4a6cf7; color: #fff; border: none; border-radius: 12px; padding: 0.75rem; font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.9375rem; font-weight: 700; cursor: pointer;">Get Started</button>
</div>
</div>
</div>Testimonial block
"
This completely transformed how our team works. We shipped 3x faster in the first month. I honestly can't imagine going back.
SK
Sarah Kim
Head of Engineering, Acme Inc.
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 28rem; background: #f8f9fc; border-radius: 20px; padding: 2rem;">
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 2rem; color: #e8dff5; margin: 0 0 0.5rem 0; line-height: 1;">"</p>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.9375rem; color: #1a1a2e; line-height: 1.7; margin: 0 0 1.5rem 0; font-style: italic;">This completely transformed how our team works. We shipped 3x faster in the first month. I honestly can't imagine going back.</p>
<div style="display: flex; align-items: center; gap: 0.75rem;">
<div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #fde8d8, #ff6b6b); display: flex; align-items: center; justify-content: center;">
<span style="font-family: 'Nunito', sans-serif; font-size: 0.875rem; font-weight: 700; color: #fff;">SK</span>
</div>
<div>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 700; color: #1a1a2e; margin: 0;">Sarah Kim</p>
<p style="font-family: 'Nunito', 'Poppins', sans-serif; font-size: 0.75rem; color: #64748b; margin: 0;">Head of Engineering, Acme Inc.</p>
</div>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in the Corporate Memphis / Alegria aesthetic — the ubiquitous design language of big tech and SaaS companies circa 2018-2023. Named after Facebook's "Alegria" illustration system, it features flat, friendly shapes, muted pastels with bright pops, oversized rounded elements, generous whitespace, and an aggressively approachable personality. Everything feels safe, optimistic, and corporate-friendly. VISUAL RULES: - Color palette: Muted pastels with saturated accents. Lavender (#e8dff5), soft peach (#fde8d8), mint (#d4f0e7), light sky (#dbe8fd). Primary accent: friendly blue (#4a6cf7) or warm coral (#ff6b6b). Secondary: soft purple (#8b5cf6). - Background: White (#ffffff) or very light gray (#f8f9fc). Vast empty space. The design breathes. - Surfaces: White cards with very subtle shadows. `box-shadow: 0 2px 12px rgba(0,0,0,0.06)`. Soft and approachable. - Text: Dark charcoal (#1a1a2e) for headings. Medium gray (#64748b) for body. Never pure black — too harsh. - Typography: Rounded, friendly sans-serif. `font-family: 'Nunito', 'Poppins', 'DM Sans', sans-serif`. Medium weight for headings, regular for body. Never thin, never heavy. Friendly middle ground. - Borders: Minimal. When used, very light (#e2e8f0), 1px, rounded. - Border radius: Large everywhere. 12-16px on cards. 8px on buttons. 24px on pills/badges. Everything is soft and rounded. - Spacing: Very generous. 48-64px between sections. 24-32px padding inside cards. Nothing feels cramped. - Illustrations area: Large reserved spaces (200px+) for flat illustrations. Pastel blob backgrounds behind illustration zones. SPECIFIC PATTERNS: - Cards: White, large border-radius (16px), subtle shadow. Generous internal padding. Often with a pastel accent bar or blob background. - Buttons: Rounded (8-12px radius), friendly blue or coral fill, white text. Large click targets. No sharp edges. - Feature blocks: Icon (emoji or simple shape) + heading + short description. Arranged in 2-3 column grids. - Pricing cards: Rounded, pastel accent headers, centered text, large CTA button. Popular plan highlighted with accent color. - Badges/pills: Very rounded (24px), pastel fill, darker text of same hue. Small and friendly. - Testimonials: Large quote marks, avatar circle, soft card. Warm and human. - Metrics: Big friendly numbers in accent color, small label below. No aggressive data visualization. ANTI-PATTERNS: - No sharp corners. Everything rounded. - No dark themes. Light and airy only. - No aggressive colors. Even accents are approachable. - No dense information layouts. Space is abundant. - No technical/complex visual patterns. Keep it simple. - No decorative complexity. Flat and clean.
Related prompts
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.
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
Psychedelic 60s
system
Generates UI dripping with 1960s psychedelic poster energy — swirling color combos, organic curves, high-contrast complementary palettes, op-art patterns, and the mind-expanding visuals of the Summer of Love.