ui-designerdesign-system

# 设计系统规范 ## 适用场景 在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。 ## 设计系统的价值 1. **一致性**：确保产品各部分视觉和交互统一 2. **效率**：设计师和开发者使用统一的设计语言，减少沟通成本 3. **可维护性**：修改设计token即可全局更新 4. **可扩展性**：新功能可以快速复用现有组件 ## 设计系统组成 ### 1. 颜色系统 #### 品牌色 | 名称 | 色值 | 用途 | 示例场景 | |------|------|------|----------| | Primary | `#3B82F6` | 主要操作、强调 | 主按钮、链接、选中状态 | | Primary-hover | `#2563EB` | 主色悬停态 | 按钮悬停 | | Primary-active | `#1D4ED8` | 主色按下态 | 按钮按下 | | Primary-light | `#DBEAFE` | 主色浅色背景 | 标签背景、高亮区域 | #### 中性色 | 名称 | 色值 | 用途 | |------|------|------| | Gray-900 | `#111827` | 标题文字 | | Gray-800 | `#1F2937` | 重要文字 | | Gray-700 | `#374151` | 正文文字 | | Gray-600 | `#4B5563` | 次要文字 | | Gray-500 | `#6B7280` | 辅助文字 | | Gray-400 | `#9CA3AF` | 占位文字 | | Gray-300 | `#D1D5DB` | 边框、分割线 | | Gray-200 | `#E5E7EB` | 浅边框 | | Gray-100 | `#F3F4F6` | 背景 | | Gray-50 | `#F9FAFB` | 浅背景 | | White | `#FFFFFF` | 卡片背景、主背景 | #### 语义色 | 名称 | 色值 | 用途 | 背景色 | |------|------|------|--------| | Success | `#10B981` | 成功状态 | `#D1FAE5` | | Warning | `#F59E0B` | 警告状态 | `#FEF3C7` | | Error | `#EF4444` | 错误状态 | `#FEE2E2` | | Info | `#3B82F6` | 信息提示 | `#DBEAFE` | **颜色使用原则**： - 主色用于主要操作和强调，不要滥用 - 中性色用于文字和背景，建立清晰的层次 - 语义色用于状态反馈，保持一致性 - 确保颜色对比度符合WCAG AA标准（≥4.5:1） ### 2. 字体系统 #### 字体家族 ```css /* 无衬线字体（主要） */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* 等宽字体（代码） */ --font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace; ``` #### 字体层级 | 层级 ...