Slack Design System

工作通讯美学 · 协作效率引擎 · 2026.02.18

12M+
Daily Active
65K
Teams/sec
65%
Fortune 100
Design Tokens

Slack 的设计语言强调效率与乐趣并存，深色模式为默认，emoji 与色彩点缀打破沉闷。

:root {
  --color-brand: #4A154B; /* Slack Purple */
  --color-bg: #1a1d21; /* Deep Dark */
  --radius-md: 8px;
  --font-primary: "Lato", sans-serif;
}
#4A1
#126
#2EB
#ECB
#E01
Sidebar Architecture

左侧栏 + 消息区的经典布局，信息层级清晰，workspace 切换无摩擦。

.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.message-list {
  flex-direction: column;
  overflow-y: auto;
}
Design Philosophy
  • Efficiency First: 减少操作步骤，快速触达
  • Fun at Work: emoji 与表情让工作不再严肃
  • Context Awareness: 频道 / DM / 讨论串，层级分明
  • Async by Default: 异步沟通是现代工作方式
The Formula

Collaboration = Speed × Joy − Noise

协作效率 = 速度 × 乐趣 - 噪音