# 装饰艺术 / 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`

用 SVG 绘制放射线和阶梯形装饰，语义内容独立于装饰层。金色只作为强调，正文需有足够对比。窄屏保持标题和表单的完整宽度，减少外围装饰。

## 交给 Agent 的任务 Prompt

```text
先检查项目的布局、字体和主题变量，以装饰艺术风格完成一个可交互品牌场景。
展示性衬线标题，短标签增加字距。午夜蓝黑、暖金；正文用柔和浅色。细直线、双层边框、阶梯轮廓。不依赖阴影，以边线分出层次。轴线对齐，留白对称，移动端收敛装饰。
用 SVG 绘制放射线和阶梯形装饰，语义内容独立于装饰层。金色只作为强调，正文需有足够对比。窄屏保持标题和表单的完整宽度，减少外围装饰。
按钮必须有明确反馈，窄屏可用，保留焦点和 reduced-motion 支持，不新增依赖。完成后运行检查并列出修改文件。
```

### 其余层级 Prompt

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

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

**Implementation:** 用 SVG 绘制放射线和阶梯形装饰，语义内容独立于装饰层。金色只作为强调，正文需有足够对比。窄屏保持标题和表单的完整宽度，减少外围装饰。

## 相关概念

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

## Sources

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

---

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