workbuddy_skills/open-design/design-systems/slack/DESIGN-zh.md

# 受 Slack 启发的设计系统

> Category: 生产力与 SaaS
> 职场通讯平台。以深茄紫为主色，多色调 Logo 调色板，明亮界面搭配深色侧边栏，温暖而亲切。

## 1. 视觉主题与氛围

Slack 的品牌形象建立在"工作也可以充满人情味，甚至有点趣味"的理念之上。标准界面是**明亮**的——白色内容区搭配深茄紫（`#4A154B`）侧边栏——与深色优先工具形成反差。这种对比是刻意为之：侧边栏是沉稳、始终存在的导航锚点，而内容区则明亮开阔。

Logo 调色板——蓝、绿、黄、红——主要出现在井号图标和营销场景中，而非散落于整个 UI。在产品本身中，Slack 使用克制、专业的配色系统，以茄紫色作为唯一的品牌锚点。

**核心特征：**
- 明亮优先的内容界面：白色 `#FFFFFF` 与近白色 `#F8F8F8`
- 深茄紫 `#4A154B` 侧边栏——品牌最具辨识度的 UI 元素
- 四种 Logo 强调色（蓝、绿、黄、红）仅少量用作高亮
- 标题使用 Larsseit（营销场景），UI 使用系统无衬线字体
- 圆润但不卡通：大多数组件圆角为 4–8px
- 紧凑而透气：消息行紧密，线程层级清晰
- 温暖对话的语调——表情符号、回应和插图是一等公民

---

## 2. 色彩规范与用途

### 品牌主色
| 变量 | Hex | 用途 |
|---|---|---|
| `--color-aubergine` | `#4A154B` | 侧边栏背景，品牌主色 |
| `--color-aubergine-dark` | `#350d36` | 茄紫界面上的悬停状态 |
| `--color-aubergine-light` | `#611f69` | 侧边栏活跃项高亮 |

### Logo 强调色（少量使用——仅用于高亮、图标、营销）
| 变量 | Hex | 名称 | 用途 |
|---|---|---|---|
| `--color-blue` | `#36C5F0` | 天蓝 | 频道图标、链接、信息状态 |
| `--color-green` | `#2EB67D` | 青绿 | 在线状态、成功状态 |
| `--color-yellow` | `#ECB22E` | 金黄 | 离开状态、警告、高亮 |
| `--color-red` | `#E01E5A` | 宝石红 | 通知、错误、提及徽章 |

### 界面背景色
| 变量 | Hex | 用途 |
|---|---|---|
| `--bg-primary` | `#FFFFFF` | 主消息区、弹窗 |
| `--bg-secondary` | `#F8F8F8` | 线程面板、次级界面 |
| `--bg-tertiary` | `#F1F1F1` | 输入框背景、悬停状态 |
| `--bg-sidebar` | `#4A154B` | 左侧边栏（茄紫色） |
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | 侧边栏项悬停 |
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | 活跃侧边栏项 |
| `--bg-message-hover` | `#F8F8F8` | 消息行悬停 |

### 文字颜色
| 变量 | Hex | 用途 |
|---|---|---|
| `--text-primary` | `#1D1C1D` | 主要正文（近黑色） |
| `--text-secondary` | `#616061` | 时间戳、静音标签 |
| `--text-sidebar` | `rgba(255,255,255,0.9)` | 侧边栏频道名 |
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | 侧边栏未激活项 |
| `--text-link` | `#1264A3` | 消息内联链接 |
| `--text-mention` | `#1264A3` | @提及文字颜色 |

### 语义色
| 变量 | Hex | 用途 |
|---|---|---|
| `--color-success` | `#2EB67D` | 成功提示、积极状态 |
| `--color-warning` | `#ECB22E` | 警告状态 |
| `--color-danger` | `#E01E5A` | 错误状态、破坏性操作 |
| `--color-info` | `#36C5F0` | 信息性高亮 |

