# UI设计规范 - 艺术装饰风格

> 💎 **使用说明**：本文档为艺术装饰风格的UI设计规范示例文档。
> 
> ✨ **目的**：定义基于1920-1930年代Art Deco装饰艺术运动的设计美学，运用几何图案、金属质感和对称布局，营造奢华精致且充满时代魅力的视觉体验。

## 项目设计定位

### 设计理念
**装饰艺术 · 几何奢华 · 对称美学**

深度重现1920-1930年代装饰艺术运动的精髓，通过精致的几何图案、奢华的金属质感和严格的对称布局，创造如同纽约克莱斯勒大厦般的经典装饰美学。设计强调精工细作与奢华品质，每个元素都体现出那个黄金时代的优雅与繁荣，如同《了不起的盖茨比》电影中的视觉盛宴。

### 目标用户群体
- **奢侈品爱好者**：追求高端品质和经典美学的消费群体
- **艺术收藏家**：对装饰艺术有深度理解和欣赏的鉴赏家
- **历史文化爱好者**：对20世纪初期文化和艺术感兴趣的用户
- **高端服务业从业者**：酒店、餐饮、时尚等奢华行业专业人士
- **设计专业人士**：室内设计师、建筑师、装饰设计师

### 设计创新点
1. **几何装饰系统**：精致的对称几何图案和装饰线条
2. **金属质感效果**：金、银、铜等贵金属的视觉表现
3. **装饰性排版**：华丽的装饰字体和精美的文字排列
4. **对称式构图**：严格的对称平衡和放射状布局
5. **奢华色彩系统**：金色、黑色、深红等经典装饰色彩

### 适用场景
**🏛️ 艺术装饰风格** - 黄金时代的奢华再现

本设计风格专为追求经典奢华和艺术品味的高端应用场景设计，适合对品质和美学有极高要求的用户群体：

#### 最适合的项目类型
- **奢侈品电商**：珠宝首饰、高端腕表、奢侈品牌官网
- **高端酒店餐饮**：五星级酒店预订、精品餐厅、高端会所
- **艺术文化机构**：艺术博物馆、画廊展示、文化遗产平台
- **金融投资平台**：私人银行、投资理财、财富管理系统
- **房地产豪宅**：豪宅销售、高端物业、建筑设计展示
- **时尚奢华品牌**：高定时装、奢侈品配饰、品牌形象展示
- **婚庆庆典服务**：高端婚礼策划、庆典活动、仪式服务

#### 目标用户群体
- **高净值人群**：有较强消费能力的成功人士
- **艺术品味人士**：对美学和品质有极高要求的鉴赏家
- **文化精英**：文化艺术领域的专业人士和爱好者
- **奢华服务从业者**：高端服务行业的专业人员
- **历史文化研究者**：对装饰艺术运动有研究兴趣的学者

#### 设计优势
- 极强的奢华感和品质感
- 独特的历史文化内涵
- 永恒的经典美学价值
- 强烈的品牌高端形象

## 色彩系统

### 装饰艺术色彩
**奢华典雅的经典配色**

#### 主色调
- **香槟金**：`#F7E7CE` (Champagne Gold - 温润的香槟金色)
- **古典黑**：`#1C1C1C` (Classic Black - 深邃的经典黑色)
- **象牙白**：`#FFF8DC` (Ivory White - 优雅的象牙白色)
- **珍珠白**：`#F8F6F0` (Pearl White - 珍珠般的温润白色)

#### 贵金属色系
- **玫瑰金**：`#E8B4B8` (Rose Gold - 温柔的玫瑰金色)
- **白金色**：`#E5E4E2` (Platinum - 高贵的白金色)
- **古铜色**：`#CD7F32` (Bronze - 古典的青铜色)
- **纯金色**：`#FFD700` (Pure Gold - 华丽的纯金色)

#### 装饰色彩
- **深红宝石**：`#722F37` (Deep Ruby - 深邃的红宝石色)
- **翡翠绿**：`#50C878` (Emerald Green - 华贵的翡翠绿色)
- **蓝宝石蓝**：`#0F52BA` (Sapphire Blue - 高贵的蓝宝石色)
- **紫水晶**：`#9966CC` (Amethyst - 神秘的紫水晶色)

