Luxurysystem

Art Deco

84
๐Ÿ”ฅ Certified BangerThis prompt produces genuinely distinct output

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.

geometricgold accentssymmetrypremium

Added February 13, 2026 by unslop.dev

Example output

Invitation-style card

โ—† Exclusive Access โ—†

The Grand
Opening Gala

Join us for an evening of extraordinary design, live music, and curated experiences at the Metropolitan.

March 15, 2026 ยท 7:00 PM
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

Our Services

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

โ—† AURELIAN
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

Copy this into your AI 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.

8–12 week engagement Learn More →
Luxury

High Contrast Luxury

๐Ÿ”ฅ83system

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.

The Gallery Presents

Botanical Dreams

An exploration of natural forms in decorative art, featuring works from the golden age of organic design.

โ€”โ€” โœฆ โ€”โ€”

March 12 โ€“ April 28, 1898

Luxury

Art Nouveau

๐Ÿ”ฅ86system

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.

Luxury

Gothic Revival

๐Ÿ”ฅ84system

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.