Playfulsystem
Tropical Deco
This prompt produces genuinely distinct output
Generates UI merging Art Deco geometry with tropical paradise — flamingo pinks, palm greens, golden sunburst patterns, and the glamorous optimism of a 1930s Miami hotel lobby. Gatsby goes to the beach.
tropicalart decomiamiflamingogolden
Added February 16, 2026 by unslop.dev
Example output
Resort welcome card
View code
<div style="padding: 2rem; background: #faf5ee;">
<div style="max-width: 24rem; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(42,31,26,0.06), 0 1px 3px rgba(42,31,26,0.04);">
<div style="height: 3px; background: linear-gradient(90deg, #c8982c, #e8607a, #2d8a6e);"></div>
<div style="padding: 1.75rem;">
<div style="text-align: center; margin-bottom: 1.25rem;">
<span style="font-family: 'Century Gothic', Futura, 'Gill Sans', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3em; color: #c8982c;">—— ✦ ——</span>
</div>
<h3 style="font-family: 'Century Gothic', Futura, 'Gill Sans', sans-serif; font-size: 1.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #2a1f1a; text-align: center; margin: 0 0 0.625rem 0;">Welcome to Paradise</h3>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.8125rem; color: #6b5e54; line-height: 1.65; text-align: center; margin: 0 0 1.5rem 0;">Your suite is ready. Complimentary sunset cocktails begin at 6pm on the terrace. Dress code: island elegance.</p>
<div style="display: flex; gap: 0.5rem; justify-content: center;">
<button style="background: #e8607a; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(232,96,122,0.25);">Reserve</button>
<button style="background: transparent; color: #2d8a6e; border: 1.5px solid #2d8a6e; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; cursor: pointer;">Explore</button>
</div>
</div>
</div>
</div>Deco button palette
View code
<div style="padding: 2rem; background: #faf5ee; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;"> <button style="background: #e8607a; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Century Gothic', Futura, 'Gill Sans', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(232,96,122,0.2);">🌴 Flamingo</button> <button style="background: #2d8a6e; color: white; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Century Gothic', Futura, 'Gill Sans', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(45,138,110,0.2);">Palm</button> <button style="background: transparent; color: #c8982c; border: 1.5px solid #c8982c; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Century Gothic', Futura, 'Gill Sans', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; cursor: pointer;">✦ Gold</button> <button style="background: #f0ece4; color: #a09080; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: 'Century Gothic', Futura, 'Gill Sans', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; cursor: not-allowed; opacity: 0.5;">Closed</button> </div>
Sunset stats
✦ Season Highlights ✦
243
Sunsets captured
28°
Average warmth
∞
Good vibes
View code
<div style="padding: 2rem; background: #fdf5f0;">
<div style="max-width: 30rem;">
<div style="text-align: center; margin-bottom: 1.25rem;">
<span style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3em; color: #c8982c;">✦   Season Highlights   ✦</span>
</div>
<div style="display: flex; gap: 0.75rem;">
<div style="flex: 1; background: white; border-radius: 10px; padding: 1.25rem; text-align: center; box-shadow: 0 2px 8px rgba(42,31,26,0.04); border-top: 3px solid #e8607a;">
<p style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.75rem; font-weight: 700; color: #e8607a; margin: 0; line-height: 1;">243</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; color: #a09080; margin: 0.375rem 0 0 0;">Sunsets captured</p>
</div>
<div style="flex: 1; background: white; border-radius: 10px; padding: 1.25rem; text-align: center; box-shadow: 0 2px 8px rgba(42,31,26,0.04); border-top: 3px solid #2d8a6e;">
<p style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.75rem; font-weight: 700; color: #2d8a6e; margin: 0; line-height: 1;">28°</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; color: #a09080; margin: 0.375rem 0 0 0;">Average warmth</p>
</div>
<div style="flex: 1; background: white; border-radius: 10px; padding: 1.25rem; text-align: center; box-shadow: 0 2px 8px rgba(42,31,26,0.04); border-top: 3px solid #c8982c;">
<p style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.75rem; font-weight: 700; color: #c8982c; margin: 0; line-height: 1;">∞</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; color: #a09080; margin: 0.375rem 0 0 0;">Good vibes</p>
</div>
</div>
</div>
</div>Hotel room selector
—— ✦ ——
Choose Your Suite
🌴
Garden View
Palm terrace, king bed, rain shower
$220
/ night
🌊
Ocean Suite
PopularPanoramic ocean, private balcony, spa bath
$380
/ night
✦
Penthouse Villa
Rooftop infinity pool, butler service
$750
/ night
View code
<div style="padding: 2rem; background: #faf5ee;">
<div style="max-width: 32rem;">
<div style="text-align: center; margin-bottom: 1.25rem;">
<span style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3em; color: #c8982c;">—— ✦ ——</span>
<h2 style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #2a1f1a; margin: 0.75rem 0 0 0;">Choose Your Suite</h2>
</div>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<div style="background: white; border-radius: 10px; padding: 1.25rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: 0 2px 8px rgba(42,31,26,0.04); border: 1.5px solid transparent;">
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f0ece4 0%, #e8e0d4 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 1.5rem;">🌴</span>
</div>
<div style="flex: 1;">
<h3 style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.9375rem; font-weight: 700; color: #2a1f1a; margin: 0;">Garden View</h3>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; color: #a09080; margin: 0.125rem 0 0 0;">Palm terrace, king bed, rain shower</p>
</div>
<div style="text-align: right;">
<p style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.125rem; font-weight: 700; color: #2d8a6e; margin: 0;">$220</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; color: #a09080; margin: 0;">/ night</p>
</div>
</div>
<div style="background: white; border-radius: 10px; padding: 1.25rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: 0 4px 16px rgba(232,96,122,0.08); border: 1.5px solid #e8607a;">
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #fde8ec 0%, #f8d0d8 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 1.5rem;">🌊</span>
</div>
<div style="flex: 1;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<h3 style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.9375rem; font-weight: 700; color: #2a1f1a; margin: 0;">Ocean Suite</h3>
<span style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.15em; background: #e8607a; color: white; padding: 0.0625rem 0.375rem; border-radius: 4px;">Popular</span>
</div>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; color: #a09080; margin: 0.125rem 0 0 0;">Panoramic ocean, private balcony, spa bath</p>
</div>
<div style="text-align: right;">
<p style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.125rem; font-weight: 700; color: #e8607a; margin: 0;">$380</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; color: #a09080; margin: 0;">/ night</p>
</div>
</div>
<div style="background: white; border-radius: 10px; padding: 1.25rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: 0 2px 8px rgba(42,31,26,0.04); border: 1.5px solid transparent;">
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #fdf3e4 0%, #f8e8cc 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span style="font-size: 1.5rem;">✦</span>
</div>
<div style="flex: 1;">
<h3 style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.9375rem; font-weight: 700; color: #2a1f1a; margin: 0;">Penthouse Villa</h3>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; color: #a09080; margin: 0.125rem 0 0 0;">Rooftop infinity pool, butler service</p>
</div>
<div style="text-align: right;">
<p style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.125rem; font-weight: 700; color: #c8982c; margin: 0;">$750</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; color: #a09080; margin: 0;">/ night</p>
</div>
</div>
</div>
</div>
</div>Navigation bar
View code
<div style="background: #faf5ee; border-bottom: 1px solid rgba(200,152,44,0.2);">
<div style="max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; height: 3.5rem;">
<div style="display: flex; align-items: center; gap: 0.375rem;">
<span style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.125rem; font-weight: 700; color: #2a1f1a; letter-spacing: 0.06em; text-transform: uppercase;">Palma</span>
<span style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 1.125rem; color: #c8982c;">✦</span>
</div>
<div style="display: flex; gap: 1.5rem; align-items: center;">
<a style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #e8607a; font-weight: 700; text-decoration: none; cursor: pointer;">Rooms</a>
<a style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6b5e54; font-weight: 600; text-decoration: none; cursor: pointer;">Dining</a>
<a style="font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6b5e54; font-weight: 600; text-decoration: none; cursor: pointer;">Spa</a>
<button style="background: #2d8a6e; color: white; border: none; border-radius: 6px; padding: 0.375rem 1rem; font-family: 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; cursor: pointer;">Book Now</button>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a Tropical Deco style — the intersection of Art Deco geometric elegance and tropical paradise exuberance. Think 1930s Miami Beach architecture, flamingo pinks, palm greens, golden sunburst motifs, and the glamorous optimism of a seaside cocktail lounge. Geometric precision meets lush natural warmth. Every interface looks like the lobby of a boutique hotel on Ocean Drive. VISUAL RULES: - Background: Warm cream (#faf5ee) or soft peachy-white (#fdf5f0) for light surfaces. Pale mint (#f0f8f4) as an alternate surface color. The warmth of tropical sunlight on pale stucco. - Primary: Flamingo pink (#e8607a). Bold, warm, celebratory. Used for CTAs, key accents, and hero elements. - Secondary: Palm green (#2d8a6e). Rich tropical foliage green. For badges, secondary actions, and nature references. - Tertiary: Deco gold (#c8982c). For decorative elements, borders, geometric patterns, and premium accents. - Text: Dark warm brown (#2a1f1a) for headings, warm medium (#6b5e54) for body, muted tan (#a09080) for metadata. - Typography: Elegant geometric sans for headings: `font-family: 'Century Gothic', 'Futura', 'Gill Sans', sans-serif`. Clean serif for body: `font-family: 'Palatino Linotype', Georgia, serif`. The deco contrast of geometric and classic. - Borders: 1-2px in gold or green. Decorative, not structural. Double-line borders for emphasis. - Border radius: Moderate. 8px-12px on cards. 6px on buttons. Smooth but not bubbly. - Shadows: Warm and soft. `box-shadow: 0 4px 16px rgba(42,31,26,0.06), 0 1px 3px rgba(42,31,26,0.04)`. Nothing cold or blue-tinted. - Geometric patterns: Sunburst lines, fan shapes (like palm fronds or Art Deco arches), zigzag borders. Use border-top with a gradient or repeated symbols for deco pattern effects. - Decorative: Palm frond emoji (🌴), sunburst (✦), geometric diamonds (◆). Use sparingly for tropical charm. SPECIFIC PATTERNS: - Cards: Cream bg, subtle warm shadow, small border-radius. Optional gold or pink top border (3px) as deco crown. Generous padding. - Buttons primary: bg-flamingo-pink text-white. Rounded (8px). Uppercase, geometric sans, tracked. Warm pink shadow. - Buttons secondary: bg-palm-green text-white. Same style, different color. - Buttons outline: Gold or pink border, matching text, transparent bg. - Section headers: Centered, geometric sans, uppercase, tracked. Flanked by decorative elements (—— ✦ ——) or thin gold lines. - Badges: Small rounded rectangles in green or gold, white text, uppercase. - Dividers: Thin gold line with centered geometric motif. Or a fan/sunburst pattern of radiating lines. ANTI-PATTERNS: - No dark mode. This aesthetic lives in tropical sunlight. - No cold blues or cool grays. Everything is warm-toned. - No monospace fonts. Keep it elegant and geometric. - No brutalist heaviness. This is glamorous, not raw. - No neon or electric colors. Colors are rich but not fluorescent. - No minimal austerity. This aesthetic embraces decoration and ornamentation.
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.
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.
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.