#### 中性色系
- **烟灰色**：`#848884` (Smoke Gray - 优雅的烟灰色)
- **奶油色**：`#FFFDD0` (Cream - 温暖的奶油色)
- **石墨色**：`#41424C` (Charcoal - 深沉的石墨色)
- **银灰色**：`#C4C3D0` (Silver Gray - 高贵的银灰色)

### 色彩使用原则
1. **对比强烈**：金色与黑色的经典对比组合
2. **层次丰富**：通过金属质感创造丰富的视觉层次
3. **奢华感**：大量使用金属色彩营造奢华氛围
4. **经典永恒**：选择具有时代感的经典配色

## 排版系统

### 装饰艺术字体
**华丽精致的排版美学**

#### 字体层级
```css
.artdeco-typography {
    font-family: 'Optima', 'Trajan Pro', 'Copperplate', 'Futura', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.1em;
}

.title-artdeco {
    font-size: 48px;
    font-weight: 300;
    line-height: 1.2;
    color: #FFD700;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    position: relative;
}

.title-artdeco::before,
.title-artdeco::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.title-artdeco::before { left: -100px; }
.title-artdeco::after { right: -100px; }

.subtitle-artdeco {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    color: #E8B4B8;
    margin-bottom: 24px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.heading-artdeco {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: #CD7F32;
    margin-bottom: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.body-artdeco {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: #1C1C1C;
    letter-spacing: 0.02em;
    text-align: justify;
    max-width: 600px;
}

.caption-artdeco {
    font-size: 14px;
    font-weight: 300;
    color: #848884;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-style: italic;
    text-align: center;
}
```

#### 装饰性字体
```css
.decorative-initial {
    float: left;
    font-size: 72px;
    line-height: 60px;
    padding-right: 12px;
    padding-top: 8px;
    color: #FFD700;
    font-family: 'Trajan Pro', serif;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.ornamental-number {
    font-size: 64px;
    font-weight: 100;
    color: #E8B4B8;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Optima', sans-serif;
    letter-spacing: 0.2em;
    position: relative;
}

.ornamental-number::before,
.ornamental-number::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #CD7F32;
}

.ornamental-number::before { left: -40px; }
.ornamental-number::after { right: -40px; }

.elegant-quote {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #722F37;
    font-style: italic;
    text-align: center;
    padding: 32px 40px;
    position: relative;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    border: 1px solid #E8B4B8;
    margin: 32px 0;
}

.elegant-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 48px;
    color: #FFD700;
    font-family: 'Trajan Pro', serif;
}

.elegant-quote::after {
    content: '"';
    position: absolute;
    bottom: -20px;
    right: 20px;
    font-size: 48px;
    color: #FFD700;
    font-family: 'Trajan Pro', serif;
}
```

### 几何装饰排版
**对称美学的文字布局**

```css
.centered-composition {
    text-align: center;
    padding: 48px 0;
    position: relative;
}

.symmetrical-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px;
    background: radial-gradient(ellipse, #FFF8DC 0%, #F8F6F0 100%);
    border: 2px solid #E8B4B8;
    position: relative;
}

.symmetrical-layout::before,
.symmetrical-layout::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid #FFD700;
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
}

.symmetrical-layout::before {
    top: -2px;
    left: -2px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.symmetrical-layout::after {
    bottom: -2px;
    right: -2px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
```

## 组件设计规范

### 装饰艺术组件
**奢华精致的界面元素**

#### 按钮组件
```css
.btn-artdeco-primary {
    background: linear-gradient(135deg, #FFD700 0%, #E8B4B8 100%);
    color: #1C1C1C;
    border: 2px solid #CD7F32;
    border-radius: 0;
    padding: 16px 32px;
    font-family: 'Optima', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-artdeco-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.1) 2px,
        rgba(255, 255, 255, 0.1) 4px
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-artdeco-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-artdeco-primary:hover::before {
    opacity: 1;
}

.btn-artdeco-secondary {
    background: transparent;
    color: #FFD700;
    border: 2px solid #FFD700;
    border-radius: 0;
    padding: 14px 30px;
    font-family: 'Optima', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255, 215, 0, 0.1) 8px,
        rgba(255, 215, 0, 0.1) 16px
    );
}

.btn-artdeco-secondary:hover {
    background: #FFD700;
    color: #1C1C1C;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.btn-luxury {
    background: linear-gradient(135deg, #1C1C1C 0%, #41424C 100%);
    color: #FFD700;
    border: 1px solid #FFD700;
    border-radius: 0;
    padding: 18px 36px;
    font-family: 'Copperplate', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-luxury::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.btn-luxury:hover::after {
    width: 300px;
    height: 300px;
}
```

