← Back to Skills / Marketplace / art-deco
SKL · 23PRO

ArtDeco.

The design language of the 1920s — gold accents, geometric symmetry, bold vertical lines, and a sense of occasion that makes everything it touches feel more important.

UNLOCK WITH PRO →
● Live preview · Art Deco demo
This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Art Deco is the design language of the 1920s and 30s — the era of jazz clubs, ocean liners, and skyscrapers going up for the first time. Gold accents, geometric symmetry, bold vertical lines, and a sense of occasion that makes everything it touches feel more important than it probably is. Nobody is doing this in web apps right now, which means if you do it well, your product is instantly the most visually distinctive thing in whatever category you're in.

● Looks Like
The Chrysler Building's lobbyGatsby-era hotel interiorsArt Deco film posters from the 30sSavoy cocktail menusThe Great Gatsby production designHigh-end casino aestheticsLuxury watch brand websites that actually have taste
02 · Best For / Avoid If
＋ Best For
+Luxury and premium consumer products
+Event platforms, ticketing, and hospitality apps
+Creative agencies and studio portfolios
+Fashion, jewelry, and lifestyle brands
+Restaurant and venue booking tools
+Any product where the experience is part of what you're selling
× Avoid If
×Your product needs to feel modern, minimal, or tech-forward — Art Deco reads as intentionally historical and that's not always what you want
×You have dense data or complex dashboards — the decorative geometry gets in the way of information-heavy screens
×Your audience skews young and casual — this aesthetic signals formality and occasion, which can feel stuffy to the wrong crowd
×You need dark mode as a primary experience — Art Deco lives almost entirely in light, gold-on-dark or black-on-cream compositions
03 · Design Philosophy
01

Symmetry is respect

Art Deco treats symmetry as a form of dignity — the idea that a well-ordered composition shows respect for whoever's looking at it. Everything is centered, mirrored, or deliberately balanced. You won't find the casual asymmetry of modern web design here; instead you get layouts that feel like they were measured twice before anything was placed.

02

Gold doesn't mean gaudy

The gold in Art Deco isn't there to show off — it's there to catch light. Used sparingly, on borders, dividers, key typographic elements, and decorative details, it creates a warmth and material quality that no other accent color can replicate. The moment you use it everywhere, it tips into tacky. The discipline is knowing where to stop.

03

Geometry is the ornament

Where other historical styles used floral patterns and organic curves as decoration, Art Deco used geometric precision — sunbursts, chevrons, stepped forms, radiating lines. The decoration is built from the same design vocabulary as the structure, which is why it feels cohesive rather than applied. Every decorative element looks like it was drawn with a ruler, not a brush.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Going too heavy on the gold
Gold as a border on key cards and headings reads as luxurious. Gold on every element reads as a Las Vegas gift shop. Tell Claude specifically which elements get the gold treatment and hold it to those.
! WARNING
Forgetting the typography is half the work
Art Deco lives or dies on the type. You need a condensed, geometric serif for headlines — something like Playfair Display or a proper display font, set in all-caps with generous tracking. Default fonts completely destroy the aesthetic.
! WARNING
Decorative elements that block content
The geometric ornaments — the sunbursts, the stepped borders, the fan motifs — are backgrounds and accents, not foreground elements. If they're competing with your actual content for attention, they're in the wrong place.
! WARNING
Wrong color palette
Art Deco is black, cream, and gold — or deep navy and gold — or forest green and gold. It's always gold plus one dark, rich background color. If Claude starts adding multiple accent colors or bright modern tones, pull it back immediately.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →