Art Deco
Generates UI inspired by 1920s Art Deco โ geometric patterns, gold on dark backgrounds, symmetrical layouts, Didot-style serifs, and the luxurious geometry of the Chrysler Building lobby.
Added February 13, 2026 by unslop.dev
Example output
Invitation-style card
The Grand
Opening Gala
Join us for an evening of extraordinary design, live music, and curated experiences at the Metropolitan.
View code
<div style="padding: 3rem; background: #0f0f0f; display: flex; justify-content: center;">
<div style="background: #161616; border: 1px solid rgba(212,168,67,0.3); padding: 3rem 2.5rem; max-width: 24rem; text-align: center;">
<div style="font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #d4a843; margin-bottom: 0.5rem; font-family: sans-serif;">โ Exclusive Access โ</div>
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,67,0.4), transparent); margin: 1rem 2rem;"></div>
<h2 style="font-family: 'Playfair Display', 'Georgia', serif; font-size: 1.75rem; font-weight: 700; color: #f5f0e1; margin: 0 0 0.75rem 0; letter-spacing: -0.01em; line-height: 1.2;">The Grand<br>Opening Gala</h2>
<p style="font-size: 0.875rem; color: #b0a899; line-height: 1.7; margin: 0 0 1.5rem 0; font-family: 'Georgia', serif;">Join us for an evening of extraordinary design, live music, and curated experiences at the Metropolitan.</p>
<div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,67,0.4), transparent); margin: 0 2rem 1.5rem;"></div>
<div style="font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7a7060; margin-bottom: 1.5rem;">March 15, 2026 ยท 7:00 PM</div>
<button style="background: transparent; border: 1px solid rgba(212,168,67,0.5); color: #d4a843; padding: 0.75rem 2.5rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; font-family: sans-serif;">Reserve Your Place</button>
</div>
</div>Geometric section header
Crafted With
Precision & Purpose
Every detail considered. Every element intentional. We create experiences that endure beyond the moment.
View code
<div style="padding: 3rem; background: #0f0f0f; text-align: center;">
<div style="max-width: 32rem; margin: 0 auto;">
<div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;">
<div style="height: 1px; width: 3rem; background: rgba(212,168,67,0.4);"></div>
<span style="color: #d4a843; font-size: 0.8125rem; letter-spacing: 0.25em; text-transform: uppercase; font-family: sans-serif;">Our Services</span>
<div style="height: 1px; width: 3rem; background: rgba(212,168,67,0.4);"></div>
</div>
<h1 style="font-family: 'Playfair Display', 'Georgia', serif; font-size: 2.5rem; font-weight: 700; color: #f5f0e1; margin: 0 0 1rem 0; line-height: 1.15; letter-spacing: -0.02em;">Crafted With<br>Precision & Purpose</h1>
<p style="font-size: 0.9375rem; color: #b0a899; line-height: 1.75; margin: 0; font-family: 'Georgia', serif;">Every detail considered. Every element intentional. We create experiences that endure beyond the moment.</p>
<div style="margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
<div style="height: 1px; width: 2rem; background: rgba(212,168,67,0.3);"></div>
<span style="color: #d4a843; font-size: 0.625rem;">โ</span>
<div style="height: 1px; width: 2rem; background: rgba(212,168,67,0.3);"></div>
</div>
</div>
</div>Navigation bar
View code
<div style="background: #0f0f0f; border-bottom: 1px solid rgba(212,168,67,0.2);">
<div style="max-width: 56rem; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="color: #d4a843; font-size: 0.875rem;">โ</span>
<span style="font-family: 'Playfair Display', 'Georgia', serif; font-size: 1.125rem; font-weight: 700; color: #f5f0e1; letter-spacing: 0.05em;">AURELIAN</span>
</div>
<nav style="display: flex; gap: 2rem;">
<a href="#" style="font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #d4a843; text-decoration: none; font-family: sans-serif;">Collection</a>
<a href="#" style="font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7a7060; text-decoration: none; font-family: sans-serif;">Atelier</a>
<a href="#" style="font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7a7060; text-decoration: none; font-family: sans-serif;">Heritage</a>
<a href="#" style="font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7a7060; text-decoration: none; font-family: sans-serif;">Contact</a>
</nav>
</div>
</div>System prompt
You generate UI in an Art Deco style โ the geometric elegance of the 1920s translated to digital. Think Chrysler Building lobby, Great Gatsby invitations, luxury train carriage interiors. Symmetry, gold, geometric patterns, and serifs that command respect. This is maximalist luxury with mathematical precision. VISUAL RULES: - Background: Rich black (#0f0f0f) or deep navy (#0a0e1a). Sections can alternate with slightly lighter (#161616). Never white โ Art Deco lives in darkness. - Gold palette: Primary gold (#d4a843). Bright gold (#e8c560) for highlights. Muted gold (#a08030) for borders and subtle elements. Gold is THE accent โ nothing else competes. - Text: Warm cream (#f5f0e1) for headings. Soft gray (#b0a899) for body. Muted (#7a7060) for captions. Never pure white. - Typography: Serif for headings โ use `font-family: 'Playfair Display', 'Didot', 'Georgia', serif`. Uppercase letter-spacing: 0.15em for labels and subheadings. Sans-serif for body text: `font-family: 'Cormorant Garamond', 'Garamond', serif` or a clean sans. - Borders: Thin gold lines. `border: 1px solid rgba(212,168,67,0.3)`. Double-line borders for emphasis: use two nested elements with 2px gap. - Geometric motifs: Fan/sunburst shapes, chevron patterns, stepped forms, symmetrical line work. These appear as decorative dividers, corner ornaments, or section separators. - Spacing: Dramatic and symmetrical. Large padding (py-20 between sections), centered content, bilateral symmetry. Everything aligned to center axis. - Border radius: 0. Sharp corners everywhere. Art Deco is angular. SPECIFIC PATTERNS: - Cards: bg-[#161616] border 1px gold/30, p-8. Centered text. Gold thin rule below title. Generous internal spacing. - Buttons: Border 1px gold/50, transparent bg, gold text, uppercase tracking-widest text-xs. Hover: bg gold/10. Symmetrical padding. - Section dividers: Geometric lines โ centered gold rule with diamond or chevron in the middle. `โ` or `โฒ` characters, or CSS shapes. - Labels: ALL CAPS, letter-spacing: 0.2em, font-size: 0.6875rem, gold color. Used above headings as category markers. - Headers: Large serif, tracking-tight for display sizes. Centered. Often with a thin gold rule above and below. ANTI-PATTERNS: - No rounded corners. Everything is sharp, geometric, angular. - No blues, greens, pinks, or any non-gold accent colors. - No sans-serif headings. Serifs are non-negotiable for display text. - No asymmetric layouts. Art Deco demands symmetry. - No casual or playful tone. This is formal, opulent, commanding. - No icons or emoji. Use geometric shapes and typographic ornaments only.
Related prompts
Established 2019
The Art of
Quiet Design
We craft digital experiences for brands that understand the power of restraint. Less noise, more resonance.
01 — Strategy
Brand Positioning & Identity
We define the strategic foundation that every visual decision is built upon. Market analysis, competitive landscape, audience insight โ distilled into a clear, ownable position.
High Contrast Luxury
Generates premium, dark-background UI with dramatic spacing, gold or cream accents, thin serif typography, and the kind of restrained elegance you'd find in a high-end hotel lobby website.
Art Nouveau
Generates UI inspired by the Art Nouveau movement โ sinuous organic curves, botanical motifs, whiplash lines, Mucha-style decorative borders, and the belief that art should permeate every designed surface.
โฆ Proclamation
The Architecture of Enduring Interfaces
Great design, like great architecture, outlasts the fashions that surrounded its creation. Build with stone, not with straw.
Gothic Revival
Generates UI with the drama of cathedral architecture โ deep purples and blacks, gold tracery details, pointed arch motifs, and the solemn grandeur of medieval illuminated manuscripts meets modern dark UI.