#### 卡片组件
```css
.card-artdeco {
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    border: 2px solid #E8B4B8;
    border-radius: 0;
    padding: 40px;
    margin-bottom: 32px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

.card-artdeco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(232, 180, 184, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.card-artdeco::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

.card-artdeco-luxury {
    background: linear-gradient(135deg, #1C1C1C 0%, #41424C 100%);
    border: 2px solid #FFD700;
    color: #FFF8DC;
    position: relative;
}

.card-artdeco-luxury::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    pointer-events: none;
}

.card-header-artdeco {
    border-bottom: 2px solid #E8B4B8;
    padding-bottom: 20px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
}

.card-header-artdeco::after {
    content: '◆';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF8DC;
    color: #FFD700;
    font-size: 20px;
    padding: 0 12px;
}

.card-title-artdeco {
    font-size: 24px;
    font-weight: 400;
    color: #FFD700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Optima', sans-serif;
}
```

#### 表单组件
```css
.form-artdeco {
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    padding: 48px;
    border: 3px solid #E8B4B8;
    position: relative;
}

.form-artdeco::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    pointer-events: none;
}

.input-artdeco {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid #E8B4B8;
    border-radius: 0;
    padding: 16px 20px;
    font-family: 'Optima', sans-serif;
    font-size: 16px;
    color: #1C1C1C;
    outline: none;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.input-artdeco:focus {
    border-color: #FFD700;
    box-shadow: 
        0 0 0 3px rgba(255, 215, 0, 0.2),
        inset 0 1px 3px rgba(0, 0, 0, 0.1);
    background: #FFF8DC;
}

.input-artdeco::placeholder {
    color: #848884;
    font-style: italic;
    font-weight: 300;
}

.label-artdeco {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #722F37;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Copperplate', sans-serif;
}

.select-artdeco {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid #E8B4B8;
    border-radius: 0;
    padding: 16px 20px;
    font-family: 'Optima', sans-serif;
    font-size: 16px;
    color: #1C1C1C;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFD700' viewBox='0 0 16 16'%3e%3cpath d='M8 13.1l4.7-4.7-1.4-1.4L8 10.3 4.7 7l-1.4 1.4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.checkbox-artdeco {
    width: 20px;
    height: 20px;
    border: 2px solid #CD7F32;
    border-radius: 0;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-artdeco:checked {
    background: linear-gradient(135deg, #FFD700, #E8B4B8);
    border-color: #FFD700;
}

.checkbox-artdeco:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1C1C1C;
    font-size: 14px;
    font-weight: bold;
}
```

## 几何装饰系统

### 装饰艺术图案
**对称几何的装饰美学**

#### 基础装饰元素
```css
.artdeco-diamond {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
    transform: rotate(45deg);
    position: relative;
    margin: 20px auto;
}

.artdeco-diamond::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid rgba(28, 28, 28, 0.3);
}

.artdeco-sunburst {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #FFD700 30%, transparent 30%);
    position: relative;
    margin: 20px auto;
}

.artdeco-sunburst::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: conic-gradient(
        from 0deg,
        #FFD700 0deg 10deg,
        transparent 10deg 20deg,
        #E8B4B8 20deg 30deg,
        transparent 30deg 40deg,
        #CD7F32 40deg 50deg,
        transparent 50deg 60deg
    );
    background-repeat: repeat;
}

.artdeco-chevron {
    width: 80px;
    height: 40px;
    background: linear-gradient(
        135deg,
        #FFD700 25%,
        transparent 25%,
        transparent 50%,
        #E8B4B8 50%,
        #E8B4B8 75%,
        transparent 75%
    );
    background-size: 20px 20px;
    margin: 16px auto;
}

.artdeco-zigzag {
    width: 200px;
    height: 20px;
    background: repeating-linear-gradient(
        45deg,
        #FFD700,
        #FFD700 10px,
        #1C1C1C 10px,
        #1C1C1C 20px
    );
    margin: 20px auto;
}
```

