OpenDesign 中的 Discord 风格设计系统Blurple 深色界面规范与语义 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本文以仓库内 design-systems/discord/DESIGN-de.md 设计规范为骨架结合 tokens.css、components.html 与 manifest.json 的源码级实现还原 Discord 式「深色优先 Blurple 单一饱和强调色」的完整设计语言。导读OpenDesign 仓库将每个设计系统打包为可移植的独立包见 design-systems/README.mddiscord是其中收录的 151 个设计系统包之一面向「生产力与 SaaS」类产品的 UI 生成。本文从 DESIGN-de.md 的设计规范出发逐层拆解 Discord 风格的视觉主题、色彩角色、排版层级、组件样式、间距与动画规则并对照同目录下的tokens.css语义 Token 与components.html组件夹具说明这套规范如何在真实项目中落地。读完本文你将掌握一套可复制的深色聊天类界面设计配方从「3 级明度纵深」到「权重对比替代颜色对比」的排版哲学再到 Blurple 强调色的克制使用原则。1. 包结构与阅读顺序一个设计系统包由什么组成在设计系统仓库中每个子目录即一个便携式设计系统包。discord包的机器可读形状遵循统一约定manifest.json声明了包的元数据、来源与文件清单{ schemaVersion: od-design-system-project/v1, id: discord, name: Discord, category: Productivity SaaS, files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, usage: USAGE.md, componentsManifest: components.manifest.json, importMode: normalized }DESIGN.md含多语言版本如本主题对应的DESIGN-de.md是面向 Agent 的规范散文主体tokens.css是编译后的语义 Token 样式表唯一事实来源components.html是独立组件夹具components.manifest.json是从中派生的组件/Token 索引USAGE.md规定了 Agent 的阅读顺序与使用边界详见 USAGE.md。USAGE.md 给出的推荐阅读顺序是先读USAGE.md理解包契约 → 再读DESIGN.md理解视觉意图与约束 → 将tokens.css粘贴进产物第一个style块 → 需要精确选择器或状态时打开components.html→ 需要视觉校验时查看preview/页面。2. 视觉主题与氛围深色优先的三级纵深Discord 的产品面向晚间、开黑与群组语音场景因此整套界面深色优先。规范定义的默认画布是深色Background Primary#1e1f22深色设计聊天列则在此基础上通过更亮或更暗的色阶进行分层用以区分频道、线程与侧边面板。三个关键识别特征深色表面#1e1f22/#2b2d31/#313338三级深度阶梯由深到浅Blurple#5865f2是聊天界面上唯一饱和的强调色gg sansWhitney 的替代字体用于全部文字友好、几何、中性。形态语言「圆润但不气球化」卡片 8px 圆角、输入框 4px、状态徽章与标签用全胶囊。服务器以 48px 的圆角方形头像呈现hover 时变为圆形——这一微动效已成为品牌身份的一部分。聊天行距紧凑消息组间 4–8px保证长时间向上滚动浏览的清晰度侧边面板则保留宽松的内边距。分隔线采用低 Alpha 的像素级 1px 线条。说明规范为德文版DESIGN-de.md与英文版 DESIGN.md 内容一致色值、字号等参数均相同。3. 色彩调色板与角色3.1 主色Primär角色色值用途Blurple#5865f2品牌主色、主要 CTA、提及Mention高亮Blurple Hover#4752c4Blurple 的 hover/激活态Blurple Soft#7289da旧版 Blurple营销场景的次级强调色3.2 表面色深色设计 — 默认角色色值用途Background Tertiary#1e1f22服务器列表栏最深的背景Background Secondary#2b2d31频道侧边栏、设置侧边栏Background Primary#313338聊天表面、消息列Background Floating#111214浮动 Popover、Tooltip、自动补全Background Modifier Hoverrgba(78, 80, 88, 0.3)行级 hover 叠加层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离开点、Away 状态Status 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卡片的实色分隔线3.7 Token 落地对照上述角色在 tokens.css 中全部有语义化映射Agent 在实现时应直接引用 Token 而非裸色值。核心映射:root { --bg: #313338; /* 聊天表面 / 主深色 */ --surface: #2b2d31; /* 频道侧边栏、设置侧边栏 */ --surface-warm: #1e1f22; /* 服务器列表栏 — 最深一层 */ --fg: #dbdee1; /* text-normal */ --fg-2: #f2f3f5; /* header-primary */ --muted: #949ba4; /* text-muted */ --meta: #80848e; /* channels-default */ --border: rgba(255, 255, 255, 0.06); --border-soft: #3f4147; --accent: #5865f2; /* Blurple */ --accent-on: #ffffff; --accent-hover: #4752c4; --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #23a55a; --warn: #f0b232; --danger: #f23f43; }值得注意的实现细节--accent-active使用 CSScolor-mix(in oklab, ...)动态计算按下态而不是硬编码一个新色值——保持激活态与主题色自动联动。语义色直接复用状态色成功在线绿、警告离开黄、危险免打扰红。4. 排版规则4.1 字体族Body / UI / Headingsgg sans回退Helvetica Neue, Helvetica, Arial, sans-serifDisplay旧版 / WhitneyWhitney回退gg sansCode / Monogg mono回退Consolas, Andale Mono, Courier New, Courier, monospace4.2 层级表角色字体字号字重行高字距备注Display Herogg sans56px (3.5rem)8001.1-0.02em营销 Hero页面标题gg sans24px (1.5rem)7001.25normal设置/资料页标题频道名gg sans16px (1rem)6001.25normal#general、频道头消息正文gg sans16px (1rem)4001.375normal标准聊天文本用户名gg sans16px (1rem)5001.25normal消息作者时间戳gg sans12px (0.75rem)5001.25normal「今天 16:32」侧边栏频道gg sans16px (1rem)5001.25normal频道列表行服务器名gg sans16px (1rem)6001.25normal服务器头说明 / 元信息gg sans12px (0.75rem)4001.30.02em状态文本、已编辑标记行内代码gg mono0.875em400inheritnormal行内code代码块gg 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-base: 16px并注释「message body — never below 16px」--tracking-display: -0.02em对应 56px Hero 的字距压缩--leading-body: 1.375对应正文行高。components.html 中h1直接消费--text-4xl与--tracking-displayh2/h3分别按 1.20/1.25 行高覆盖共享值——这正是「标题渐进放大」的夹具级实现。5. 组件样式5.1 按钮类型背景文本内边距圆角Hover主按钮#5865f2#ffffff8px 16px4px#4752c4次按钮#4e5058#ffffff8px 16px4px#6d6f78三级/弱化链接式transparent#dbdee1——文字加下划线无背景变化破坏性#da373c#ffffff——#a12d2f主按钮用于主要 CTA「继续」「加入服务器」。在components.html中.btn基类使用--radius-sm4px、--text-base、字重 500transition: background-color var(--motion-fast) var(--ease-standard).btn:focus-visible使用--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3)的 Blurple 焦点环——键盘可达性的标准实现。5.2 输入框背景#1e1f22文本#dbdee1边框1px solid#1e1f22圆角4px内边距10px 12px聚焦边框变为#5865f2夹具中.field input的背景与边框均引用--surface-warm即#1e1f22聚焦态border-color: var(--accent)。标签采用大写 0.04em 字距 字重 600 的「eyebrow」风格。5.3 服务器头像尺寸48×48px圆角默认 16px圆角方形hover 与激活态过渡到 50%圆形激活态图标列左缘出现 4px 白色胶囊指示条components.html中.server-icon的圆角变换动画使用transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1)对应规范中「350ms 圆形变换 快速进入后回弹」的缓动曲线。服务器栏.server-rail背景为--surface-warm即最深一级的表面。5.4 状态点尺寸10×10px边框3px solid background-tertiary产生「内切」效果位置头像右下角5.5 卡片 / 嵌入Embed背景#2b2d31深色或#f2f3f5亮色左边框4px solid 嵌入强调色圆角4px内边距8px 16px夹具中.card使用--surface背景、--border-soft边框、--radius-md8px圆角与--space-624px内边距与规范卡片规格一致。5.6 提及药丸Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3px夹具中.mention即为上述规格配合行级--accent微光rgba(88,101,242,0.1)构成完整的 提及反馈体系。6. 间距与布局基准单位4px刻度 4、8、12、16、20、24、32、40服务器栏72px 宽固定频道侧边栏240px 宽成员列表桌面端 240px 宽聊天列fluid最小 380pxtokens.css将 4px 基准网格固化为--space-1~--space-124/8/12/16/20/24/32/40px并提供--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px的章节节奏变量以及--container-max: 1200px与三档--container-gutter-*桌面 24 / 平板 16 / 手机 16px。夹具中section section使用1px solid var(--border)分隔对应规范「像素级 1px 分隔线」。7. 动画时长hover 200ms头像圆形变换 350msTooltip 淡入 80ms缓动头像变换cubic-bezier(0.215, 0.61, 0.355, 1)快速进入后回弹稳定通知脉冲未读提及指示器 1.4s ease-in-out infiniteToken 层面对应--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。注意夹具中按钮过渡用的是--motion-fast80ms而服务器头像形态变换用--motion-base200ms配合专用缓动曲线动效时长与「轻重」直接挂钩。8. 使用指南Guardrails整体保持深色外壳、紧凑密度与 Blurple 行动层级必须一起保留在亮色营销型布局上单独使用 Blurple 会破坏 Discord 产品感结构优先导航密集的界面应以栏、侧边栏与聊天列组织而非孤立的装饰性卡片图形语言表示人物、服务器或在线状态时使用圆角方形头像与状态点的形态语言。USAGE.md 进一步给出 Agent 侧的可执行约束Do应当严格保留 schema Token 名称保证跨品牌切换可靠用--accent承担主操作、链接、焦点态与唯一视觉焦点复用components.manifest.json中的组件组避免自造控件将source/文件视为夹具回填的审计证据。Avoid避免不要在复制的:rootToken 块之外使用裸十六进制色值不要脱离tokens.css单独重定义 Tailwind 或 design-token 值不要声明不存在的新组件配方必须能在components.html或DESIGN.md中找到依据。9. 质量保障与派生产物该包遵循仓库的设计系统质量契约详见 docs/design-systems.md 与 _schema/AGENTS.mdcomponents.manifest.json由components.htmltokens.css派生记录 38 个选择器、17 个类、21 个元素并按 buttons / inputs / cards / typography / layout 等组归类给出各组引用的 Token 清单如 buttons 组引用--accent-hover、--focus-ringdesign-tokens.json由 Token 契约报告派生必须与tokens.css一致tailwind-v4.css由tokens.css派生source/token-contract.report.json将每个 schema Token 绑定回tokens.css的声明行source/evidence.md说明该包源自 OpenDesign 策展夹具而非上游品牌站的实时抓取来源界定清晰。10. 实战落地要点在 OpenDesign 项目中复现 Discord 风格界面时遵循以下最小闭环将 tokens.css 整体复制到产物首个style块后续组件 CSS 一律引用变量用--bg/--surface/--surface-warm构建三栏纵深服务器栏最暗、侧边栏居中、聊天区最亮主 CTA 用--accentBlurplehover 用--accent-hover焦点环用--focus-ring——Blurple 只出现在操作与提及处正文用--text-base16px与--leading-body1.375标题用--text-2xl~--text-4xl加字重阶梯不依赖颜色建立层级头像、状态点、提及药丸、卡片直接复用 components.html 中的选择器与 Token 引用避免硬编码色值需要视觉校验时打开preview/colors.html、preview/typography.html、preview/spacing.html三张预览页比对最终效果。这套「深色三级纵深 单一饱和强调色 权重对比排版 圆角方形头像动效」的组合不仅适用于聊天类产品也可迁移到任何需要「沉浸、专注、导航密集」体验的 SaaS 界面中。【免费下载链接】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），仅供参考