### 边框与分隔线
| 变量 | Hex | 用途 |
|---|---|---|
| `--border-default` | `#DDDDDD` | 标准分隔线、卡片边框 |
| `--border-subtle` | `#F1F1F1` | 行间微妙分隔线 |
| `--border-focus` | `#1264A3` | 焦点环颜色 |

---

## 3. 排版规则

### 字体
| 用途 | 官方字体 | 网页回退 |
|---|---|---|
| 展示 / 营销标题 | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
| UI / 正文 / 框架 | Slack Lato（定制） | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
| 代码 / 等宽 | — | `'Monaco', 'Menlo', 'Courier New', monospace` |

> Slack 营销标题使用 **Larsseit**，产品内 UI 使用定制版 Lato。网页使用时，`system-ui` 是最安全的回退方案。

### 字号层级

| 层级 | 大小 | 字重 | 行高 | 字间距 | 用途 |
|---|---|---|---|---|---|
| Display XL | 48px | 800 | 1.1 | -1px | 营销主视觉标题 |
| Display L | 36px | 700 | 1.15 | -0.5px | 区块主视觉 |
| Heading 1 | 28px | 700 | 1.25 | normal | 弹窗标题、页面标题 |
| Heading 2 | 22px | 700 | 1.3 | normal | 卡片标题、设置区块 |
| Heading 3 | 18px | 700 | 1.35 | normal | 子区块标题 |
| Body L | 16px | 400 | 1.5 | normal | 消息文本、描述 |
| Body | 15px | 400 | 1.46667 | normal | 默认 UI 文字（Slack 基础字号） |
| Body SM | 13px | 400 | 1.38462 | normal | 次要元数据 |
| Caption | 12px | 400 | 1.33 | normal | 时间戳、提示 |
| Code | 12px | 400 | 1.5 | normal | 行内代码、代码块 |

### 排版规则
- Slack 基础正文字号为 **15px**——比 16px 略小，以提高密度
- 未读频道：字重 700——粗体是主要的未读指示器
- 时间戳：12px `--text-secondary`，仅悬停时显示
- 代码块：背景 `#F8F8F8`，边框 `1px solid #DDDDDD`，圆角 4px
- 不使用 12px 以下的字号
- 营销标题：大展示尺寸使用字间距 `-1px`

---

## 4. 组件样式

### 按钮

```css
/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }
```

### 输入框
```css
.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}
```

### 侧边栏频道项
```css
.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}
```

### 未读徽章
```css
.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}
```

### 消息附件 / 卡片
```css
.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}
```

### 回应
```css
.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}
```

---

## 5. 布局原则

### 三栏布局
```
┌──────────────┬──────────────────────────────┬─────────────┐
│   Sidebar    │        Message Area          │   Thread    │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  optional   │
└──────────────┴──────────────────────────────┴─────────────┘
```

### 间距系统（基础单位 4px）
| 变量 | 数值 | 用途 |
|---|---|---|
| `--space-1` | 4px | 紧凑间隙 |
| `--space-2` | 8px | 组件内边距 |
| `--space-3` | 12px | 输入框内边距 |
| `--space-4` | 16px | 标准内边距 |
| `--space-6` | 24px | 卡片内边距 |
| `--space-8` | 32px | 区块间距 |

### 侧边栏结构
```
[工作区名称 ▼]
────────────────────
Threads
All DMs
Drafts & Sent
────────────────────
▼ Channels
  # general
  # random
  # design  ● (unread)
────────────────────
▼ Direct Messages
  John Doe
  Jane Smith
```

### 消息编辑器
- 固定在消息区底部
- `border: 1px solid #DDDDDD`，`border-radius: 8px`，`margin: 0 16px 16px`
- 工具栏：表情、附件、格式化、发送按钮

---

## 6. 深度与层级

Slack 在明亮界面上使用轻柔阴影：

