{ "id": "art-deco", "type": "styles", "status": "published", "name": { "zh": "装饰艺术", "en": "Art Deco" }, "aliases": [ "盖茨比风格", "黑金几何风", "对称奢华风", "deco" ], "category": [ "Style", "Visual Language" ], "description": { "zh": "以几何秩序、对称构图、放射线和阶梯轮廓构成鲜明装饰感的视觉语言。网页中的现代演绎常使用深色底、金属色细线和展示字体，强调仪式感与主次节奏。装饰应集中于标题、边框和关键视觉；正文、表单和导航仍需保留简洁清楚的阅读与操作方式。", "en": "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." }, "use_when": [ { "zh": "精品酒店、文化活动、餐饮与展览页面。", "en": "Boutique hospitality, cultural events, dining and exhibitions." }, { "zh": "希望表达典雅与仪式感的品牌首屏。", "en": "Brand introductions that call for elegance and ceremony." } ], "avoid_when": [ { "zh": "高频业务后台不宜使用繁复装饰。", "en": "Avoid elaborate ornament in frequently used business tools." }, { "zh": "细金线不能替代文字和控件的可见边界。", "en": "Fine gold lines cannot replace readable text and clear controls." } ], "tags": [ "art-deco", "visual-language" ], "variants": [ { "id": "midnight", "name": { "zh": "午夜黑金", "en": "Midnight gold" }, "note": { "zh": "深蓝黑与暖金组成戏剧性对比。", "en": "Deep blue-black and warm gold create dramatic contrast." } }, { "id": "emerald", "name": { "zh": "翡翠金", "en": "Emerald gold" }, "note": { "zh": "深绿底色配对称几何结构。", "en": "Deep green surfaces with symmetric geometry." } } ], "applicable_components": [ "button", "card", "input" ], "applicable_pages": [ "landing-page", "profile" ], "related": [ { "id": "bauhaus", "relation": "similar_to" }, { "id": "editorial", "relation": "similar_to" }, { "id": "retro-futurism", "relation": "similar_to" }, { "id": "button", "relation": "affects" } ], "demo": { "component": "art-deco", "modes": [ "default", "dark", "variants" ] }, "playground": { "task": { "zh": "Explore 打开晚宴意向表，填写称呼、日期、人数并保存对应结果，可返回修改；Collection 与 About 展示夜晚体验和品牌信息，明确仅本地意向并非实际订位。", "en": "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." }, "checks": [ { "zh": "逐一操作 THE AURELIA 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use THE AURELIA’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 THE AURELIA 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the THE AURELIA task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "V&A — Art Deco", "url": "https://www.vam.ac.uk/collections/art-deco" } ], "implementation": { "css": [ "border", "letter-spacing", "SVG path", "grid" ], "notes": { "zh": "THE AURELIA 以午夜蓝黑、暖金与深绿构成晚宴空间。右侧使用独立于文字的金线拱廊 SVG、菱形 A 字章与透视地面；晚宴结果卡延续拱形双线轮廓。标题减轻字重，短标签加字距；280ms 淡入和保存描边反馈，表单保留完整矩形输入范围。", "en": "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." } }, "style_spec": { "typography": { "zh": "展示性衬线标题，短标签增加字距。", "en": "Display serif titles with tracked short labels." }, "color": { "zh": "午夜蓝黑、暖金；正文用柔和浅色。", "en": "Midnight blue-black and warm gold; soft light body text." }, "border": { "zh": "细直线、双层边框、阶梯轮廓。", "en": "Hairlines, double frames and stepped outlines." }, "shadow": { "zh": "不依赖阴影，以边线分出层次。", "en": "Use borders for hierarchy instead of shadows." }, "spacing": { "zh": "轴线对齐，留白对称，移动端收敛装饰。", "en": "Axial alignment and balanced space; reduce ornament on mobile." }, "motion": { "zh": "200–300ms ease-out 的优雅淡入与描边展开，尊重 prefers-reduced-motion", "en": "200–300ms ease-out fades and border reveals; honour prefers-reduced-motion" }, "states": { "zh": "hover 金色描边增亮；focus 用双层金色可见外框；active 描边收紧；disabled 降为暗金；error 用红金强调，保持轴对称", "en": "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" } }, "preview": { "order": 20, "keywords": { "zh": "装饰艺术 · 材质与排版", "en": "ART DECO" }, "url": "https://art-deco.example", "scene": "generic", "brand": "THE AURELIA", "nav": [ { "zh": "Collection", "en": "Collection" }, { "zh": "About", "en": "About" } ], "heroTitle": { "zh": "An evening,", "en": "An evening," }, "heroTitle2": { "zh": "extraordinary.", "en": "extraordinary." }, "heroSub": { "zh": "为值得铭记的夜晚，预留一个位置。", "en": "Save a place for a night to remember." }, "cta": { "zh": "Explore", "en": "Explore" }, "panel": "shapes", "tokens": { "bg": "#151c24", "fg": "#e8ce92", "sub": "#c7bfae", "accent": "#d7b571", "accentFg": "#151c24", "card": "#25312e", "cardBorder": "#a88b51", "radius": "0px", "font": "Georgia, serif", "upper": true } }, "prompts": { "basic": { "zh": "使用装饰艺术风格设计品牌展示页面。以几何秩序、对称构图、放射线和阶梯轮廓构成鲜明装饰感的视觉语言。网页中的现代演绎常使用深色底、金属色细线和展示字体，强调仪式感与主次节奏。装饰应集中于标题、边框和关键视觉；正文、表单和导航仍需保留简洁清楚的阅读与操作方式。", "en": "Design a brand page in Art Deco. 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": { "zh": "展示性衬线标题，短标签增加字距。午夜蓝黑、暖金；正文用柔和浅色。细直线、双层边框、阶梯轮廓。不依赖阴影，以边线分出层次。轴线对齐，留白对称，移动端收敛装饰。", "en": "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." }, "implementation": { "zh": "用当前风格完成 THE AURELIA 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 THE AURELIA 午夜蓝黑、暖金展示字、深绿卡面、直角金边与右侧几何面板，不新增放射线/阶梯 SVG 来改写原构图。晚宴结果卡沿用居中排版、1px 金色内侧轮廓与宽字距短标签，表单维持原完整矩形输入范围。\n\n复用当前 preview.tokens：背景 #151c24；前景 #e8ce92；强调 #d7b571 / #151c24；卡面 #25312e；边框 #a88b51；圆角 0px；字体 Georgia, serif；卡影 none。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\nExplore 打开晚宴意向表，填写称呼、日期、人数并保存对应结果，可返回修改；Collection 与 About 展示夜晚体验和品牌信息，明确仅本地意向并非实际订位。\n\n静态封面、详情演示与 /style-scenes/art-deco/（英文 /en/style-scenes/art-deco/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "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.\n\nKeep THE AURELIA’s midnight blue-black, warm-gold display, deep-green cards, square gold rims and right-side geometry; do not add radiating/stepped SVG ornament that rewrites the composition. The evening result card retains centered text, a 1px inset gold outline and tracked short labels; forms keep full rectangular input targets.\n\nReuse current preview.tokens: background #151c24; foreground #e8ce92; accent #d7b571 / #151c24; card #25312e; border #a88b51; radius 0px; font Georgia, serif; card shadow none.\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nExplore 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.\n\nShare 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.\n\nInteraction 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.\n\nProvide 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." }, "agent": { "zh": "用当前风格完成 THE AURELIA 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\nTHE AURELIA 以午夜蓝黑、暖金与深绿构成晚宴空间。右侧使用独立于文字的金线拱廊 SVG、菱形 A 字章与透视地面；晚宴结果卡延续拱形双线轮廓。标题减轻字重，短标签加字距；280ms 淡入和保存描边反馈，表单保留完整矩形输入范围。\n\n复用当前 preview.tokens：背景 #151c24；前景 #e8ce92；强调 #d7b571 / #151c24；卡面 #25312e；边框 #a88b51；圆角 0px；字体 Georgia, serif；卡影 none。\n\ndark 与 variants 延续已有工作区模式；style-signatures.css 负责本品牌主视觉、续页和微交互，封面与整页共用同一 renderer。\n\n完整页面操作：\nExplore 打开晚宴意向表，填写称呼、日期、人数并保存对应结果，可返回修改；Collection 与 About 展示夜晚体验和品牌信息，明确仅本地意向并非实际订位。\n\n静态封面、详情演示与 /style-scenes/art-deco/（英文 /en/style-scenes/art-deco/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "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.\n\nTHE 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.\n\nReuse current preview.tokens: background #151c24; foreground #e8ce92; accent #d7b571 / #151c24; card #25312e; border #a88b51; radius 0px; font Georgia, serif; card shadow none.\n\nRetain 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.\n\nFull-page operations:\nExplore 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.\n\nShare 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.\n\nInteraction 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.\n\nProvide 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.\n\nAdd 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." } } }