Art Deco

---
name: art-deco
description: Apply the Art Deco visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Art Deco, mentions deco, Gatsby style, 1920s luxury, or describes black and gold palette, sunburst and fan motifs, chevron and stepped forms — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Art Deco Design System

1920s–30s luxe geometry: black grounds, metallic gold linework, emerald and cream, sunburst and chevron motifs, and tall geometric display type tracked wide in uppercase. Rigorously symmetric, stepped like a Manhattan skyscraper crown, and unapologetically glamorous.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Art Deco.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (deco, Gatsby style, 1920s luxury, streamline moderne, jazz age design), or describes its traits: black and gold palette; sunburst and fan motifs; chevron and stepped forms; thin gold rules and frames; wide-tracked uppercase display type; centered symmetry.

## Design tokens

### Color palette

- Near-black lacquer ground: `#0d0d0d` (--color-bg)
- Raised panel black: `#161616` (--color-surface)
- Champagne cream body text: `#f2ead3` (--color-text)
- Muted cream for captions: `#b3a98c` (--color-text-muted)
- Metallic gold — rules, frames, headings, CTAs: `#d4af37` (--color-accent)
- Deeper gold for gradient ends and hover states: `#c9a227` (--color-accent-deep)
- Emerald green — secondary fills and jewel accents: `#0f5132` (--color-accent-emerald)
- Hairline gold borders and dividers: `#d4af37` (--color-line)

### Typography

- Display / headings: Poiret One (fallback: Futura, Century Gothic, sans-serif) (ideal: ITC Anna, premium — use Poiret One as the free substitute)
- Body: Montserrat (fallback: Futura, Helvetica, sans-serif) (ideal: Futura Light, premium — use Montserrat as the free substitute)
- Type scale: 1.414 ratio, base 16px — computed steps: 16px / 23px / 32px / 45px / 64px / 90px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.3, letter-spacing 0.18em, uppercase
- Body: line-height 1.6, letter-spacing 0.03em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 144 — Generous and ceremonial: wide symmetric margins, tall section padding, ornamental dividers given room to breathe like a theatre programme.
- Border radius: none 0px, arch 999px 999px 0 0 — Square corners everywhere; the only curve permitted is the full arch (for frames and portrait masks) and circles within sunburst motifs.
- Border treatment: 1px solid #d4af37 — Thin gold rules, often doubled (1px, 4px gap, 1px) for frames; stepped/chevron corner treatments on feature panels.

### Shadows

- gold-glow: `0 0 24px rgba(212, 175, 55, 0.18)` — Subtle halo behind gold headlines and framed hero panels
- none: `none` — Default for cards and content — deco surfaces are flat lacquer, not floating layers

### Layout

- Max content width: 1200px
- Strict centered symmetry — mirror every asymmetric urge
- Stepped (ziggurat) section headers and panel corners
- Ornamental dividers: gold rule with a central diamond or fan glyph
- Vertical rhythm like a playbill: stacked centered blocks with ample padding

### Effects

- Metallic gold gradient (linear, #d4af37 to #c9a227 to #f2e08a) on large display type and icons
- Sunburst/fan radial linework as SVG section backdrops
- Chevron and scallop repeating patterns as thin decorative bands
- Double-rule gold frames with stepped corners

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 180ms / 320ms / 600ms
- Slow, stately fades and rises — nothing snaps
- Gold elements may shimmer once on entrance (gradient position sweep), never on loop
- Sunburst backdrops can rotate imperceptibly slowly behind heroes

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0d0d0d;
  --color-surface: #161616;
  --color-text: #f2ead3;
  --color-text-muted: #b3a98c;
  --color-accent: #d4af37;
  --color-accent-deep: #c9a227;
  --color-accent-emerald: #0f5132;
  --color-line: #d4af37;
  --radius-none: 0px;
  --radius-arch: 999px 999px 0 0;
  --shadow-gold-glow: 0 0 24px rgba(212, 175, 55, 0.18);
  --border-default: 1px solid #d4af37;
  --font-display: "Poiret One", Futura, "Century Gothic", sans-serif;
  --font-body: Montserrat, Futura, Helvetica, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.3;
  --leading-body: 1.6;
  --tracking-heading: 0.18em;
  --tracking-body: 0.03em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poiret+One:wght@400&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Black bar with thin gold bottom rule; centered wordmark in Poiret One flanked by symmetric link groups, uppercase, wide-tracked; gold underline grows from center on hover
- **Hero:** Centered uppercase Poiret One headline in gradient gold over a radiating sunburst SVG, double-rule frame with stepped corners, emerald accent line under the subhead
- **Card:** Surface black panel, 1px gold border with stepped corner notches, centered uppercase gold title, cream body, 32px padding
- **Button (primary):** Gold fill, near-black uppercase wide-tracked label, square corners; hover deepens to accent-deep with a faint glow
- **Button (secondary):** Transparent, 1px gold border, gold uppercase label; hover fills gold at 12% opacity
- **Form fields:** Black field, 1px gold bottom border only, cream text, uppercase gold micro-label above; focus doubles the underline

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A radiating gold sunburst or fan motif crowning a symmetric composition, framed by thin double gold rules with stepped ziggurat corners. Spend boldness here; keep everything else quiet.

## Do

- Mirror everything — symmetry is the spine of the style
- Spend ornament on frames, dividers, and one hero sunburst; keep interiors calm
- Track uppercase display type wide (0.15em+) and keep it thin and tall
- Use emerald sparingly as a jewel note against black and gold

## Don't

- Don't use bright saturated primaries — the palette is metallic and jewel-toned
- No rounded-corner cards or soft shadows; deco is lacquer and metal, not clay
- Don't set long body copy in the thin display face or in uppercase
- Avoid cluttering with more than one large motif per viewport

## Accessibility notes

- Gold (#d4af37) on near-black passes AA (about 9:1), but gold on emerald fails — never layer those two for text
- The thin Poiret One display face at wide tracking is decorative; keep it at 28px+ and never use it for body or UI labels
- Gradient-gold text needs a solid gold fallback color for forced-colors and high-contrast modes
- Shimmer effects must respect prefers-reduced-motion

## Reference sites

- V&A — Art Deco: https://www.vam.ac.uk
- The Met — Art Deco holdings: https://www.metmuseum.org
- Art Deco Society UK: https://artdecosociety.uk

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip art-deco.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/art-deco.json

Settings → Capabilities → Skills → Upload skill → art-deco.zip