---
name: light-theme-design
description: 当需要设计亮色主题界面时使用此规则——包括移动端和Web端亮色主题设计规范。包括：选择与亮色主题协调的配色方案；设计亮色背景上的文字、图标和界面元素；确保足够的对比度和可读性；适配系统的亮色模式；设计亮色主题下的布局和间距；处理亮色主题中的阴影和高光；创建亮色主题的设计资源；优化亮色主题下的视觉效果和清新感。每当用户提及"亮色主题"、"浅色主题"、"light mode"、"亮色界面"、"白色主题"、"浅色UI"或需要设计亮色风格界面时触发，无论他们之后打算如何适配。如果需要设计、实现或评估亮色主题界面，请使用此规则。
---

# 亮色主题设计规则

---

## 你必须遵循的工作流程

1. **底色设定**：首先确定全局底色，杜绝纯白背景
2. **对比度配置**：设置按钮和交互组件与容器的色阶差异
3. **材质应用**：应用毛玻璃效果和物理描边
4. **交互设计**：配置按钮状态和触觉反馈
5. **布局构建**：建立层级堆叠和模块化布局
6. **字体设置**：配置字体系列和排版规范
7. **质量检查**：对照执行检查清单验证所有设计要素

## 你必须遵守的原则

- **物理真实感**：界面元素必须具备真实的物理质感和光学效果
- **层级清晰性**：通过阴影、模糊和色阶差异建立明确的视觉层级
- **对比度优先**：使用色阶差异而非线条来区分界面边界
- **触觉反馈**：所有交互元素必须提供即时的物理反馈
- **系统一致性**：遵循 iOS 设计语言的连续曲率和间距规范
- **呼吸感设计**：保持充足的留白空间，避免视觉压迫

## 具体要求和规范

### 视觉基调规范

#### 底色设定

- **必须**：杜绝纯白背景，全局底色采用 iOS 系统级灰 `[#F2F2F7]` 或冷灰 `[#F9F9FB]`
- **必须**：确保底色与白色组件产生明确的视觉落差
- **禁止**：使用纯白色作为全局背景色

#### 对比度策略

- **必须**：任何按钮或交互组件的背景必须比承载它的父容器深或浅 3%-10%
- **必须**：通过微弱的色阶差异而非粗糙的线条来区分边界
- **禁止**：使用单一纯色造成视觉混淆

### 材质与物理质感规范

#### 毛玻璃效果

- **必须**：层级容器必须使用 `backdrop-blur-[40px]` 到 `[60px]` 的高模糊度
- **必须**：背景色采用 `White/40` 至 `White/60` 的半透明填充
- **禁止**：使用低于 20px 的低模糊度导致背景内容透出

#### 双层物理描边

- **必须**：内描边使用 `1px border-white/60` 模拟玻璃切面捕捉的光线
- **必须**：外描边使用 `1px border-gray-200/40` 定义物体在物理空间中的轮廓
- **禁止**：只使用单层描边或过粗的边框（超过 1px）

#### 深度与阴影系统

- **必须**：悬浮组件使用扩散范围极大的柔和阴影 `shadow-[0_24px_48px_-12px_rgba(0,0,0,0.08)]`
- **必须**：凹陷组件（如输入框、切换器槽）使用 `shadow-inner` 配合 `bg-gray-100/50`
- **必须**：营造出精密喷砂工艺下的"刻痕"视觉效果
- **禁止**：使用生硬、边缘清晰的阴影效果

### 按钮与交互组件规范

#### 高对比交互设计

- **必须**：主按钮使用"深空黑" `[#1C1C1E]` 或"石墨色"作为背景色
- **必须**：次级按钮使用带有微弱投影的纯白色块
- **必须**：通过颜色对比度引导用户注意力到主要操作

#### 触觉反馈系统

- **必须**：所有可点击项必须具备 `active:scale-95` 或 `active:scale-[0.98]` 的物理回弹反馈
- **必须**：Hover 状态下增加 `backdrop-blur-3xl` 或微调边框明度提供视觉反馈
- **禁止**：使用无反馈的静态交互元素

#### 圆角美学规范

