---
name: art-deco
description: 装饰艺术风格（Art Deco）：对称几何、金色线条与边框、奢华深色底（墨绿/深蓝/黑）、衬线+几何字体、放射状装饰。适合高端品牌、奢华酒店、艺术/时尚类站点、精品店。Use when the user asks for art deco, 1920s, Gatsby-era, gold-and-black luxury, geometric ornamental design.
whenToUse: 用户想要装饰艺术、1920 年代、奢华复古、金黑配色、几何装饰风时
---

# 装饰艺术风格（Art Deco）

> 本风格为本仓库原创规范，无第三方来源引用。

## 设计总原则

1. **对称与几何**：布局严格对称，装饰用几何图形（放射线、阶梯形、扇面、菱形、Zigzag）。
2. **金黑奢华**：深色底（墨绿 `#0e1f14`、深蓝 `#101828` 或黑 `#141414`）+ 金色（`#c9a24b` / `#d4af37`）+ 象牙白文字。
3. **线条是装饰**：金色细线（1-2px）做边框、分隔、装饰框；多层矩形边框（阶梯框）是标志手法。
4. **字体**：标题用衬线+几何感（`Didot`、`Bodoni`、`Playfair Display` 类，大写 + 大字距），正文常规衬线/无衬线。
5. **放射状元素**：太阳放射纹、扇形装饰出现在 logo 区、页脚、角落。
6. **克制奢华**：金色只做线条/点缀，不铺满；大量深色留白衬托金色。

## 必用 Token

```css
:root {
  --bg:        #0e1f14;   /* 墨绿（主） */
  --bg-2:      #132619;   /* 次级面 */
  --ink:       #f2ead8;   /* 象牙白 */
  --ink-dim:   #c8bda4;   /* 暗金白 */

  --gold:      #c9a24b;
  --gold-bright: #e8c86a;
  --line:      1px solid rgba(201, 162, 75, 0.6);

  --font-display: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```

## 排版规范

- 标题：衬线（Didot/Bodoni/Playfair），**大写 + 大字距**（`letter-spacing: 0.15-0.3em`），金色或象牙白。
- 副标题：`font-size 14-16px`，`letter-spacing: 0.2em`，金色。
- 正文：`14-15px / 1.7`，象牙白或暗金白。
- 数字/日期：衬线或几何感数字，金色。

## 组件落地清单

| 组件 | 规则 |
|---|---|
| 装饰框 | 双线矩形框（外粗内细或两层 `border`），阶梯角（`clip-path` 或多层框） |
| 放射装饰 | 太阳放射线（`background: repeating-conic-gradient` 或 SVG），logo 后、页脚上方 |
| 导航 | 顶部 1px 金线分隔，logo 衬线金字居中或居左 |
| 按钮 | 金线边框 + 透明底 + 金色大写文字（字距大）；hover 金色填充 + 黑字 |
| 卡片/面板 | `bg-2` 底 + 1px 金线边框 + 角落菱形/三角装饰 |
| 分隔 | 金色细线 + 中央菱形/扇面小装饰 |
| 指标 | 大号衬线数字（金色）+ 大字距小标签 |
| 页脚 | 顶部金线 + 放射状装饰 + 衬线大字距文字 |

## 禁用清单

- ❌ 明亮现代配色（荧光、糖果色、纯白底）
- ❌ 圆角大卡片（Art Deco 是直角/几何，圆角 ≤ 4px）
- ❌ 无衬线黑体做标题（必须衬线/几何感）
- ❌ 金色铺满（金色只做线条与点缀，占比 < 15%）
- ❌ 非对称乱布局（强调对称与秩序）
- ❌ 照片写实风格

## 验收检查

- [ ] 深色底（墨绿/深蓝/黑）
- [ ] 金色用于边框/文字/装饰，占比克制
- [ ] 标题衬线 + 大写 + 大字距
- [ ] 至少一处几何装饰（放射/菱形/阶梯框/双线框）
- [ ] 布局对称
- [ ] 圆角 ≤ 4px