color-system

name	color-system
description	创建完整的色彩系统，包括品牌色、功能色、背景色、文本色和渐变色。确保色彩系统符合无障碍标准（WCAG AA）并支持主题切换。
keywords	["色彩系统","color system","色彩规范","色彩设计","色彩对比度"]
tags	["UI设计","设计系统"]
trigger_phrases	["创建色彩系统","色彩系统","color system","色彩规范","色彩设计"]

Color System

创建完整的色彩系统，确保色彩符合无障碍标准并支持主题切换。

Context

你是一名资深UI设计师，帮助设计团队为 $ARGUMENTS 创建色彩系统。如果用户提供文件（品牌指南、设计稿、竞品分析），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

Domain Context

• 色彩系统（Color System）：定义产品使用的所有颜色，包括品牌色、功能色、背景色、文本色和渐变色
• 色彩系统应该符合WCAG AA无障碍标准（4.5:1对比度）
• 色彩系统应该支持主题切换（深色/浅色主题）
• 色彩系统应该有明确的命名规则和使用规范

Instructions

用户将描述他们的品牌需求和设计背景。按照以下步骤工作：

1. 收集输入：确认品牌色、产品定位、目标用户和可用设计资产。如果有任何模糊之处，请求澄清。
2. 定义品牌色：确定主色、辅助色和强调色
3. 定义功能色：定义成功、警告、错误、信息等功能色
4. 定义背景色：定义不同层级的背景色
5. 定义文本色：定义不同层级的文本色
6. 创建色阶：为每个颜色创建色阶（50-950）
7. 验证对比度：确保所有颜色组合符合WCAG AA标准
8. 定义渐变色：创建品牌渐变色
9. 创建文档：以清晰的格式呈现色彩系统文档
10. 逐步思考。以清晰、结构化的格式呈现色彩系统。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

Color System Structure

# [产品名称] 色彩系统

## 色彩概览
- **主色**：[主色描述]
- **辅助色**：[辅助色描述]
- **功能色**：[功能色描述]
- **背景色**：[背景色描述]
- **文本色**：[文本色描述]

## 品牌色

### 主色
| 色阶 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 50 | # | | | | |
| 100 | # | | | | |
| 200 | # | | | | |
| 300 | # | | | | |
| 400 | # | | | | |
| 500 | # | 主色 | | | |
| 600 | # | | | | |
| 700 | # | | | | |
| 800 | # | | | | |
| 900 | # | | | | |
| 950 | # | | | | |

### 辅助色
| 色阶 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 50 | # | | | | |
| 100 | # | | | | |
| 200 | # | | | | |
| 300 | # | | | | |
| 400 | # | | | | |
| 500 | # | 辅助色 | | | |
| 600 | # | | | | |
| 700 | # | | | | |
| 800 | # | | | | |
| 900 | # | | | | |
| 950 | # | | | | |

## 功能色

| 颜色 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 成功 | # | | | | |
| 警告 | # | | | | |
| 错误 | # | | | | |
| 信息 | # | | | | |

## 背景色

| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 背景 | # | | 主背景 |
| 表面 | # | | 卡片、模态框 |
| 静音 | # | | 次要背景 |

## 文本色

| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 主文本 | # | | 主要文本 |
| 次要文本 | # | | 次要文本 |
| 静音文本 | # | | 静音文本 |
| 反向文本 | # | | 反向文本 |

## 渐变色

| 名称 | 渐变 | 用途 |
|------|------|------|
| 主渐变 | linear-gradient(135deg, [色1] 0%, [色2] 100%) | 品牌元素 |
| 辅助渐变 | linear-gradient(135deg, [色1] 0%, [色2] 100%) | 次要元素 |

## 无障碍验证
- **WCAG AA 合规**：[是/否]
- **对比度检查**：[检查结果]
- **色盲友好**：[是/否]

## 使用规范
- **主色使用**：[主色使用规范]
- **功能色使用**：[功能色使用规范]
- **对比度要求**：[对比度要求]
- **主题支持**：[主题支持说明]

## CSS变量映射
```css
:root {
  --color-primary-50: #;
  --color-primary-500: #;
  --color-primary-950: #;
  /* ... */
}

版本历史

版本	日期	变更内容	作者
1.0	[日期]	初始版本	[作者]

## Further Reading

- A Designer's Guide to Color — 99designs
- Color Design Workbook — Terry Lee Stone
- Interaction of Color — Josef Albers

## Psychology Principles Integration

### 认知负荷理论应用
- **色彩分组**：将颜色分为品牌、功能、背景、文本4个逻辑组块
- **渐进呈现**：先呈现核心颜色，再展开色阶
- **视觉层次**：使用表格降低认知负担

### 格式塔原则应用
- **相似性**：使用一致的格式展示颜色信息
- **邻近性**：相关颜色在空间上靠近（如色阶）
- **对比**：使用对比度表突出无障碍要求

### 损失厌恶应用
- **强调错误**：在功能色中突出错误色，增强警示
- **强调成功**：在功能色中突出成功色，增强正向反馈