OpenDesign Discord 设计系统指南Blurple 暗色优先界面从设计令牌到组件实现【免费下载链接】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导读本文基于 OpenDesign 仓库中的 Discord 设计系统包design-systems/discord整理而成。作为生产力与 SaaS类别的代表包它完整记录了 Discord 风格的视觉语言——三层递进的暗色表面、克制的 Blurple#5865f2强调色、gg sans 排版体系以及 48px 圆角方形服务器头像等标志性组件。读完本文你将掌握这套系统的完整设计令牌design tokens映射、组件样式规格并能在自己的 Agent 产物或前端项目中通过粘贴tokens.css或引用tailwind-v4.css直接落地实现。1. 视觉主题与氛围Discord 的产品面向夜间游戏、突袭raid和群组语音场景设计因此整个界面是**暗色优先dark-first**的。默认画布采用深色Background Primary#313338并通过更亮或更暗的相邻色阶来区分频道、线程和侧边面板。签名式的Blurple#5865f2只保留给品牌标识、主要 CTA、提及mention和我的 affordance 上在克制的灰色中性色之上少量使用反而更加突出。排版上正文与界面 UI 统一使用gg sansDiscord 自有的 Whitney 替代字体其圆润的几何形态在聊天客户端所需的小字号下依然亲切、可读。标题逐级放大聊天行间距紧凑消息组之间 4–8px保证数小时的滚动记录也能快速扫读。形态语言是圆润但不气球化的卡片 8px 圆角、输入框 4px 圆角、状态徽章与标签用全圆角pill形状。服务器图标是 48px 的圆角方形头像悬停时变形为圆形——这一微小动效已成为品牌标识的一部分。核心特征暗色优先表面#1e1f22/#2b2d31/#313338三级深度Blurple#5865f2是聊天表面唯一的饱和强调色全文本使用 gg sansWhitney 风格——友好、几何、中性圆角方形服务器头像16px 圆角悬停时吸附变形为圆形紧凑的聊天行间距宽松的侧边面板留白状态点绿色在线、黄色离开、红色勿扰、灰色离线低透明度、像素对齐的 1px 细线分割线2. 颜色调色板与角色2.1 主色PrimaryBlurple#5865f2品牌主色、主要 CTA、提及高亮。Blurple Hover#4752c4Blurple 的悬停/激活态。Blurple Soft#7289da遗留 Blurple营销辅助强调色。2.2 表面色Surface暗色主题——默认角色色值用途Background Tertiary#1e1f22服务器列表轨道rail、最深背景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)激活行2.3 表面色亮色主题Light Bg Primary#ffffff亮色主题的聊天表面。Light Bg Secondary#f2f3f5亮色主题的侧边栏。Light Bg Tertiary#e3e5e8最深的亮色表面。2.4 文本色Header Primary#f2f3f5暗色主题下的频道头部、弹窗标题。Header Secondary#b5bac1弱化头部。Text Normal#dbdee1暗色主题正文——比纯白略冷。Text Muted#949ba4时间戳、服务器名、次要元数据。Text Link#00a8fc消息内的超链接——天蓝色与 Blurple 区分。Channels Default#80848e侧边栏中未激活的频道名。2.5 状态与语义色Status Online#23a55a在线点成功状态。Status Idle#f0b232离开点缺席。Status DND#f23f43勿扰同时作为破坏性红色。Status Streaming#593695直播中紫色。Status Offline#80848e离线灰。Mention Highlightrgba(88, 101, 242, 0.1)提及行的柔和 Blurple 底色。2.6 边框与分割线Background Modifier Accentrgba(255, 255, 255, 0.06)暗色主题标准分割线。Border Subtle#3f4147卡片的实色分割线。2.7 令牌映射从 DESIGN 角色到 tokens.css上述设计角色在 tokens.css 中被绑定为结构化的语义令牌这是该包在代码层面的唯一事实源。对应关系如下设计角色令牌值Background Primary--bg#313338Background Secondary--surface#2b2d31Background Tertiary--surface-warm#1e1f22Text Normal--fg#dbdee1Header Primary--fg-2#f2f3f5Text Muted--muted#949ba4Channels Default--meta#80848e标准分割线--borderrgba(255,255,255,0.06)卡片实线--border-soft#3f4147Blurple--accent#5865f2Blurple Hover--accent-hover#4752c4在线/离开/勿扰--success/--warn/--danger#23a55a/#f0b232/#f23f43值得注意的实现细节--accent-active使用color-mix(in oklab, var(--accent), black 14%)生成激活态即从令牌派生状态色而不是硬编码第二个十六进制值暗色表面的层级信号依赖--elev-ring0 0 0 1px var(--border)这类半透明白色描边而非投影。--focus-ring0 0 0 3px rgba(88, 101, 242, 0.3)定义了全站统一的键盘焦点环。3. 排版规则3.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其中--font-display与--font-body在 Discord 包中指向同一字体栈。3.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三反引号代码块对应的令牌体系见 tokens.css 中的字号刻度--text-xs: 12px时间戳/说明、--text-sm: 14px、--text-base: 16px消息正文绝不小于 16px、--text-lg: 18px、--text-xl: 20px、--text-2xl: 24px页面标题、--text-3xl: 32px章节标题、--text-4xl: 56px展示 Hero。行高令牌为--leading-body: 1.375、--leading-tight: 1.10展示字距为--tracking-display: -0.02em。3.3 原则友好几何gg sans 在 a/g/s 上以圆润终端替代 Whitney——品牌在保持可读性的同时追求温暖感。字重对比优于颜色对比层级通过 400→500→600→700→800 的字重阶梯表达表面保持中性。16px 正文聊天消息不缩至 16px 以下密度由行高1.375而非字号调节。4. 组件样式4.1 按钮主按钮Primary背景#5865f2文本#ffffff内边距8px 16px圆角4px悬停#4752c4用途主要 CTA、继续、加入服务器次按钮Secondary背景#4e5058文本#ffffff内边距8px 16px圆角4px悬停#6d6f78三级 / 低调链接样式背景transparent文本#dbdee1悬停文本下划线背景不变危险Danger背景#da373c文本#ffffff悬停#a12d2f在 components.html 中按钮基类.btn使用--radius-sm4px、--motion-fast80ms与--ease-standard做背景过渡:focus-visible应用--focus-ring.btn-primary/.btn-secondary/.btn-danger分别绑定上述令牌。这些选择器、类名与令牌引用被机器化地索引在 components.manifest.json 的buttons组件组中。4.2 输入框背景#1e1f22文本#dbdee1边框1px solid#1e1f22圆角4px内边距10px 12px聚焦边框变#5865f2实现上components.html 的.field组标签采用--text-sm、600 字重、大写并带 0.04em 字距输入框背景绑定--surface-warmplaceholder 使用--muted聚焦边框切换为--accent过渡时长--motion-fast。4.3 服务器头像尺寸48×48px圆角默认 16px圆角方形悬停与激活时过渡到 50%激活态图标列左边缘显示 4px 白色胶囊条在 components.html 中.server-icon的圆角过渡为border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1)200ms:hover置为 50%。--motion-base: 200ms与头像变形缓动曲线均定义在tokens.css的 Motion 区段。4.4 状态点尺寸10×10px边框3px solid background-tertiary制造缺口效果位置头像右下角4.5 卡片 / 嵌入背景#2b2d31暗色或#f2f3f5亮色左边框4px solid 嵌入强调色圆角4px内边距8px 16px在组件夹具中.card具体化为背景--surface、边框1px solid var(--border-soft)、圆角--radius-md8px、内边距--space-624px。4.6 提及胶囊Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3px.mention在 components.html 中直接实现500 字重行内显示。5. 间距与布局基准单位4px。刻度4, 8, 12, 16, 20, 24, 32, 40服务器轨道rail宽 72px固定频道侧边栏宽 240px成员列表桌面端宽 240px聊天列弹性最小 380px令牌化后在tokens.css中对应--space-14px至--space-1240px以及--container-max: 1200px、桌面/平板/手机三种容器内边距24px / 16px / 16px。components.html用.stack-3/.stack-4--space-3/--space-4的margin-block-start表达垂直节奏.hero-grid用--space-12间距、.features-grid用--space-4间距且都有平板、手机断点回退。6. 动效时长悬停 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)。注意DESIGN 文档中头像变形专用的cubic-bezier(0.215, 0.61, 0.355, 1)在components.html中作为该组件的内联缓动使用而--ease-standard是系统级默认缓动。7. 使用护栏保持暗色外壳、紧凑密度与 Blurple 操作层级三者同时成立在明亮营销风格布局中使用 Blurple 会破坏 Discord 产品感。导航密集的表面应以轨道、侧边栏、聊天列为核心组织而不是孤立的装饰性卡片。表达人、服务器或活跃在线状态时使用圆角方形头像与状态点语言。8. 在 OpenDesign 中消费该设计系统包8.1 包的机器可读结构根据 design-systems/README.md每个捆绑包都包含manifest.json、DESIGN.md与tokens.css三个必需文件Discord 包额外提供USAGE.md、components.html、components.manifest.json、design-tokens.json、tailwind-v4.css、preview/与source/等富文件。其 manifest.json 声明了id: discord、类别Productivity SaaS、files清单与三个预览页preview/colors.html、preview/typography.html、preview/spacing.html并记录来源为 OpenDesign curated bundled fixturesource/evidence.md 也明确说明本包基于策展的捆绑夹具并非对上游品牌站点的全新抓取。8.2 Agent 的推荐阅读顺序按 USAGE.md 的建议先读USAGE.md理解包契约再读DESIGN.md把握视觉意图、约束与反模式在写任何组件 CSS 之前先把tokens.css的:root令牌块粘贴到产物第一个style块中用components.manifest.json获取精简组件清单需要精确选择器或状态时打开components.html需要视觉核对时查看preview/页面。Do保持 schema 令牌名完全一致以保证跨品牌切换可靠用--accent表达主操作、链接与焦点态优先复用components.manifest.json中的组件组而非自创新控件。Avoid不要在复制的:root令牌块之外使用裸十六进制值不要脱离tokens.css自行重定义 Tailwind 或 design-token 值不要声称包含上游原始来源证据本包基于策展捆绑夹具不要添加components.html或DESIGN.md中不存在的组件配方。8.3 两种落地方式方式一纯 CSS 令牌。直接使用 tokens.css。该文件全部 59 个声明令牌与 38 个选择器、17 个类、21 个元素的引用关系被审计在 components.manifest.json 中declared列出全部声明令牌referenced列出实际被组件引用的令牌unusedDeclared标出尚未被引用的令牌如--danger、--elev-*、--radius-pill等undeclaredReferenced为空——说明夹具中不存在未声明却被引用的游离值令牌契约闭合。方式二Tailwind v4 映射。tailwind-v4.css 是派生文件其头部明确写着 Derived from tokens.css. Keep tokens.css as the source of truth.——它通过import ./tokens.css继承令牌并在theme块中将--bg、--surface、--accent、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-*等映射为 Tailwind 工具类可直接消费的命名空间如bg-bg、text-muted、rounded-md、shadow-raised、duration-fast。同样design-tokens.json 也是派生产物二者都应从tokens.css与令牌契约报告重新生成而非手工编辑。8.4 与本仓库其他设计系统的关系OpenDesign 仓库在 design-systems 目录下维护了 150 个设计系统包。Discord 包与本仓库的craft绑定manifest.json 中craft.suggested建议配套阅读 color 与 accessibility-baseline 两条规范、docs/design-systems.md中的包质量守则至少七个实质 H2 小节共同构成了设计即代码的完整闭环。当你需要在一个暗色优先、密度高、强调色克制的社区/协作类产品中使用这套语言时Discord 包就是可直接参考的样板。9. 小结Discord 设计系统的精髓可以浓缩为三句话暗色优先——用#1e1f22/#2b2d31/#313338三级亮度阶梯表达深度用低透明度 1px 细线替代投影字重驱动层级——400→800 的字重阶梯配合永不小于 16px 的正文密度来自行高而非字号克制的 Blurple——#5865f2只服务于品牌、CTA、提及与我在灰调表面上一击即中。这套语言在 OpenDesign 中已完整令牌化tokens.css、组件化components.html并审计闭环components.manifest.json无论你是写 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），仅供参考