Open Design 中的 Discord 设计系统复刻Blurple 暗色界面、gg sans 排版与令牌化组件规范全解析【免费下载链接】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-designDiscord 的产品体验建立在一套鲜明的视觉语言之上默认暗色的三层深度表面、唯一的饱和强调色 Blurple、以及用字重阶梯而非颜色对比来构建信息层级。Open Design 仓库将这套语言整理成可复用的设计系统包design-systems/discord以规范文档多语言DESIGN-*.md、令牌样式表tokens.css、组件夹具components.html与派生产物design-tokens.json、tailwind-v4.css四层形式落地。阅读本文后你将掌握 Discord 风格暗色界面的完整配色、排版、组件、间距与动效参数并能在 Open Design 的 Agent 工作流中按规范直接引用这套令牌化设计系统。1. 包结构一个设计系统如何被组织成可审计的资产design-systems/discord目录是一个完整的 Design System 2.0 包其 manifest.json 声明了包契约规范文档DESIGN.md、令牌tokens.css、JSON 化令牌design-tokens.json、Tailwind v4 映射tailwind-v4.css、组件夹具components.html与组件清单components.manifest.json并配套 USAGE.md 指导消费顺序。值得注意的是一点国际化细节同一份规范被翻译为 20 余种语言包括 DESIGN-zh.md、DESIGN-ja.md 与本文对应的 DESIGN-uk.md确保不同语言的 Agent 与审阅者都能读取同一套视觉契约。包内还包含三个可视化预览页 preview/colors.html、preview/typography.html 与 preview/spacing.html以及source/下的审计证据。据 source/evidence.md 说明本包基于 Open Design 精选的内置夹具curated bundled fixture回填并未声称对上游品牌站点做过全新抓取这一点在使用时需如实对待。2. 视觉主题与氛围为夜间语音社区而生的暗色语言Discord 的产品被设计用于夜晚、开黑与群组语音场景因此整个界面默认暗色。规范 DESIGN.md 第 1 节与 DESIGN-uk.md 对应内容一致定义了以下关键特征三层深度表面#1e1f22/#2b2d31/#313338靠亮度阶梯luminance stepping而非颜色变化区分层级Blurple#5865f2是聊天界面中唯一的饱和强调色保留给品牌标识、主 CTA、提及与你自己的标识用量克制以在低饱和中性色中凸显gg sansDiscord 自研的 Whitney 替代字体用于全部文本几何圆润、友好但不失小字号可读性服务器头像为 48px 圆角方形16px 圆角悬停时变形为圆形聊天行距紧凑消息组之间 4–8px侧栏留白宽松状态点绿色在线、黄色离开、红色勿扰、灰色离线1px 分割线以低透明度、微偏白的颜色并做像素对齐。形态语言圆润但不过分膨胀卡片 8px 圆角、输入框 4px 圆角、状态徽章与标签使用全椭圆。这一整套参数在 tokens.css 头部注释中以三句话概括了品牌身份并直接映射为 CSS 变量。3. 色彩角色与调色板3.1 主色Primary角色值用途Blurple#5865f2品牌主色、主 CTA、提及高亮Blurple Hover#4752c4blurple 的悬停/激活态Blurple Soft#7289da旧版 blurple营销中的次级强调在 tokens.css 中对应--accent、--accent-hover并额外定义了--accent-active: color-mix(in oklab, var(--accent), black 14%)与--accent-on: #ffffff。3.2 表面暗色主题默认令牌值语义Background Tertiary#1e1f22服务器列表栏最深的背景Background Secondary#2b2d31频道侧栏、设置侧栏Background Primary#313338聊天表面、消息列Background Floating#111214浮层、提示、自动补全Background Modifier Hoverrgba(78, 80, 88, 0.3)行悬停遮罩Background Modifier Selectedrgba(78, 80, 88, 0.6)激活行3.3 表面亮色主题令牌值语义Light Bg Primary#ffffff亮色主题聊天表面Light Bg Secondary#f2f3f5亮色主题侧栏Light Bg Tertiary#e3e5e8最深的亮色表面3.4 文本令牌值语义Header Primary#f2f3f5暗色下频道标题、弹窗标题Header Secondary#b5bac1弱化标题Text Normal#dbdee1暗色正文比纯白略冷Text Muted#949ba4时间戳、服务器名、次要元数据Text Link#00a8fc消息内超链接天蓝色与 blurple 区分Channels Default#80848e侧栏未激活频道名3.5 状态与语义令牌值语义Status Online#23a55a在线点、成功态Status Idle#f0b232离开点、afkStatus DND#f23f43勿扰同时作为破坏性红色Status Streaming#593695直播中紫色Status Offline#80848e离线灰Mention Highlightrgba(88, 101, 242, 0.1)提及行的柔和 blurple 洗色3.6 边框与分割线令牌值语义Background Modifier Accentrgba(255, 255, 255, 0.06)暗色下的标准分割线Border Subtle#3f4147卡片的实线分割线在 tokens.css 中上述角色统一映射为--bg、--surface、--surface-warm、--fg、--fg-2、--muted、--meta、--border、--border-soft等令牌。据 design-tokens.json 的契约报告该包共 56 个令牌、56 个均有源可查source-backed契约评分为 100评级 excellent。4. 排版规则字重对比优先于颜色对比4.1 字体族正文 / UI / 标题gg sans回退Helvetica Neue, Helvetica, Arial, sans-serif展示旧版 / WhitneyWhitney回退gg sans代码 / 等宽gg mono回退Consolas, Andale Mono, Courier New, Courier, monospace对应 tokens.css 中的--font-display、--font-body、--font-mono。4.2 层级表角色字体尺寸字重行高字距备注Display Herogg sans56px (3.5rem)8001.1-0.02em营销 HeroPage Headinggg sans24px (1.5rem)7001.25normal设置/资料标题Channel Namegg sans16px (1rem)6001.25normal#general频道标题Message Bodygg sans16px (1rem)4001.375normal标准聊天文本Usernamegg sans16px (1rem)5001.25normal消息作者Timestampgg sans12px (0.75rem)5001.25normalToday at 4:32 PMSidebar 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三反引号代码块4.3 三项核心原则友好的几何造型gg sans 以 a/g/s 的圆润末端替代 Whitney品牌在保持可读性的前提下传递温度字重对比而非颜色对比信息层级来自 400→500→600→700→800 的字重阶梯表面保持中性正文 16px 底线聊天消息不得小于 16px密度由行高1.375而非字号来获得。这些原则在 tokens.css 中固化为字号阶梯--text-xs: 12px到--text-4xl: 56px以及--leading-body: 1.375、--leading-tight: 1.10、--tracking-display: -0.02em。组件夹具 components.html 中的实现进一步印证h1 采用 56px --tracking-displayh232px行高 1.20h324px行高 1.25.eyebrow使用 12px 小号大写 0.08em 字距。5. 组件样式规范5.1 按钮Buttons变体背景文本内边距圆角悬停主要 Primary#5865f2#ffffff8px 16px4px#4752c4次要 Secondary#4e5058#ffffff8px 16px4px#6d6f78三级/弱化链接式transparent#dbdee1——文本加下划线背景不变破坏性 Danger#da373c#ffffff8px 16px4px#a12d2fPrimary 用于主 CTA、Continue、Join Server 等关键动作。在 components.html 中.btn基类使用--radius-sm、--focus-ring悬停背景切换采用--motion-fast80ms--ease-standard过渡.btn:focus-visible以 3px blurple 半透明光环呈现焦点。5.2 输入框Inputs背景#1e1f22文本#dbdee1边框1px solid#1e1f22圆角4px内边距10px 12px聚焦边框变为#5865f2在 components.html 中.field label采用 600 字重大写 0.04em 字距placeholder 使用--muted聚焦态以 80ms 过渡到--accent。5.3 服务器头像Server Avatars尺寸48×48px圆角默认 16px圆角方形悬停与激活态过渡到 50%正圆激活态图标列左缘出现 4px 白色椭圆条pillcomponents.html 中的.server-icon以 200ms cubic-bezier(0.215, 0.61, 0.355, 1)过渡border-radius悬停时变圆——这正是规范中品牌标识级微动效的实现。5.4 状态点Status Dots尺寸10×10px边框3px solid background-tertiary形成凹槽效果位置头像右下角5.5 卡片 / 嵌入Cards / Embeds背景#2b2d31暗色或#f2f3f5亮色左侧边框4px solid 嵌入强调色圆角4px内边距8px 16px5.6 提及药丸Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3pxcomponents.manifest.json 对组件夹具做了结构化盘点共 38 个选择器、17 个类、21 个元素覆盖 buttons、inputs、cards、links、typography、layout 六类组件组badges、keyboard、icons 组在当前夹具中为缺省并逐组列出其引用的令牌例如 buttons 组引用--accent-hover与--focus-ringcards 组引用--border-soft、--radius-md、--space-6、--surface。这为 Agent 在复用组件前提供了精确的该用什么令牌清单。6. 间距与布局4px 基准网格基准单位4px刻度为 4、8、12、16、20、24、32、40服务器栏72px固定宽频道侧栏240px成员列表240px桌面端聊天列流体布局最小 380pxtokens.css 将刻度固化为--space-1至--space-12并定义了桌面/平板/手机的区块纵向节奏--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px以及--container-max: 1200px与三档容器 gutter24/16/16px。7. 动效规范时长悬停 200ms头像变圆 350ms提示浮现 80ms缓动头像变形使用cubic-bezier(0.215, 0.61, 0.355, 1)先快后稳通知脉冲未读提及指示器 1.4s ease-in-out infinite在令牌层面对应为--motion-fast: 80ms、--motion-base: 200ms与--ease-standard: cubic-bezier(0.2, 0, 0, 1)tokens.css。需要注意的是规范文档中头像变圆的 350ms 与令牌中的 200ms 属于文档描述与实现常量两种表达实际组件夹具 components.html 采用 200ms 文档指定的缓动曲线。8. 使用约束Usage Guardrails规范明确列出三条红线防止形似神不似的误用保持暗色外壳、紧凑密度与 blurple 动作层级三者共存在亮色营销布局中单独使用 blurple 会破坏 Discord 产品感导航密集的表面应围绕栏、侧栏与聊天列组织而非孤立的装饰性卡片表现人、服务器或在线状态时使用圆角方形头像与状态点的语言。USAGE.md 进一步给出 Do/Avoid 清单严格保留 schema 令牌名以保证跨品牌切换可靠用--accent承担主操作、链接、焦点态与唯一焦点元素避免在:root令牌块之外使用裸十六进制值避免脱离tokens.css另行定义 Tailwind 或设计令牌值避免声称持有上游原始来源证据。此外manifest.json 的 craft 字段建议在应用该包时配合仓库 craft/color.md 与 craft/accessibility-baseline.md 两份工艺准则做合规检查。9. 从规范到代码如何在 Open Design 中落地这套暗色设计系统按 USAGE.md 的推荐阅读顺序实际落地路径如下读取本文档系先读USAGE.md理解包契约再读DESIGN.md或对应语言的DESIGN-*.md掌握视觉意图与反模式注入令牌将 tokens.css 粘贴到产物第一个style块中再编写组件 CSS所有值一律引用:root中的 CSS 变量复用组件用 components.manifest.json 做组件盘点需要精确选择器或状态时打开 components.html 对照视觉校验需要时打开 preview/colors.html、preview/typography.html、preview/spacing.html 做人工确认Tailwind v4 场景若使用 Tailwindtailwind-v4.css 通过theme块将全部令牌映射为--color-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*等实用类变量例如bg-bg、text-fg-2、bg-accent、rounded-md该文件是派生产物规范要求以tokens.css为唯一事实源审计与溯源design-tokens.json与source/token-contract.report.json将每个令牌绑定回tokens.css的具体声明行如--bg溯源至tokens.css:32可用于自动化校验与跨品牌切换的一致性检查。这套规范文档 → CSS 令牌 → 组件夹具 → 派生产物 → 审计报告的分层结构使得 Discord 风格的暗色界面不仅是一份设计说明而是一套可由 Agent 直接消费、可校验、可跨品牌复用的工程资产。【免费下载链接】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），仅供参考