用 OpenDesign 复刻 Discord 设计语言Blurple 暗色优先设计系统的 Tokens、排版与组件实战【免费下载链接】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 仓库中 design-systems/discord 设计系统包为蓝本系统拆解 Discord 风格设计语言的完整实现从三段式暗色深度、单一饱和色 Blurple 的克制用法到 gg sans 字族与重量对比排版层级再到按钮、输入框、服务器头像、状态点等组件的精确样式参数。读完本文你将掌握如何把整套规范落地为可复用的 CSS 变量令牌tokens并了解 tokens.css 与 components.html 之间的绑定关系可直接用于在 OpenDesign 中生成 Discord 气质的原型、落地页与仪表盘。说明本仓库中的设计系统文档提供英文DESIGN.md、土耳其语DESIGN-tr.md等多语言版本内容实质一致本文以DESIGN-tr.md为骨架展开。1. 视觉主题为“晚间、突袭与群语音”而生的暗色优先界面Discord 的产品场景是晚间、游戏突袭和群组语音通话因此整套界面以暗色优先dark-first。默认画布是深邃的Background Primary#313338暗色主题聊天列在其上叠加稍亮或稍暗的层次用于区分频道、话题与侧边面板。这个「三层深度阶梯」正是 Discord 界面能被一眼认出的根本原因最深#1e1f22Background Tertiary——服务器列表轨道次深#2b2d31Background Secondary——频道侧边栏、设置侧边栏基准#313338Background Primary——聊天表面、消息列标志性的Blurple#5865f2被严格保留给品牌标识、主要行动号召CTA、提及和「你自己」的提示you affordance在克制的暗色中性面上少量使用反而更加醒目。形状语言是「圆润但不至于像气球一样软」卡片 8px 圆角、输入框 4px、状态徽章与标签使用完整胶囊形服务器是 48px 的圆角方形头像hover 时变形为圆形。排版上正文与界面全部使用gg sansDiscord 自有的 Whitney 替代字体聊天行距紧凑消息组之间 4–8px保证数小时的滚动回溯依然易于扫读。关键特征速览原文档 §1暗色优先表面#1e1f22/#2b2d31/#313338三段深度Blurple#5865f2是聊天表面唯一的饱和强调色全部文本使用 gg sansWhitney 风格——友好、几何、中性16px 圆角的圆角方形服务器头像hover 时吸附为圆形紧凑的聊天行距 宽裕的侧边面板内边距状态点在线绿、空闲黄、勿扰红、离线灰低 alpha 的 1px 像素对齐分隔线偏冷白2. 颜色面板与角色每个色值背后的语义分工原文档§2给出了完整的色板下面按语义角色分组整理并标注了每个色值在界面中的实际职责。主色Primary令牌名色值用途Blurple#5865f2品牌主色、主要 CTA、提及高亮Blurple Hover#4752c4Blurple 的 hover/active 状态Blurple Soft#7289da旧版 blurple营销场景的次要强调表面暗色主题——默认令牌名色值用途Background Tertiary#1e1f22服务器列表轨道最深的背景Background Secondary#2b2d31频道侧边栏、设置侧边栏Background Primary#313338聊天表面、消息列Background Floating#111214浮动弹层、工具提示、自动补全Background Modifier Hoverrgba(78, 80, 88, 0.3)行上的 hover 覆盖层Background Modifier Selectedrgba(78, 80, 88, 0.6)当前激活行表面亮色主题令牌名色值用途Light Bg Primary#ffffff亮色主题下的聊天表面Light Bg Secondary#f2f3f5亮色主题下的侧边栏Light Bg Tertiary#e3e5e8最深的亮色表面文本Text令牌名色值用途Header Primary#f2f3f5暗色主题下频道标题、弹窗标题Header Secondary#b5bac1弱化的标题Text Normal#dbdee1暗色主题正文——比纯白略冷Text Muted#949ba4时间戳、服务器名、次级元数据Text Link#00a8fc消息内超链接——天空蓝与 blurple 区分Channels Default#80848e侧边栏中未激活的频道名状态与语义Status Semantic令牌名色值用途Status Online#23a55a在线点、成功状态Status Idle#f0b232空闲点、离开状态Status DND#f23f43勿扰同时充当破坏性红色Status Streaming#593695“正在直播”紫色Status Offline#80848e离线灰Mention Highlightrgba(88, 101, 242, 0.1)提及行上的柔和 blurple 晕染边框与分隔线令牌名色值用途Background Modifier Accentrgba(255, 255, 255, 0.06)暗色模式的标准分隔线Border Subtle#3f4147卡片的实色分隔线源码侧的令牌落地打开 tokens.css可以看到上述角色被一一映射为结构化 CSS 变量--bg: #313338、--surface: #2b2d31、--surface-warm: #1e1f22、--fg: #dbdee1、--fg-2: #f2f3f5、--muted: #949ba4、--meta: #80848e、--accent: #5865f2、--accent-hover: #4752c4等。值得注意的两个实现细节激活态强调色使用现代 CSS 颜色函数--accent-active: color-mix(in oklab, var(--accent), black 14%)无需手写第二个色值即可派生出按压态语义色直接复用状态点色板--success: #23a55a、--warn: #f0b232、--danger: #f23f43即「勿扰红同时承担破坏性红色」在令牌层的一一对应。令牌契约方面design-tokens.json 记录了 56 个令牌的声明与引用统计declaredTokens 56、sourceBackedTokens 56、总分 100、评级 excellent每个令牌都标注了它在tokens.css中的声明行号source/token-contract.report.json 则把每个 TOKEN_SCHEMA 绑定映射回提交的样式表声明行是审计与回填的证据链。3. 排版规则重量对比优先于颜色对比Discord 的字族策略非常明确原文档 §3正文 / 界面 / 标题gg sans回退Helvetica Neue, Helvetica, Arial, sans-serif展示旧 / WhitneyWhitney回退gg sans代码 / 等宽gg mono回退Consolas, Andale Mono, Courier New, Courier, monospace层级表Hierarchy角色字体字号字重行高字距备注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三反引号块三条排版原则友好的几何gg sans 在 a/g/s 上以圆角终端替代 Whitney——品牌要的是不破坏可读性的温暖感重量对比而非颜色对比层级来自 400→500→600→700→800 的字重台阶表面保持中性16px 正文底线聊天消息绝不小于 16px密度来自行高1.375而非缩小字号。在 tokens.css 中这套字号被展开为--text-xs: 12px时间戳/说明、--text-sm: 14px、--text-base: 16px消息正文永不小于此、--text-2xl: 24px页面标题、--text-4xl: 56px展示 hero并配套--leading-body: 1.375、--leading-tight: 1.10、--tracking-display: -0.02em56px 展示级压缩字距。tailwind-v4.css 再将这些变量通过theme块桥接为 Tailwind v4 的--font-*、--text-*、--leading-*、--tracking-*命名空间方便在组件里直接使用工具类。4. 组件样式规格可直接照抄的参数原文档§4给出了每个核心组件的精确参数这里完整保留并补充说明。按钮Buttons主要按钮Primary背景#5865f2文本#ffffff内边距8px 16px圆角4pxHover#4752c4用途主要 CTA、“继续Continue”、“加入服务器Join Server”次要按钮Secondary背景#4e5058文本#ffffff内边距8px 16px圆角4pxHover#6d6f78三级 / 细腻链接风格背景transparent文本#dbdee1Hover文本加下划线背景不变危险按钮Danger背景#da373c文本#ffffffHover#a12d2f输入框Inputs背景#1e1f22文本#dbdee1边框1px solid#1e1f22圆角4px内边距10px 12px聚焦态边框变为#5865f2服务器头像Server Avatars尺寸48×48px圆角默认 16px圆角方形hover 与激活态过渡到 50%激活态图标列左边缘显示 4px 白色胶囊指示条状态点Status Dots尺寸10×10px边框3px solid background-tertiary制造“缺口”效果位置头像右下角卡片 / 嵌入内容Cards / Embeds背景#2b2d31暗色或#f2f3f5亮色左边框4px solid 嵌入内容强调色圆角4px内边距8px 16px提及胶囊Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3px组件清单的机器可读版本components.manifest.json 将上述组件抽象成带id、label、selectors、classes、tokenReferences的分组清单buttons、inputs、cards、links、typography、layout 六个组 presentbadges、keyboard、icons 三个组 present:false并统计了tokens.css中 56 个令牌的 declared/referenced/unused 状态与 38 个选择器。它同时记录了整份 fixture 的规模styleBlockCount: 1、selectorCount: 38、classCount: 17、elementCount: 21。实际的选择器与样式实现可直接对照 components.html 查看。5. 间距与布局4px 基准网格与三段式列结构原文档§5定义的布局骨架基准单位4px。刻度4、8、12、16、20、24、32、40服务器轨道72px 宽固定频道侧边栏240px 宽成员列表桌面端 240px 宽聊天列流式最小 380px在令牌层4px 网格被完整落到--space-1到--space-124/8/12/16/20/24/32/40px容器约束为--container-max: 1200px栅格随断点切换--container-gutter-desktop: 24px/--container-gutter-tablet: 16px/--container-gutter-phone: 16px区块节奏--section-y-desktop: 80px/--section-y-tablet: 48px/--section-y-phone: 32px在 components.html 的section规则里直接消费。此外tokens.css 还提供了圆角族--radius-sm: 4px按钮/输入框、--radius-md: 8px卡片、--radius-lg: 16px头像、--radius-pill: 9999px胶囊与阴影族--elev-flat、--elev-ring、--elev-raised、--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3)其中暗色界面的“抬升感”优先用半透明白色描边而非投影来表达。6. 动效规范短促、干脆、可感知原文档§6的动效节奏时长hover 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 第 116–118 行并在 tailwind-v4.css 中映射为--duration-fast、--duration-base、--ease-standard。注意原文档给出的头像变形专用缓动cubic-bezier(0.215, 0.61, 0.355, 1)与令牌层的标准缓动cubic-bezier(0.2, 0, 0, 1)并不相同——前者用于单一场合的「吸附感」变形后者是全局默认使用时请按场景区分。7. 使用护栏Usage Guardrails原文档§7给出了三条硬性约束避免产出“形似神不似”的 Discord 界面必须整体保持暗色外壳 紧凑密度 blurple 行动层级这三件套在亮色营销风格布局里用 blurple会破坏 Discord 的产品感导航密集型表面应围绕轨道rails、侧边栏与聊天列来组织而不是散落的装饰卡片表现人、服务器或在线状态时坚持使用圆角方形头像 状态点的语言。USAGE.md 进一步规定了包级使用契约先读本文件理解包契约再读DESIGN.md理解视觉意图与反模式然后把 tokens.css 粘贴进首个产物的style块后再写组件 CSS用 components.manifest.json 作为组件清单必要时打开 components.html 核对精确选择器。它同时提醒避免在复制的:root令牌块之外使用裸色值避免绕过tokens.css独立重定义 Tailwind 或设计令牌且不要宣称存在上游原始来源证据——本包基于仓库内置的精选 fixture 回填见 source/evidence.md。8. 落地路径从规范到可用界面的文件地图在 OpenDesign 中复刻 Discord 风格推荐按以下顺序使用仓库内资源阅读规范DESIGN.md含DESIGN-tr.md等多语言版本定义视觉意图与反模式复制令牌把 tokens.css 的:root块粘贴为产物第一个style的基底核对组件用 components.manifest.json 快速盘点用 components.html 查看精确选择器与状态预览校验打开preview/下的 colors.html、typography.html、spacing.html 做视觉抽检派生输出若需要 Tailwind v4 环境使用 tailwind-v4.css令牌契约与来源回溯分别见 design-tokens.json 与 source/token-contract.report.json。这套「规范文档 令牌样式表 组件清单 预览页」的包结构正是 OpenDesign 设计系统体系的标准形态Discord 包可以作为暗色优先、强调色克制的聊天/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），仅供参考