| 层级 | 用途 | 阴影 |
|---|---|---|
| 扁平 | 消息行、侧边栏项 | none |
| 低 | 卡片、输入框 | `0 1px 3px rgba(0,0,0,0.08)` |
| 中 | 下拉菜单、弹出层 | `0 4px 12px rgba(0,0,0,0.12)` |
| 高 | 模态框、对话框 | `0 8px 24px rgba(0,0,0,0.15)` |
| 遮罩 | 模态背景遮罩 | `rgba(0,0,0,0.5)` |

---

## 7. 应该与不应该

### ✅ 应该
- 侧边栏使用茄紫色 `#4A154B`——这是 Slack 最标志性的 UI 元素
- 保持主内容区白色和明亮
- 所有正文使用 `#1D1C1D`（近黑色），而非纯黑
- 用粗体频道名表示未读状态——字重是指示器
- 四种强调色仅用于语义角色（成功、警告、危险、信息）
- 消息附件和嵌入内容使用 `border-left: 4px`
- 仅在悬停时显示时间戳
- 链接和焦点状态使用 `#1264A3`
- 侧边栏项保持紧凑：高度 28px，圆角 6px

### ❌ 不应该
- 不要使用深色主内容区——Slack 是明亮优先的
- 不要将蓝/绿/黄/红作为装饰性强调色散落各处
- 不要使用纯黑 `#000000` 作为文字颜色
- 不要使用气泡——消息是扁平行
- 不要将按钮做成大圆角——4px 是标准
- 不要永久显示时间戳
- 不要将频道名全大写
- 不要使用 12px 以下的字号

---

## 8. 响应式行为

### 断点
| 断点 | 宽度 | 布局 |
|---|---|---|
| 移动端 | < 768px | 单面板，侧边栏作为左抽屉 |
| 平板 | 768–1024px | 侧边栏 + 仅消息区 |
| 桌面端 | > 1024px | 完整三栏布局 |

### 移动端适配
- 侧边栏：左抽屉，向右滑动打开
- 底部标签栏：首页、私信、动态、我
- 线程面板：全屏覆盖层
- 编辑器：固定在键盘上方
- 频道列表项：44px 触摸目标高度
- 移动端保留茄紫色顶部标题栏

---

## 9. Agent 提示指南

生成 Slack 风格设计时，遵循以下方法：

**颜色应用：**
> 将 `background: #FFFFFF` 设为主画布。侧边栏使用 `#4A154B`（茄紫色）。所有主要文字使用 `#1D1C1D`。链接和焦点环使用 `#1264A3`。四种 Logo 颜色——`#36C5F0`、`#2EB67D`、`#ECB22E`、`#E01E5A`——仅作语义用途：信息、成功、警告、危险。

**排版：**
> 所有 UI 使用 `system-ui, -apple-system, sans-serif`。基础字号为 15px。未读频道：字重 700。正文：字重 400。时间戳：12px `#616061`，仅悬停显示。代码：`Monaco, Menlo, monospace`，12px，背景 `#F8F8F8`。

**布局：**
> 三栏：240px 茄紫色侧边栏 + 弹性白色消息区 + 可选 400px 线程面板。侧边栏项：高度 28px，圆角 6px，未读时加粗。编辑器：固定底部，`border: 1px solid #DDDDDD`，`border-radius: 8px`。

**组件：**
> 按钮：圆角 4px，高度 36px，茄紫色主按钮。输入框：`1px solid #DDDDDD` 边框，`#1264A3` 焦点环。消息行：扁平，无气泡，36px 圆形头像。回应：胶囊形 `border: 1px solid #DDDDDD`，`border-radius: 24px`。

**语调：**
> Slack 是温暖、专业且充满人情味的。空状态使用友好插图。行动号召直接明确："Send message"、"Get started"。错误信息清晰且有帮助。绝不令人感到警觉。

**需要避免的反模式：**
> 不要深色内容区。不要气泡。不要纯黑文字。不要散落的多色强调。不要全大写频道名。不要低于 12px 的字号。不要大圆角按钮。