#### 复杂装饰图案
```css
.artdeco-fan {
    width: 120px;
    height: 60px;
    background: linear-gradient(
        90deg,
        transparent 20%,
        #FFD700 20% 22%,
        transparent 22% 28%,
        #E8B4B8 28% 30%,
        transparent 30% 36%,
        #CD7F32 36% 38%,
        transparent 38% 44%,
        #722F37 44% 46%,
        transparent 46% 52%,
        #50C878 52% 54%,
        transparent 54% 60%,
        #0F52BA 60% 62%,
        transparent 62% 68%,
        #9966CC 68% 70%,
        transparent 70% 80%
    );
    border-radius: 60px 60px 0 0;
    margin: 20px auto;
    position: relative;
}

.artdeco-medallion {
    width: 100px;
    height: 100px;
    background: radial-gradient(
        circle,
        #FFD700 0% 10%,
        #1C1C1C 10% 15%,
        #E8B4B8 15% 25%,
        #1C1C1C 25% 30%,
        #CD7F32 30% 40%,
        #1C1C1C 40% 45%,
        transparent 45%
    );
    border-radius: 50%;
    margin: 20px auto;
    position: relative;
}

.artdeco-medallion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #FFD700 0%, transparent 100%);
    border-radius: 50%;
}

.geometric-border {
    border: 4px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #FFD700,
        #FFD700 8px,
        #E8B4B8 8px,
        #E8B4B8 16px,
        #CD7F32 16px,
        #CD7F32 24px
    ) 4;
    padding: 24px;
    margin: 20px 0;
}

.stepped-pattern {
    width: 150px;
    height: 80px;
    background: 
        linear-gradient(to right, #FFD700 0% 20%, transparent 20% 25%, #E8B4B8 25% 45%, transparent 45% 50%, #CD7F32 50% 70%, transparent 70% 75%, #722F37 75% 95%, transparent 95%),
        linear-gradient(to bottom, transparent 0% 20%, #FFD700 20% 40%, transparent 40% 60%, #E8B4B8 60% 80%, transparent 80%);
    margin: 20px auto;
}
```

## 布局模式

### 对称奢华布局
**经典装饰艺术的空间美学**

#### 主页面布局
```css
.page-artdeco {
    min-height: 100vh;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 50%, #FFF8DC 100%);
    display: grid;
    grid-template-columns: 1fr minmax(320px, 1000px) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        ". header ."
        ". main ."
        ". footer .";
    gap: 0;
    position: relative;
}

.page-artdeco::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(232, 180, 184, 0.05) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 100px,
            rgba(255, 215, 0, 0.02) 100px,
            rgba(255, 215, 0, 0.02) 200px
        );
    pointer-events: none;
    z-index: -1;
}

.header-artdeco {
    grid-area: header;
    padding: 40px 0;
    border-bottom: 3px solid #E8B4B8;
    text-align: center;
    position: relative;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.1) 50%, transparent 100%);
}

.header-artdeco::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.main-artdeco {
    grid-area: main;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    gap: 64px;
    position: relative;
}

.footer-artdeco {
    grid-area: footer;
    padding: 40px 0;
    border-top: 3px solid #E8B4B8;
    text-align: center;
    background: linear-gradient(135deg, #F8F6F0 0%, #FFF8DC 100%);
    position: relative;
}

.footer-artdeco::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}
```

#### 对称网格布局
```css
.symmetrical-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 40px;
    margin: 64px 0;
    position: relative;
}

.symmetrical-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E8B4B8, transparent);
    transform: translateY(-50%);
}

.symmetrical-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, #E8B4B8, transparent);
    transform: translateX(-50%);
}

.grid-center {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #FFF8DC 0%, #F8F6F0 100%);
    border: 2px solid #E8B4B8;
    position: relative;
}

.grid-corner {
    padding: 24px;
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
    color: #1C1C1C;
    text-align: center;
    position: relative;
}

.grid-corner:nth-child(1) { grid-column: 1; grid-row: 1; }
.grid-corner:nth-child(2) { grid-column: 3; grid-row: 1; }
.grid-corner:nth-child(3) { grid-column: 1; grid-row: 3; }
.grid-corner:nth-child(4) { grid-column: 3; grid-row: 3; }

.grid-side {
    padding: 32px;
    background: linear-gradient(135deg, #F8F6F0, #FFF8DC);
    border: 1px solid #E8B4B8;
    text-align: center;
}

.grid-side:nth-child(5) { grid-column: 2; grid-row: 1; }
.grid-side:nth-child(6) { grid-column: 1; grid-row: 2; }
.grid-side:nth-child(7) { grid-column: 3; grid-row: 2; }
.grid-side:nth-child(8) { grid-column: 2; grid-row: 3; }
```

