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.cssTailwind v4theme映射只引用tokens.css不得独立重定义值components.html/components.manifest.json组件夹具与可重建缓存preview/静态预览页colors.html、typography.html、spacing.htmlUSAGE.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 sansDiscord 自研的 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--accentBlurple Hover悬停/激活#4752c4--accent-hoverBlurple Soft旧版 Blurple营销次级强调#7289da保留在文档语义层--accent-on为#ffffffBlurple 上的文本色--accent-active由color-mix(in oklab, var(--accent), black 14%)动态计算按下态无需再写死色值。Surface 表面深色主题为默认角色色值token 绑定层级Background Tertiary服务器列表轨道最深#1e1f22--surface-warmB-slotBackground Secondary频道/设置侧边栏#2b2d31--surfaceA1-identityBackground Primary聊天表面/消息列#313338--bgA1-identityBackground 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-2B-slotHeader Secondary弱化标题#b5bac1语义层Text Normal正文比纯白略冷#dbdee1--fgText Muted时间戳/服务器名/元数据#949ba4--mutedText Link消息内超链接天蓝区别于 Blurple#00a8fc语义层Channels Default侧边栏未激活频道名#80848e--metaB-slotStatus 状态与语义色角色色值token 绑定Status Online在线点/成功态#23a55a--successStatus Idle空闲/离开#f0b232--warnStatus DND勿扰兼作破坏性红#f23f43--dangerStatus 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)--borderBorder Subtle卡片实线分隔#3f4147--border-softB-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-seriftokens.css 中--font-display与--font-body同值Display旧版 WhitneyWhitney回退gg sans代码 / 等宽gg mono回退Consolas, Andale Mono, Courier New, Courier, monospace--font-mono。层级阶梯角色字体字号字重行高字距说明Display Herogg sans56px (3.5rem)8001.1-0.02em营销主视觉--text-4xl/--leading-tight/--tracking-displayPage Headinggg sans24px (1.5rem)7001.25normal设置/个人资料标题--text-2xlChannel Namegg sans16px (1rem)6001.25normal#general频道头Message Bodygg sans16px (1rem)4001.375normal标准聊天文本--text-base/--leading-bodyUsernamegg sans16px (1rem)5001.25normal消息作者Timestampgg sans12px (0.75rem)5001.25normal今天 16:32--text-xsSidebar Channelgg sans16px (1rem)5001.25normal频道列表行Server Namegg sans16px (1rem)6001.25normal服务器头Caption / Metagg sans12px (0.75rem)4001.30.02em状态文本、已编辑标记Code Inlinegg mono0.875em400inheritnormal行内codeCode Blockgg mono14px (0.875rem)4001.5normal三重反引号代码块完整字号阶梯在 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、悬停#6d6f78Tertiary / 链接式背景透明、文本#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×10px3px 边框使用 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: 32pxtokens.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 v4tailwind-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），仅供参考