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.
Added February 16, 2026 by unslop.dev
Example output
Ornamental exhibition card
View code
<div style="padding: 2rem; background: #faf6eb;">
<div style="max-width: 24rem; background: #faf0e0; border: 2px solid #c9a84c; outline: 1px solid #c9a84c; outline-offset: 4px; padding: 0; overflow: hidden;">
<div style="background: linear-gradient(180deg, #2a6b6b 0%, #3a7b6b 100%); padding: 1.5rem; text-align: center; border-bottom: 2px solid #c9a84c; border-radius: 0 0 50% 50% / 0 0 20px 20px;">
<p style="font-family: 'Palatino', 'Book Antiqua', Georgia, serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c9a84c; margin: 0 0 0.375rem 0;">The Gallery Presents</p>
<h3 style="font-family: 'Palatino', 'Book Antiqua', Georgia, serif; font-size: 1.5rem; font-weight: 400; color: #f5eed5; margin: 0; font-style: italic;">Botanical Dreams</h3>
</div>
<div style="padding: 1.5rem; text-align: center;">
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.875rem; color: #2c2418; line-height: 1.7; margin: 0 0 1.25rem 0;">An exploration of natural forms in decorative art, featuring works from the golden age of organic design.</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #c9a84c; letter-spacing: 0.15em; margin: 0 0 1.25rem 0;">ββ β¦ ββ</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.8125rem; color: #5c6b42; margin: 0 0 1.25rem 0;">March 12 β April 28, 1898</p>
<button style="background: transparent; color: #6b2d3e; border: 1.5px solid #c9a84c; border-radius: 9999px; padding: 0.5rem 2rem; font-family: 'Palatino', Georgia, serif; font-size: 0.8125rem; font-style: italic; cursor: pointer;">Reserve Admission</button>
</div>
</div>
</div>Botanical button collection
View code
<div style="padding: 2rem; background: #faf6eb; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;"> <button style="background: #2a6b6b; color: #f5eed5; border: 1.5px solid #c9a84c; border-radius: 9999px; padding: 0.5rem 2rem; font-family: 'Palatino', Georgia, serif; font-size: 0.875rem; font-style: italic; cursor: pointer;">Primary</button> <button style="background: transparent; color: #6b2d3e; border: 1.5px solid #c9a84c; border-radius: 9999px; padding: 0.5rem 2rem; font-family: 'Palatino', Georgia, serif; font-size: 0.875rem; font-style: italic; cursor: pointer;">Secondary</button> <button style="background: #c9a84c; color: #2c2418; border: 1.5px solid #2c2418; border-radius: 9999px; padding: 0.5rem 2rem; font-family: 'Palatino', Georgia, serif; font-size: 0.875rem; font-style: italic; cursor: pointer;">Accent</button> <button style="background: transparent; color: #c4917b; border: 1.5px solid #c4917b; border-radius: 9999px; padding: 0.5rem 2rem; font-family: 'Palatino', Georgia, serif; font-size: 0.875rem; font-style: italic; cursor: not-allowed; opacity: 0.5;">Disabled</button> </div>
Framed menu panel
β§
Carte du Jour
ββ β¦ ββ
Crème de Champignons
Wild mushroom veloutΓ© with truffle essence
18
β
Filet de Sole Meunière
Dover sole with brown butter and capers
34
β
Tarte aux Poires
Poached pear with almond frangipane
16
View code
<div style="padding: 2rem; background: #faf6eb;">
<div style="max-width: 20rem; background: #faf0e0; border: 2px solid #c9a84c; outline: 1px solid #c9a84c; outline-offset: 4px; padding: 1.75rem; text-align: center;">
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.6875rem; letter-spacing: 0.25em; text-transform: uppercase; color: #c9a84c; margin: 0 0 0.25rem 0;">β§</p>
<h3 style="font-family: 'Palatino', 'Book Antiqua', Georgia, serif; font-size: 1.375rem; font-weight: 400; color: #6b2d3e; margin: 0 0 0.25rem 0; font-style: italic;">Carte du Jour</h3>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #c9a84c; letter-spacing: 0.15em; margin: 0 0 1.5rem 0;">ββ β¦ ββ</p>
<div style="margin-bottom: 1.25rem;">
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.9375rem; color: #2c2418; margin: 0; font-style: italic;">Crème de Champignons</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #8a9a5b; margin: 0.25rem 0 0 0;">Wild mushroom veloutΓ© with truffle essence</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.8125rem; color: #c9a84c; margin: 0.25rem 0 0 0;">18</p>
</div>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #c4917b; margin: 0 0 1.25rem 0;">β</p>
<div style="margin-bottom: 1.25rem;">
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.9375rem; color: #2c2418; margin: 0; font-style: italic;">Filet de Sole Meunière</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #8a9a5b; margin: 0.25rem 0 0 0;">Dover sole with brown butter and capers</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.8125rem; color: #c9a84c; margin: 0.25rem 0 0 0;">34</p>
</div>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #c4917b; margin: 0 0 1.25rem 0;">β</p>
<div>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.9375rem; color: #2c2418; margin: 0; font-style: italic;">Tarte aux Poires</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.75rem; color: #8a9a5b; margin: 0.25rem 0 0 0;">Poached pear with almond frangipane</p>
<p style="font-family: 'Palatino', Georgia, serif; font-size: 0.8125rem; color: #c9a84c; margin: 0.25rem 0 0 0;">16</p>
</div>
</div>
</div>System prompt
You generate UI in the Art Nouveau aesthetic β the turn-of-century movement where organic, flowing lines and botanical forms permeated every surface. Inspired by Alphonse Mucha's posters, Hector Guimard's Paris Metro entrances, and the sinuous beauty of natural forms translated into decorative art. Every border is a vine, every frame an arch, every composition a garden. VISUAL RULES: - Color palette: Muted naturals with gold accents. Sage green (#8a9a5b), dusty rose (#c4917b), deep teal (#2a6b6b), warm cream (#f5eed5), antique gold (#c9a84c), deep burgundy (#6b2d3e), ivory (#faf6eb). - Background: Warm cream (#faf6eb) or ivory (#faf0e0). Soft, aged paper quality. Never stark white. - Gold accents: #c9a84c for borders, ornamental details, and highlights. The luxurious thread through everything. - Text: Deep brown-black (#2c2418) for primary. Burgundy (#6b2d3e) for headings and emphasis. Sage (#5c6b42) for secondary text. - Typography: Decorative serif for headings. `font-family: 'Palatino', 'Book Antiqua', 'Georgia', serif`. Body in elegant serif. Display text can use ornamental qualities β thin strokes with organic curves. - Borders: Ornamental. Double borders, decorative frames using CSS border combinations and outlines. 2px solid #c9a84c with an outer outline. Borders are DECORATIVE, not just functional. - Border radius: Organic curves. Top arches on cards (border-radius: 50% 50% 4px 4px or large top values). Pill shapes. Oval frames. - Spacing: Generous vertical spacing. Content breathes like illustrated pages. Sections feel like panels in a decorative poster. - Decorative elements: CSS-generated ornamental dividers using border patterns, thin rule lines with central ornaments (β, β§, β¦), arched tops on containers. SPECIFIC PATTERNS: - Cards: Cream bg, gold double-border frame, arched or ornamental top edge. Content feels like a framed panel. - Buttons: Pill-shaped or ornamentally bordered. Gold borders, cream or sage fill. Serif text. Hover: fill inverts. - Headers: Large serif, burgundy or gold, centered. Often with a decorative rule below. - Dividers: Thin gold lines with a central ornament symbol. `ββ β¦ ββ` style. - Frames: Double-border technique: inner border + outer outline offset to create a matted frame effect. - Lists: Botanical bullet markers (β, β), generous line spacing, serif text. - Labels: Small caps, letter-spaced, gold or sage. ANTI-PATTERNS: - No sharp geometric edges. Everything has organic flow. - No sans-serif fonts. Serif only. - No stark black or pure white. Warm and aged tones. - No flat, unadorned surfaces. Decoration is part of the design philosophy. - No neon or electric colors. Natural, botanical palette only. - No minimalism. Art Nouveau believes more ornament = more beauty.
Related prompts
β¦ 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.
Crossing the Meridian
Clear skies, Force 4 winds from the northwest. Made 142 nautical miles since last entry. All hands report satisfactory conditions.
Position
41Β°24'N 72Β°58'W
Heading
247Β° WSW
Speed
8.2 kn
Maritime Nautical
Generates UI with naval precision β deep navy, brass gold, white rope borders, compass roses, and the ordered elegance of a ship captain's chart room. Every interface is seaworthy.
The Grand
Opening Gala
Join us for an evening of extraordinary design, live music, and curated experiences at the Metropolitan.
Crafted With
Precision & Purpose
Every detail considered. Every element intentional. We create experiences that endure beyond the moment.
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.