Design for AI

Art Deco: UI design prompt

Palette, type rules and a pasteable prompt for art deco. Also called Art Deco web, Gatsby style, 1920s luxury, geometric luxury, deco gold. 1920s-1930s; web revival for hospitality, spirits, events, and 2013 Gatsby film wave.

Traits

  • symmetry, sunbursts, fans, chevrons, stepped forms (ziggurats)
  • gold or brass metallic lines on deep black, navy or emerald
  • tall condensed geometric caps with extreme letter-spacing
  • ornamental frames and corner brackets around content
  • thin double-line borders, radiating line patterns
  • luxurious, formal, centred compositions
  • restrained motion: slow fades, a shimmer on gold

Palette

#0d0d0d black, #c9a227 gold, #f3e9d2 champagne text, #14343b deep teal, #6e1423 burgundy

Type

Poiret One, Limelight, Josefin Sans (300, uppercase, 0.2-0.3em tracking) for display; Cormorant Garamond or Cinzel for headings; Josefin Sans or Lato for body at 16px

Do

  • build one sunburst or fan pattern in SVG and reuse it as section header ornament
  • use double 1px gold lines with a 4px gap for frames and dividers
  • centre everything; Deco is symmetrical by nature

Don't

  • do not use bright gold (#ffd700); use muted brass #c9a227 to avoid a casino look
  • do not add rounded corners; steps and points only
  • do not use more than one metallic; gold or silver, not both

Known for it: Chrysler Building and Empire State imagery, The Great Gatsby (2013), Ritz hotels, Hendrick's and Bombay Sapphire campaigns

CSS seed
:root {
  --bg: #0d0d0d;
   --fg: #f3e9d2;
   --accent: #c9a227;
   --accent2: #14343b;
   --radius: 0;
   --frame: 1px solid #c9a227;
   --font: 'Josefin Sans',sans-serif;
   --font-display: 'Poiret One',sans-serif
}
Prompt

Build the site in Art Deco style. Background #0d0d0d, text #f3e9d2, gold #c9a227, secondary surface #14343b. Everything centred and symmetrical. Fonts: Poiret One for the hero title at 72px uppercase with 0.25em letter-spacing; Cinzel 600 for section headings at 32px uppercase 0.15em; Josefin Sans 300 at 16px for body, line-height 1.7. Frames: double gold lines (1px #c9a227, 4px gap, 1px #c9a227) around the hero and around cards, with small gold corner brackets. Section dividers: an inline SVG sunburst of radiating gold lines centred above each heading. Buttons: transparent with 1px gold border and gold uppercase text, hover fills gold with #0d0d0d text over 300ms. Use a chevron or stepped ziggurat SVG pattern as a subtle background band (opacity 0.08). No border-radius, no shadows, no bright gold. Motion: a slow 1.2s fade on load and a 3s shimmer (gradient sweep) across gold rules.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in Art Deco style. Background #0d0d0d, text #f3e9d2, gold #c9a227, secondary surface #14343b. Everything centred and symmetrical. Fonts: Poiret One for the hero title at 72px uppercase with 0.25em letter-spacing; Cinzel 600 for section headings at 32px uppercase 0.15em; Josefin Sans 300 at 16px for body, line-height 1.7. Frames: double gold lines (1px #c9a227, 4px gap, 1px #c9a227) around the hero and around cards, with small gold corner brackets. Section dividers: an inline SVG sunburst of radiating gold lines centred above each heading. Buttons: transparent with 1px gold border and gold uppercase text, hover fills gold with #0d0d0d text over 300ms. Use a chevron or stepped ziggurat SVG pattern as a subtle background band (opacity 0.08). No border-radius, no shadows, no bright gold. Motion: a slow 1.2s fade on load and a 3s shimmer (gradient sweep) across gold rules.

## Tokens
:root { --bg:#0d0d0d; --fg:#f3e9d2; --accent:#c9a227; --accent2:#14343b; --radius:0; --frame:1px solid #c9a227; --font:'Josefin Sans',sans-serif; --font-display:'Poiret One',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.