Vaporwave Mall
Generates UI from a dead mall fever dream — pastel pinks and teals, Roman busts, faux-marble textures, Japanese text fragments, and the melancholy beauty of abandoned consumer paradise. A E S T H E T I C.
Added February 16, 2026 by unslop.dev
Example output
Product display card
N E W A R R I V A L
PARADISE
楽園
A curated collection for dreamers navigating the corridors of eternal now.
View code
<div style="padding: 2.5rem; background: #fff;">
<div style="max-width: 22rem; border: 1px solid rgba(240,160,192,0.3); padding: 0; text-align: center;">
<div style="height: 100px; background: linear-gradient(135deg, #f8f4fa 0%, #f0e8f4 50%, #e8f4f4 100%); display: flex; align-items: center; justify-content: center;">
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 2.5rem; color: rgba(240,160,192,0.3);">🏛</span>
</div>
<div style="padding: 1.5rem; border-top: 1px solid rgba(240,160,192,0.2);">
<p style="font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 0.5625rem; letter-spacing: 0.35em; text-transform: uppercase; color: #40c0c0; margin: 0 0 0.75rem 0;">N E W A R R I V A L</p>
<h3 style="font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 1.125rem; letter-spacing: 0.2em; text-transform: uppercase; color: #f0a0c0; margin: 0 0 0.375rem 0; font-weight: 400;">PARADISE</h3>
<p style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.6875rem; color: rgba(240,160,192,0.5); margin: 0 0 1rem 0;">楽園</p>
<p style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #606070; line-height: 1.6; margin: 0 0 1.25rem 0;">A curated collection for dreamers navigating the corridors of eternal now.</p>
<button style="background: #f0a0c0; color: white; border: none; padding: 0.5rem 2rem; font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer;">E X P L O R E</button>
</div>
</div>
</div>Button collection
View code
<div style="padding: 2rem; background: #fff; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;"> <button style="background: #f0a0c0; color: white; border: none; padding: 0.5rem 1.5rem; font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;">D R E A M</button> <button style="background: #40c0c0; color: white; border: none; padding: 0.5rem 1.5rem; font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;">F L O W</button> <button style="background: white; color: #f0a0c0; border: 1px solid #f0a0c0; padding: 0.5rem 1.5rem; font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;">O U T L I N E</button> <button style="background: #e8e4f0; color: #b0a0d0; border: none; padding: 0.5rem 1.5rem; font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: not-allowed; opacity: 0.5;">C L O S E D</button> </div>
Mall directory
永遠
D I R E C T O R Y
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 28rem; text-align: center;">
<p style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.5rem; letter-spacing: 0.5em; color: #40c0c0; margin: 0 0 0.5rem 0;">永遠</p>
<h2 style="font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 1.25rem; letter-spacing: 0.3em; text-transform: uppercase; color: #f0a0c0; margin: 0 0 1.5rem 0; font-weight: 400;">D I R E C T O R Y</h2>
<div style="display: flex; flex-direction: column; gap: 0; text-align: left;">
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid rgba(240,160,192,0.15);">
<div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #606070;">Digital Dreams</span>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.625rem; color: rgba(176,160,208,0.6); margin-left: 0.5rem;">夢</span>
</div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.15em; color: #40c0c0;">L1-04</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid rgba(240,160,192,0.15);">
<div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #606070;">Marble & Chrome</span>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.625rem; color: rgba(176,160,208,0.6); margin-left: 0.5rem;">石</span>
</div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.15em; color: #40c0c0;">L2-11</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid rgba(240,160,192,0.15);">
<div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #606070;">Palm Court Cafe</span>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.625rem; color: rgba(176,160,208,0.6); margin-left: 0.5rem;">🌴</span>
</div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.15em; color: #f0a0c0;">L1-08</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 0;">
<div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #606070;">Sunset Records</span>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.625rem; color: rgba(176,160,208,0.6); margin-left: 0.5rem;">音</span>
</div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.15em; color: #40c0c0;">L3-02</span>
</div>
</div>
</div>
</div>Notification banner
S Y S T E M N O T I C E
The fountain court will be undergoing aesthetic maintenance. Please enjoy the food court on Level 2.
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 30rem; background: linear-gradient(135deg, rgba(240,160,192,0.06) 0%, rgba(64,192,192,0.06) 100%); border: 1px solid rgba(240,160,192,0.2); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem;">
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 1.25rem; color: #f0a0c0; flex-shrink: 0;">🏛</span>
<div style="flex: 1;">
<p style="font-family: Optima, 'Century Gothic', Futura, sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #f0a0c0; margin: 0 0 0.25rem 0;">S Y S T E M N O T I C E</p>
<p style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #606070; line-height: 1.5; margin: 0;">The fountain court will be undergoing aesthetic maintenance. Please enjoy the food court on Level 2.</p>
</div>
<span style="font-family: Optima, 'Century Gothic', sans-serif; font-size: 0.875rem; color: #c0c0c0; cursor: pointer;">×</span>
</div>
</div>System prompt
You generate UI in a vaporwave/mallsoft aesthetic — the dreamy, melancholic visual language of internet nostalgia art. Pastel pinks and teals on white, faux-marble and chrome textures, Japanese text fragments as decoration, and the eerie beauty of a shopping mall at 2am. Interfaces that exist in a liminal space between corporate design and surrealist art. ア エ ス テ テ ィ ッ ク VISUAL RULES: - Background: Clean white (#ffffff) or very pale lavender-pink (#f8f4fa). Faux-marble effect surfaces where possible. - Primary: Pastel pink (#f0a0c0). Soft, dreamy, consumer-nostalgia pink. For headings, accents, and primary elements. - Secondary: Teal (#40c0c0). Cool counterpoint to the pink. For secondary accents, links, and highlights. - Tertiary: Soft lavender (#b0a0d0) for tertiary elements. Chrome silver (#c0c0c0) for metallic accents. - Text: Medium gray (#606070) for body — not too dark, slightly cool. Pastel pink for headings. Teal for links. - Typography: Clean corporate sans-serif. `font-family: 'Optima', 'Century Gothic', 'Futura', 'Gill Sans', sans-serif`. Headings SPACED OUT: `letter-spacing: 0.3em+`. The w i d e text effect is signature vaporwave. - Borders: 1px solid at pastel tones. Pink or teal at low opacity. Nothing heavy. - Border radius: 0px on most elements (corporate/angular) or very large (9999px) on badges. The contrast is part of the aesthetic. - Spacing: Generous and airy. Content floats in white space like products in a display case. - Japanese text: Use fragments of katakana or kanji as purely decorative elements. e.g., `夢` (dream), `永遠` (eternity), `楽園` (paradise). Small, in lighter pink or teal. - Decorative: Roman column characters (🏛), palm tree (🌴), faux-marble patterns, chrome/reflective dividers. SPECIFIC PATTERNS: - Cards: White bg, thin pink or teal border, sharp corners. Wide-spaced uppercase label. Content feels like a product listing from an alternate reality. - Buttons: Pastel pink or teal fill, white text, sharp corners. WIDE letter-spacing. Or outlined with pastel border. - Headers: SPACED uppercase in pink or teal. `letter-spacing: 0.3em`. Sometimes with Japanese text underneath. - Dividers: Thin gradient lines from pink through teal. Or a centered Japanese character. - Badges: Chrome silver bg with dark text, or pink/teal pill shapes. - Imagery: References to marble, palms, sunsets, Roman architecture, early 3D renders. ANTI-PATTERNS: - No warm earthy tones. No brown, terracotta, olive. - No dark mode (pure). Keep it white and pastel. - No serif fonts. Corporate sans-serif only. - No heavy brutalist borders. - No high-saturation colors. Everything is pastel and dreamy. - No tight, dense layouts. Let things float.
Related prompts
Side B — Evening Mix
Recorded Feb 14, 2026 · C-90
Cassette Tape
Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.
A binary search tree maintains sorted order through its structure. For any node n, all values in the left subtree are < n and all values in the right subtree are > n.
Chalk Blackboard
Generates UI that feels hand-drawn on a dusty blackboard — chalky white text on dark slate green, imperfect lines, mathematical notation vibes, and the nostalgic warmth of a classroom after hours.
Skeuomorphism
Generates UI with rich real-world textures — leather stitching, brushed metal, wood grain, linen backgrounds, and glossy glass buttons. iOS 6 energy. Every pixel pretends to be a physical material.