Art Deco
装饰艺术
Aliases:盖茨比风格黑金几何风对称奢华风deco
What is it
A decorative visual language built from geometry, symmetry, radiating lines and stepped forms. A contemporary web interpretation often pairs dark surfaces with metallic hairlines and display typography. Concentrate decoration in headings, frames and key visuals while keeping body text, forms and navigation straightforward.
Design spec
Typography
Display serif titles with tracked short labels.
Color
Midnight blue-black and warm gold; soft light body text.
Border
Hairlines, double frames and stepped outlines.
Shadow
Use borders for hierarchy instead of shadows.
Spacing
Axial alignment and balanced space; reduce ornament on mobile.
Motion
200–300ms ease-out fades and border reveals; honour prefers-reduced-motion
States
Hover brightens the gold rule; focus shows a visible double gold frame; active tightens the border; disabled fades to dim gold; error uses red-gold, staying axially symmetric
Style in action
See the full page, then try the interactive sceneFull-page preview
An evening,
extraordinary.
Save a place for a night to remember.
Explore →Interactive scene
Loading demo…
✓ When to use
- Boutique hospitality, cultural events, dining and exhibitions.
- Brand introductions that call for elegance and ceremony.
✕ When not to use
- Avoid elaborate ornament in frequently used business tools.
- Fine gold lines cannot replace readable text and clear controls.
Variants
Midnight gold
午夜黑金
Deep blue-black and warm gold create dramatic contrast.
Emerald gold
翡翠金
Deep green surfaces with symmetric geometry.
Implementation
borderletter-spacingSVG pathgridDraw radiating and stepped ornament with SVG, independent of semantic content. Use gold as an accent while keeping body contrast strong. Preserve title and form width on narrow screens by reducing surrounding ornament.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Inspect existing layouts, typography and theme tokens, then build an interactive Art Deco brand scene. Display serif titles with tracked short labels. Midnight blue-black and warm gold; soft light body text. Hairlines, double frames and stepped outlines. Use borders for hierarchy instead of shadows. Axial alignment and balanced space; reduce ornament on mobile. Draw radiating and stepped ornament with SVG, independent of semantic content. Use gold as an accent while keeping body contrast strong. Preserve title and form width on narrow screens by reducing surrounding ornament. Make controls give clear feedback, support narrow screens, focus and reduced motion, and add no dependencies. Run checks and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language of playing composition with geometry: circle, triangle and square in primary red, yellow and blue plus black, asymmetric yet balanced. Decoration obeys function — every plane and line carries structure, and a poster reads as a study in geometric relations.
StylesSimilarA visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesSimilarThe future as imagined by the past: cream-orange-brown warm palettes, chunky rounded casings, orbit lines and planet decals, pixel screens and CRT phosphor — optimistic tech that has aged. Space-age dashboards, vintage appliances and space-race posters fold into one warm nostalgic future.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffects