Open Design 设计系统实践：复刻 Discord 暗色语音社区风格的完整设计 Token 指南
【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design
本指南以 Open Design 仓库内置的 Discord 设计系统包（法语版 DESIGN-fr.md）为骨架，系统拆解"暗色优先 + Blurple 单点强调"的语音社区产品设计语言，并结合仓库中的 tokens.css、design-tokens.json 与 manifest.json 给出源码级 token 契约。读完你不仅能复刻 Discord 风格的暗色聊天界面（三阶暗色表面、gg sans 排版体系、状态点语言、头像圆角形变动效），还能理解 Open Design 设计系统包从
DESIGN.md文字规范到可运行 CSS 变量的完整落地链路。
1. 包结构与"文字规范 → 可执行 Token"的落地链路
Open Design 将每个品牌设计系统封装为design-systems/<brand>/下的标准包。Discord 包的目录布局（见 manifest.json 的files字段）：
DESIGN.md：品牌的权威设计散文（即本文主体内容的英文原件）；tokens.css：已编译的权威 token 变量（源码真相，其余产物均由它派生）；design-tokens.json：从tokens.css+ source/token-contract.report.json 派生的机器可读 token 清单；tailwind-v4.css：Tailwind v4@theme映射（只引用tokens.css，不得独立重定义值）；components.html/components.manifest.json：组件夹具与可重建缓存；preview/：静态预览页（colors.html、typography.html、spacing.html）；USAGE.md：面向 Agent 的使用守则；source/：导入证据（evidence.md、tokens.source.json、token-contract.report.json）。
根据 source/evidence.md，该包是基于 Open Design 精选捆绑夹具的 Design System 2.0 回填，并未声称重新抓取上游品牌仓库——因此文章中的数值均以仓库内文件为准。
在 design-tokens.json 的合约摘要中，该包共声明56 个 token，全部有源码背书（sourceBackedTokens: 56），分层为：A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个，整体评分 100、等级excellent。这与 design-systems/_schema/AGENTS.md 中定义的"四层 token 模型"一一对应：A1 由品牌决定（缺失即守卫失败）、A2 带默认值、B-slot 可用var(--sibling)别名折叠——Discord 包的--surface-warm、--fg-2、--meta、--border-soft正是 4 个 B-slot 成员。
2. 视觉主题与氛围：暗色优先的三阶深度
Discord 产品为晚间、团战与群组语音场景而设计，因此整体表面暗色优先。默认画布是Background Primary（深色主题#1e1f22、浅色主题#313338），聊天列叠加在略亮或略暗的色阶上，用以区分频道、子区与侧栏。
核心特征（继承自原文档第 1 节）：
- 暗色表面三阶深度：
#1e1f22（最深的服务器列表轨道）→#2b2d31（频道侧边栏）→#313338（聊天表面）； - Blurple
#5865f2是聊天表面唯一的饱和强调色，仅用于品牌标识、主 CTA、提及与"你"的 affordance； - 全部文本使用gg sans（Discord 自研的 Whitney 替代字体），友好、几何、中性；
- 圆角方形服务器头像（16px 圆角）悬停时变为正圆；
- 聊天行距紧凑（消息组间 4–8px），侧栏内边距宽裕；
- 状态点：绿=在线、黄=空闲、红=勿扰、灰=离线；
- 对齐像素网格的 1px 分隔线，采用低透明度偏白。
该"三句品牌身份"在 tokens.css 的文件头注释中被原样固化，并落到具体的 token 绑定：--bg取#313338（聊天表面），--surface取#2b2d31，--surface-warm取#1e1f22（最深层服务器轨道）。圆角语言"圆润但不至于圆球软糯"也映射为半径阶梯：卡片 8px、输入框 4px、状态徽章与标签用全药丸。
3. 色彩调色板与 Token 角色映射
原文档第 2 节完整定义了 Discord 配色，以下是完整继承并对照 tokens.css 的 token 映射。
Primary 主色系
| 角色 | 色值 | token 绑定 |
|---|---|---|
| Blurple（品牌主色 / 主 CTA / 提及高亮） | #5865f2 | --accent |
| Blurple Hover（悬停/激活） | #4752c4 | --accent-hover |
| Blurple Soft（旧版 Blurple，营销次级强调） | #7289da | （保留在文档语义层） |
--accent-on为#ffffff（Blurple 上的文本色）；--accent-active由color-mix(in oklab, var(--accent), black 14%)动态计算，按下态无需再写死色值。
Surface 表面（深色主题为默认）
| 角色 | 色值 | token 绑定 | 层级 |
|---|---|---|---|
| Background Tertiary（服务器列表轨道，最深） | #1e1f22 | --surface-warm | B-slot |
| Background Secondary（频道/设置侧边栏） | #2b2d31 | --surface | A1-identity |
| Background Primary（聊天表面/消息列） | #313338 | --bg | A1-identity |
| Background Floating（浮层/提示/自动补全） | #111214 | （文档语义层） | — |
| Background Modifier Hover（行悬停叠加） | rgba(78, 80, 88, 0.3) | — | — |
| Background Modifier Selected（活动行） | rgba(78, 80, 88, 0.6) | — | — |
Surface 表面（浅色主题）
| 角色 | 色值 | 说明 |
|---|---|---|
| Light Bg Primary | #ffffff | 浅色聊天表面 |
| Light Bg Secondary | #f2f3f5 | 浅色侧边栏 |
| Light Bg Tertiary | #e3e5e8 | 最深的浅色表面 |
Text 文本
| 角色 | 色值 | token 绑定 |
|---|---|---|
| Header Primary（频道头/弹窗标题） | #f2f3f5 | --fg-2（B-slot） |
| Header Secondary（弱化标题） | #b5bac1 | （语义层） |
| Text Normal（正文，比纯白略冷） | #dbdee1 | --fg |
| Text Muted（时间戳/服务器名/元数据） | #949ba4 | --muted |
| Text Link（消息内超链接，天蓝，区别于 Blurple） | #00a8fc | （语义层） |
| Channels Default（侧边栏未激活频道名） | #80848e | --meta（B-slot） |
Status 状态与语义色
| 角色 | 色值 | token 绑定 |
|---|---|---|
| Status Online（在线点/成功态） | #23a55a | --success |
| Status Idle（空闲/离开） | #f0b232 | --warn |
| Status DND（勿扰，兼作破坏性红） | #f23f43 | --danger |
| Status Streaming（"直播中"紫色） | #593695 | （语义层） |
| Status Offline（离线灰） | #80848e | 复用--meta系 |
| Mention Highlight（@提及行浅 Blurple 泛光） | rgba(88, 101, 242, 0.1) | （语义层） |
Border 边框与分隔线
| 角色 | 色值 | token 绑定 |
|---|---|---|
| Background Modifier Accent（深色标准分隔线） | rgba(255, 255, 255, 0.06) | --border |
| Border Subtle（卡片实线分隔） | #3f4147 | --border-soft（B-slot） |
值得注意的源码细节：Discord 的深色表面以"亮度阶梯 + 半透明白色边框"作为深度信号，而非投影——见 tokens.css 的 Elevation 组：--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised也仅叠加 1px 白色微光描边。
4. 排版体系：gg sans 与"用字重分层而非用颜色分层"
字体族（继承原文档第 3 节）
- 正文 / UI / 标题：
gg sans，回退"Helvetica Neue", Helvetica, Arial, sans-serif（tokens.css 中--font-display与--font-body同值）； - Display（旧版 Whitney）：
Whitney，回退gg sans； - 代码 / 等宽：
"gg mono"，回退Consolas, Andale Mono, Courier New, Courier, monospace（--font-mono）。
层级阶梯
| 角色 | 字体 | 字号 | 字重 | 行高 | 字距 | 说明 |
|---|---|---|---|---|---|---|
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | 营销主视觉（--text-4xl/--leading-tight/--tracking-display） |
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | 设置/个人资料标题（--text-2xl） |
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | #general频道头 |
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | 标准聊天文本（--text-base/--leading-body） |
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | 消息作者 |
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "今天 16:32"（--text-xs） |
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | 频道列表行 |
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | 服务器头 |
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | 状态文本、已编辑标记 |
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | 行内code |
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | 三重反引号代码块 |
完整字号阶梯在 tokens.css 中被规范化为--text-xs(12px) →--text-sm(14px) →--text-base(16px) →--text-lg(18px) →--text-xl(20px) →--text-2xl(24px) →--text-3xl(32px) →--text-4xl(56px)，并配有--leading-body: 1.375、--leading-tight: 1.10、--tracking-display: -0.02em。
排版原则
- 友好几何：gg sans 在 a/g/s 上有圆润末端，替代 Whitney 时保留温暖感且不牺牲小字号可读性；
- 字重对比优先于颜色对比：层级来自 400→500→600→700→800 的字重阶梯，表面保持中性；
- 正文永不小于 16px：密度来自行高（1.375），而非缩小字号。
5. 组件样式规格
以下规格完整继承自原文档第 4 节，并对照 tokens.css 的半径/圆角 token（--radius-sm: 4px、--radius-md: 8px、--radius-lg: 16px、--radius-pill: 9999px）。
按钮
- Primary：背景
#5865f2、文本#ffffff、内边距 8px 16px、圆角 4px、悬停#4752c4；用于主 CTA、"继续"、"加入服务器"； - Secondary：背景
#4e5058、文本#ffffff、内边距 8px 16px、圆角 4px、悬停#6d6f78； - Tertiary / 链接式：背景透明、文本
#dbdee1、悬停仅加下划线、背景不变； - Danger：背景
#da373c、文本#ffffff、悬停#a12d2f。
输入框
背景#1e1f22、文本#dbdee1、边框 1px solid#1e1f22、圆角 4px、内边距 10px 12px、聚焦边框#5865f2。焦点态的"光环"在 token 层对应 tokens.css 的--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3)——3px 半透明 Blurple 外环，与设计语义完全一致。
服务器头像
- 尺寸 48×48px；默认圆角 16px（圆角方形），悬停与激活时过渡为 50% 正圆（对应
--radius-lg与--radius-pill）； - 激活态：图标列左缘 4px 白色药丸指示条。
状态点
10×10px，3px 边框使用 background-tertiary 色（形成"缺口"效果），定位在头像右下角。
卡片 / Embed
背景#2b2d31（深色）或#f2f3f5（浅色），左侧 4px 实线使用 embed 强调色，圆角 4px，内边距 8px 16px。
提及药丸（Mention Pill）
背景rgba(88, 101, 242, 0.3)、文本#c9cdfb、内边距 0 2px、圆角 3px。
6. 间距与布局：4px 网格与三栏结构
继承原文档第 5 节，并补充 tokens.css 的容器 token：
- 基础单位 4px，刻度为 4、8、12、16、20、24、32、40（对应
--space-1…--space-12，见 tokens.css）； - 服务器轨道：固定 72px 宽；
- 频道侧边栏：240px 宽；
- 成员列表：桌面端 240px 宽；
- 聊天列：流式，最小 380px。
容器层面还定义了--container-max: 1200px，以及响应式沟槽--container-gutter-desktop: 24px、--container-gutter-tablet/phone: 16px；区块纵向节奏--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px（tokens.css、tokens.css）。
7. 动效规格
继承原文档第 6 节：
- 时长：悬停 200ms（
--motion-base）、头像圆角形变 350ms、气泡提示淡入 80ms（--motion-fast）； - 缓动：头像形变使用
cubic-bezier(0.215, 0.61, 0.355, 1)（起步利落然后稳定）；tokens.css 中的通用缓动为--ease-standard: cubic-bezier(0.2, 0, 0, 1)； - 通知脉冲：未读提及指示器
1.4s ease-in-out infinite无限循环。
8. 使用护栏：保持 Discord 产品感觉
继承原文档第 7 节，并结合 USAGE.md 的 Agent 使用守则：
- 暗色外壳、紧凑密度与 Blurple 动作层级必须成套保留；在浅色营销风格版式上单独使用 Blurple 会破坏 Discord 产品识别度；
- 高导航密度的表面应围绕"轨道 + 侧边栏 + 聊天列"组织，而不是孤立的装饰卡片；
- 用圆角方形头像与状态点语言表示人物、服务器或活跃在场状态；
- Do：严格保留 schema token 名称（保证跨品牌切换可靠）；用
--accent表达主操作、链接、焦点态与唯一视觉焦点；复用 components.manifest.json 中的组件组；将source/文件视为捆绑夹具回填的审计证据； - Avoid：不在复制的
:roottoken 块之外使用裸十六进制值；不脱离tokens.css独立重定义 Tailwind 或设计 token 值；不声称存在原始上游源码证据（本包基于精选捆绑夹具）；不新增components.html或DESIGN.md中未体现的组件配方。
9. 落地消费：从 Token 到 Tailwind v4 与预览页
Discord 设计系统包提供了三种可直接消费的落地方式：
- 原生 CSS 变量：直接复制 tokens.css 的
:root块到你的<style>中，即可获得全部 56 个变量（表面、前景、边框、强调、语义、字体、字号、间距、圆角、阴影、动效、容器）； - Tailwind v4：tailwind-v4.css 以
@import "./tokens.css"引入源，再在@theme中把--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-*、--container-*逐一映射到 token 变量——注意该文件是派生产物，必须保持tokens.css为唯一真相源； - 预览与组件夹具：通过 preview/colors.html、preview/typography.html、preview/spacing.html 和 components.html 可视化核对色板、层级与组件渲染是否符合预期。
根据 manifest.json，该包以od-design-system-project/v1schema 发布，importMode为normalized，并建议绑定 craft 规范中的 color 与 accessibility-baseline。而 design-systems/_schema/AGENTS.md 说明：这类清单包会受到scripts/check-design-system-manifests.ts等守卫校验（manifest 形状、A2 必需 token、B-slot 必需 token、A2 默认值一致性等），保证每个打包品牌的tokens.css完整、自洽、可被 daemon 与提示词组合管线直接消费——这也解释了为什么每个品牌包都必须显式声明全部共享 token，而不是依赖全局样式表兜底。
10. 小结
Discord 设计系统包的核心可提炼为一条可复用的设计公式：三阶暗色表面（#1e1f22/#2b2d31/#313338）+ 单一饱和强调色 Blurple（#5865f2）+ gg sans 字重分层排版 + 圆角方形头像语言 + 4px 网格三栏布局。在 Open Design 中，这条公式被完整固化为 56 个经过契约校验的 CSS 变量与 Tailwind v4 映射，任何人复制 tokens.css 的:root块即可在原型、落地页或聊天类产品中还原 Discord 的视觉质感——同时通过 USAGE.md 的守则避免破坏其产品识别度。
【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
