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
The same page, ready to useExplore opens dinner interest. Enter a name, date and party size, save the matching result and return to edit. Collection and About show evening experiences and brand information; local interest is not a table reservation.
Full-page preview · interact directly
What to look for
- 01Use THE AURELIA’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the THE AURELIA task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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 pathgridTHE AURELIA pairs midnight blue-black, warm gold and deep green. Its right-hand SVG uses nested architectural arches, a diamond A monogram and a perspective floor, separate from semantic text. The evening result echoes the arched double frame. Use lighter serif headlines, tracked labels, 280ms entry and saved-plan border feedback, with full rectangular form targets.
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.
Build a complete THE AURELIA page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. THE AURELIA pairs midnight blue-black, warm gold and deep green. Its right-hand SVG uses nested architectural arches, a diamond A monogram and a perspective floor, separate from semantic text. The evening result echoes the arched double frame. Use lighter serif headlines, tracked labels, 280ms entry and saved-plan border feedback, with full rectangular form targets. Reuse current preview.tokens: background #151c24; foreground #e8ce92; accent #d7b571 / #151c24; card #25312e; border #a88b51; radius 0px; font Georgia, serif; card shadow none. Retain the existing workspace dark and variant modes. style-signatures.css owns this brand’s hero, continuation and microinteractions; covers and full pages share one renderer. Full-page operations: Explore opens dinner interest. Enter a name, date and party size, save the matching result and return to edit. Collection and About show evening experiences and brand information; local interest is not a table reservation. Share one renderer between static covers, the detail experience and /style-scenes/art-deco/ (English /en/style-scenes/art-deco/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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.
StylesSimilar
A 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