#### 放射状布局
```css
.radial-layout {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 80px auto;
    background: radial-gradient(circle, #FFF8DC 0%, #F8F6F0 100%);
    border: 3px solid #E8B4B8;
    border-radius: 50%;
}

.radial-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #FFD700, #E8B4B8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1C1C1C;
    z-index: 10;
}

.radial-item {
    position: absolute;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #CD7F32, #722F37);
    border: 2px solid #FFD700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF8DC;
    font-weight: 500;
    text-align: center;
    font-size: 12px;
}

.radial-item:nth-child(2) { top: 20px; left: 50%; transform: translateX(-50%); }
.radial-item:nth-child(3) { top: 20%; right: 20px; }
.radial-item:nth-child(4) { top: 50%; right: 20px; transform: translateY(-50%); }
.radial-item:nth-child(5) { bottom: 20%; right: 20px; }
.radial-item:nth-child(6) { bottom: 20px; left: 50%; transform: translateX(-50%); }
.radial-item:nth-child(7) { bottom: 20%; left: 20px; }
.radial-item:nth-child(8) { top: 50%; left: 20px; transform: translateY(-50%); }
.radial-item:nth-child(9) { top: 20%; left: 20px; }
```

## 导航系统

### 奢华装饰导航
**典雅的导航美学**

```css
.nav-artdeco {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 40px;
    height: 100%;
    position: relative;
}

.nav-artdeco::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.nav-artdeco::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

.nav-item-artdeco {
    color: #1C1C1C;
    text-decoration: none;
    font-family: 'Optima', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 20px 24px;
    margin: 0 8px;
    position: relative;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
}

.nav-item-artdeco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 45%, #FFD700 45% 55%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-item-artdeco::after {
    content: '◆';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFD700;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-item-artdeco:hover {
    color: #722F37;
    border-color: #E8B4B8;
    background: rgba(255, 215, 0, 0.1);
}

.nav-item-artdeco:hover::before {
    opacity: 1;
}

.nav-item-artdeco:hover::after {
    opacity: 1;
}

.nav-item-artdeco.active {
    color: #722F37;
    background: linear-gradient(135deg, #FFF8DC, #F8F6F0);
    border-color: #FFD700;
}

.nav-item-artdeco.active::after {
    opacity: 1;
}

.logo-artdeco {
    font-size: 32px;
    font-weight: 300;
    color: #FFD700;
    text-decoration: none;
    margin-right: auto;
    font-family: 'Trajan Pro', serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
}

.logo-artdeco::before {
    content: '◆';
    margin-right: 8px;
    color: #E8B4B8;
}

.logo-artdeco::after {
    content: '◆';
    margin-left: 8px;
    color: #E8B4B8;
}

.breadcrumb-artdeco {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    font-size: 14px;
    color: #848884;
    font-family: 'Copperplate', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breadcrumb-item-artdeco {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
    position: relative;
}

.breadcrumb-item-artdeco:hover {
    color: #FFD700;
}

.breadcrumb-separator-artdeco {
    color: #E8B4B8;
    font-weight: 500;
}

.breadcrumb-separator-artdeco::before {
    content: '◆';
    font-size: 10px;
}
```

## 动效规范

### 优雅过渡动效
**装饰艺术的动态美学**

```css
.artdeco-transition {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.luxury-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.luxury-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.3);
    filter: brightness(1.1);
}

.fade-in-artdeco {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInArtdeco 1s ease-out forwards;
}

@keyframes fadeInArtdeco {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.golden-shimmer {
    position: relative;
    overflow: hidden;
}

.golden-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
}

.elegant-scale {
    animation: elegantScale 2s ease-in-out infinite alternate;
}

@keyframes elegantScale {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    100% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

.radial-expand {
    animation: radialExpand 1.5s ease-out;
}

@keyframes radialExpand {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

.ornamental-entrance {
    animation: ornamentalEntrance 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes ornamentalEntrance {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(90deg);
        filter: blur(5px);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotateY(-10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
        filter: blur(0px);
    }
}
```

## 响应式设计

### 奢华的适配策略
**保持装饰美学的响应式原则**

