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. 组件样式

按钮

/* 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; }

输入框

.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;
}

侧边栏频道项

.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;
}

未读徽章

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

消息附件 / 卡片

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

回应

.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 的字号。不要大圆角按钮。