# Art Deco

Also called: Art Deco web, Gatsby style, 1920s luxury, geometric luxury, deco gold  
Era: 1920s-1930s; web revival for hospitality, spirits, events, and 2013 Gatsby film wave  
Page: https://designforai.dev/style/art-deco

## 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

```css
: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.