```css
/* 移动端优化 */
@media (max-width: 767px) {
    .page-artdeco {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    
    .title-artdeco {
        font-size: 32px;
        margin-bottom: 24px;
    }
    
    .title-artdeco::before,
    .title-artdeco::after {
        width: 60px;
    }
    
    .title-artdeco::before { left: -80px; }
    .title-artdeco::after { right: -80px; }
    
    .subtitle-artdeco {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .card-artdeco {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .symmetrical-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, auto);
        gap: 20px;
    }
    
    .symmetrical-grid > * {
        grid-column: 1;
        grid-row: auto;
    }
    
    .radial-layout {
        width: 300px;
        height: 300px;
    }
    
    .radial-center {
        width: 80px;
        height: 80px;
    }
    
    .radial-item {
        width: 60px;
        height: 60px;
        font-size: 10px;
    }
    
    .main-artdeco {
        padding: 40px 20px;
        gap: 40px;
    }
}

/* 平板端适配 */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-artdeco {
        grid-template-columns: 1fr minmax(320px, 700px) 1fr;
    }
    
    .symmetrical-grid {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: 30px;
    }
    
    .title-artdeco {
        font-size: 40px;
    }
    
    .subtitle-artdeco {
        font-size: 24px;
    }
    
    .radial-layout {
        width: 350px;
        height: 350px;
    }
}

/* 大屏优化 */
@media (min-width: 1200px) {
    .page-artdeco {
        grid-template-columns: 1fr minmax(320px, 1200px) 1fr;
    }
    
    .title-artdeco {
        font-size: 56px;
    }
    
    .subtitle-artdeco {
        font-size: 32px;
    }
    
    .main-artdeco {
        padding: 100px 60px;
        gap: 80px;
    }
    
    .card-artdeco {
        padding: 48px;
    }
    
    .radial-layout {
        width: 500px;
        height: 500px;
    }
    
    .radial-center {
        width: 140px;
        height: 140px;
    }
    
    .radial-item {
        width: 90px;
        height: 90px;
        font-size: 14px;
    }
}
```

## 可访问性规范

### 包容性奢华设计
**优雅的无障碍体验**

```css
.accessible-artdeco {
    /* 确保充足的颜色对比度 */
    color: #1C1C1C;
    background: #FFF8DC;
}

.focus-artdeco:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
    border-radius: 0;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.skip-link-artdeco {
    position: absolute;
    top: -50px;
    left: 30px;
    background: #1C1C1C;
    color: #FFD700;
    padding: 12px 24px;
    text-decoration: none;
    border: 2px solid #FFD700;
    font-family: 'Optima', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: top 0.3s;
    z-index: 1001;
}

.skip-link-artdeco:focus {
    top: 30px;
}

.sr-only-artdeco {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .card-artdeco {
        border: 4px solid #1C1C1C;
        background: #FFFFFF;
    }
    
    .btn-artdeco-primary {
        border: 3px solid #1C1C1C;
        background: #FFD700;
        color: #1C1C1C;
    }
    
    .nav-item-artdeco {
        color: #1C1C1C;
        border: 2px solid #1C1C1C;
    }
    
    .title-artdeco {
        color: #1C1C1C;
        text-shadow: none;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .golden-shimmer::before {
        display: none;
    }
}
```

## 设计原则总结

### 装饰艺术核心原则
1. **几何对称**：严格的对称布局和几何图案装饰
2. **奢华材质**：金属质感和贵重材料的视觉表现
3. **精工细作**：注重细节和工艺品质的完美呈现
4. **时代经典**：体现1920-1930年代的黄金时代美学
5. **装饰丰富**：华丽的装饰元素和精致的视觉细节

### 设计禁忌
- ❌ 简陋粗糙的设计元素
- ❌ 不对称的随意布局
- ❌ 缺乏装饰的极简设计
- ❌ 低品质的视觉效果
- ❌ 现代科技风的冷色调

### 设计检查清单
- ✅ 是否使用了奢华的金属色彩？
- ✅ 布局是否体现对称美学？
- ✅ 是否包含精致的几何装饰？
- ✅ 字体是否典雅华丽？
- ✅ 整体是否传达奢华品质感？
- ✅ 用户体验是否优雅精致？

---

> **装饰艺术运动引用**：
> 
> *"Ornament is not a crime."*
> 
> — 对现代主义"装饰即罪恶"观念的反驳
> 
> *"Beauty will be convulsive or will not be at all."*
> 
> — André Breton，超现实主义诗人

> **设计哲学**：
> 
> *奢华不在于昂贵，而在于无可替代*
> 
> *真正的装饰艺术，是将功能与美学完美融合的艺术*