- **必须**：严格遵循 iOS 连续曲率设计原则
- **必须**：大容器使用 `rounded-[40px]` 至 `[50px]` 的圆角值
- **必须**：功能块使用 `rounded-[28px]` 的标准圆角
- **必须**：小组件使用 `rounded-xl` 的圆角设置
- **禁止**：在同一界面中使用不一致的圆角值

### 布局与层级规范

#### 层级堆叠系统

- **必须**：界面必须呈现由多层"打磨过的有机玻璃板"堆叠而成的视觉效果
- **必须**：每一层通过阴影深度（Z-index 视觉化）来区分重要程度层级
- **禁止**：使用扁平化设计导致层级关系不明确

#### 呼吸感排版

- **必须**：强制执行大间距原则，内边距（Padding）至少为 `p-6` 或 `p-8`
- **必须**：确保内容区域不拥挤，有效缓解用眼疲劳
- **禁止**：使用紧凑的布局造成视觉压迫感

### 字体与图标规范

#### 字体系统

- **必须**：正文和标题必须使用 Inter 或 SF Pro Display 字体系列
- **必须**：标题必须采用 Font-Extrabold 字重搭配 Tracking-tight 字符间距
- **禁止**：使用过于花哨、装饰性强或难以阅读的字体

#### 标签与次要信息

- **必须**：所有标签文本必须使用全大写 Uppercase 格式
- **必须**：必须应用 Tracking-widest（字母间距拉宽）样式
- **必须**：组合使用 Font-Bold 字重和 text-[10px] 字号
- **必须**：呈现工业设计般的严谨感和专业性

#### 图标规范

- **必须**：统一使用 Lucide-React 图标库，确保风格一致性
- **必须**：线条粗细必须固定为 1.5 或 2，保持视觉统一
- **必须**：图标颜色必须根据背景灰度自动适配（通常为 gray-500 或 black）
- **禁止**：在同一项目中混用不同风格或来源的图标库

## 实践指导

### 典型应用场景

- **仪表板界面**：应用毛玻璃效果和层级堆叠创建专业数据展示
- **设置面板**：使用高对比按钮和触觉反馈提升操作体验
- **导航菜单**：利用呼吸感排版和清晰层级构建易用导航

### 常见错误避免

- 避免使用纯白色背景造成视觉疲劳
- 避免圆角值不一致破坏设计统一性
- 避免图标风格混杂影响专业感
- 避免紧凑布局造成用户压迫感

### 性能优化建议

- 合理控制模糊度范围以平衡视觉效果和渲染性能
- 使用CSS变量统一管理颜色和间距标准
- 通过阴影层级而非额外DOM元素构建深度感

## 执行检查清单

在提交前端代码前，你必须确认以下项目全部完成：

### 视觉基调检查

- [ ] 全局底色使用了 iOS 系统级灰 `[#F2F2F7]` 或冷灰 `[#F9F9FB]`，杜绝纯白背景
- [ ] 按钮和交互组件与父容器存在 3%-10% 的明确色阶差异

### 材质质感检查

- [ ] 层级容器使用了 40-60px 范围的 backdrop-blur 高模糊度
- [ ] 正确应用双层物理描边（内描边 white/60 + 外描边 gray-200/40）
- [ ] 悬浮组件使用了柔和的大扩散阴影效果
- [ ] 凹陷组件正确应用 shadow-inner 配合浅灰背景

### 交互组件检查

- [ ] 主按钮使用了深空黑 `[#1C1C1E]` 或石墨色高对比背景
- [ ] 所有可点击项具备物理回弹反馈（scale-95 或 scale-[0.98]）
- [ ] 圆角值遵循 iOS 连续曲率规范（大容器 40-50px，功能块 28px，小组件 xl）

### 布局层级检查

- [ ] 界面呈现清晰的层级堆叠感和深度关系
- [ ] 内边距至少为 p-6 或 p-8，确保充足留白空间

### 字体图标检查

- [ ] 统一使用 Inter 或 SF Pro Display 字体系列
- [ ] 标题正确应用 Font-Extrabold + Tracking-tight 样式
- [ ] 次要信息使用 Uppercase + Tracking-widest 格式
- [ ] 统一使用 Lucide-React 图标库，线条粗细为 1.5 或 2
