# 装饰艺术 / Art Deco

> 风格 · `id: art-deco`

以几何秩序、对称构图、放射线和阶梯轮廓构成鲜明装饰感的视觉语言。网页中的现代演绎常使用深色底、金属色细线和展示字体，强调仪式感与主次节奏。装饰应集中于标题、边框和关键视觉；正文、表单和导航仍需保留简洁清楚的阅读与操作方式。

**别名:** 盖茨比风格 · 黑金几何风 · 对称奢华风 · deco

**分类:** Style / Visual Language

## 适用场景

- 精品酒店、文化活动、餐饮与展览页面。
- 希望表达典雅与仪式感的品牌首屏。

## 不适用场景

- 高频业务后台不宜使用繁复装饰。
- 细金线不能替代文字和控件的可见边界。

## 常见形式

- **午夜黑金** (Midnight gold) — 深蓝黑与暖金组成戏剧性对比。
- **翡翠金** (Emerald gold) — 深绿底色配对称几何结构。

## 开发规格

- **typography:** 展示性衬线标题，短标签增加字距。
- **color:** 午夜蓝黑、暖金；正文用柔和浅色。
- **border:** 细直线、双层边框、阶梯轮廓。
- **shadow:** 不依赖阴影，以边线分出层次。
- **spacing:** 轴线对齐，留白对称，移动端收敛装饰。
- **motion:** 200–300ms ease-out 的优雅淡入与描边展开，尊重 prefers-reduced-motion
- **states:** hover 金色描边增亮；focus 用双层金色可见外框；active 描边收紧；disabled 降为暗金；error 用红金强调，保持轴对称

## 实现要点

**CSS:** `border` `letter-spacing` `SVG path` `grid`

THE AURELIA 以午夜蓝黑、暖金与深绿构成晚宴空间。右侧使用独立于文字的金线拱廊 SVG、菱形 A 字章与透视地面；晚宴结果卡延续拱形双线轮廓。标题减轻字重，短标签加字距；280ms 淡入和保存描边反馈，表单保留完整矩形输入范围。

## 交给 Agent 的任务 Prompt

```text
用当前风格完成 THE AURELIA 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。

THE AURELIA 以午夜蓝黑、暖金与深绿构成晚宴空间。右侧使用独立于文字的金线拱廊 SVG、菱形 A 字章与透视地面；晚宴结果卡延续拱形双线轮廓。标题减轻字重，短标签加字距；280ms 淡入和保存描边反馈，表单保留完整矩形输入范围。

复用当前 preview.tokens：背景 #151c24；前景 #e8ce92；强调 #d7b571 / #151c24；卡面 #25312e；边框 #a88b51；圆角 0px；字体 Georgia, serif；卡影 none。

dark 与 variants 延续已有工作区模式；style-signatures.css 负责本品牌主视觉、续页和微交互，封面与整页共用同一 renderer。

完整页面操作：
Explore 打开晚宴意向表，填写称呼、日期、人数并保存对应结果，可返回修改；Collection 与 About 展示夜晚体验和品牌信息，明确仅本地意向并非实际订位。

静态封面、详情演示与 /style-scenes/art-deco/（英文 /en/style-scenes/art-deco/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。

提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。
```

### 其余层级 Prompt

**Basic:** 使用装饰艺术风格设计品牌展示页面。以几何秩序、对称构图、放射线和阶梯轮廓构成鲜明装饰感的视觉语言。网页中的现代演绎常使用深色底、金属色细线和展示字体，强调仪式感与主次节奏。装饰应集中于标题、边框和关键视觉；正文、表单和导航仍需保留简洁清楚的阅读与操作方式。

**Design:** 展示性衬线标题，短标签增加字距。午夜蓝黑、暖金；正文用柔和浅色。细直线、双层边框、阶梯轮廓。不依赖阴影，以边线分出层次。轴线对齐，留白对称，移动端收敛装饰。

**Implementation:** 用当前风格完成 THE AURELIA 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。

保留 THE AURELIA 午夜蓝黑、暖金展示字、深绿卡面、直角金边与右侧几何面板，不新增放射线/阶梯 SVG 来改写原构图。晚宴结果卡沿用居中排版、1px 金色内侧轮廓与宽字距短标签，表单维持原完整矩形输入范围。

复用当前 preview.tokens：背景 #151c24；前景 #e8ce92；强调 #d7b571 / #151c24；卡面 #25312e；边框 #a88b51；圆角 0px；字体 Georgia, serif；卡影 none。

dark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。

Explore 打开晚宴意向表，填写称呼、日期、人数并保存对应结果，可返回修改；Collection 与 About 展示夜晚体验和品牌信息，明确仅本地意向并非实际订位。

静态封面、详情演示与 /style-scenes/art-deco/（英文 /en/style-scenes/art-deco/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。

提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。

## 相关概念

- [bauhaus](/styles/bauhaus) — 相似概念
- [editorial](/styles/editorial) — 相似概念
- [retro-futurism](/styles/retro-futurism) — 相似概念
- [button](/components/button) — 影响组件

## Sources

- [V&A — Art Deco](https://www.vam.ac.uk/collections/art-deco)

---

JSON: `/api/concept/styles/art-deco.json` · 站点: /styles/art-deco