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导读本文基于 design-systems/discord/DESIGN.md及其多语言版本如 design-systems/discord/DESIGN-ar.md展开完整梳理 OpenDesign 仓库中内置的 Discord 设计系统从 dark-first 三层深度的表面体系、节制使用的 Blurple#5865f2强调色到 gg sans 排版阶梯、按钮/输入/头像/提及胶囊等组件配方再到 4px 间距网格与动效时长。文中所有色值、字号、半径均可在仓库的 tokens.css 与 components.html 中找到一一对应的实现读者可据此直接复刻出一套 Discord 味 的聊天/社区类界面或理解 OpenDesign 设计系统目录的结构化契约。一、视觉主题与整体氛围Discord 的产品是为夜晚、多人游戏会话与群体语音而设计的因此整套界面dark-first暗色优先默认画布是深色的Background Primary聊天列叠加在略微更亮或更暗的色层之上用来区分频道、子线程与侧边面板。核心特征一览暗色优先表面#1e1f22/#2b2d31/#313338三级深度递进Blurple#5865f2是聊天界面中唯一饱和的强调色所有文本使用 gg sansWhitney 风格——友好、几何、中性圆角方形服务器头像16px 半径hover 时切换为圆形聊天行距紧凑侧边面板留白慷慨状态点绿色在线、黄色空闲、红色勿扰、灰色离线像素级对齐的 1px 分隔线低透明度微白这些特征在 tokens.css 的文件头注释中被凝练为品牌的 三句话身份暗色优先#1e1f22最深→#2b2d31侧栏→#313338聊天面三级深度阶梯gg sans 承载 400/500/600/700/800 全部字重正文 16px 永不缩小层级靠字重而非颜色对比Blurple 作为唯一饱和强调色仅用于品牌标识、主 CTA、提及与 你 的 affordance。形状语言圆润但不过度圆润——卡片 8px 圆角、输入框 4px、状态徽章与标签使用完整胶囊形。服务器图标是 48px 圆角方形hover 时变为正圆这成为品牌识别的标志性微动效。二、颜色系统与角色分工2.1 主色Primary令牌角色色值用途Blurple#5865f2品牌主色、主 CTA、提及高亮Blurple Hover#4752c4Blurple 的 hover/active 态Blurple Soft#7289da旧版 blurple营销物料中的次要强调色2.2 表面色暗色主题——默认令牌角色色值用途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)当前激活行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 源码中的语义化映射设计文档中的角色色值在 tokens.css 中被映射为跨品牌共享的语义令牌例如--bg: #313338; /* 聊天界面 / 主暗色 */ --surface: #2b2d31; /* 频道侧边栏、设置侧边栏 */ --surface-warm: #1e1f22; /* 服务器列表栏——最深一层 */ --fg: #dbdee1; /* 正文——比纯白略冷 */ --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——品牌主 CTA */ --accent-on: #ffffff; --accent-hover: #4752c4; /* 更暗的 hover */ --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #23a55a; /* 在线绿 */ --warn: #f0b232; /* 空闲黄 */ --danger: #f23f43; /* 勿扰 / 破坏性红 */注意--accent-active采用了现代 CSS 的color-mix(in oklab, ...)在 OKLab 色彩空间中对主色压暗 14%而不是再写一个硬编码色值——这体现了 以 token 派生 token 的维护思路。完整 56 个令牌及其分层归属A1-identity / A1-structure / A2 / B-slot记录在 design-tokens.json 中。三、排版规则3.1 字体族正文 / 界面 / 标题gg sans回退Helvetica Neue, Helvetica, Arial, sans-serif展示旧版 / WhitneyWhitney回退gg sans代码 / 等宽gg mono回退Consolas, Andale Mono, Courier New, Courier, monospace在 tokens.css 中对应为--font-display: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: gg mono, Consolas, Andale Mono, Courier New, Courier, monospace;3.2 层级表Hierarchy角色字体字号字重行高字间距说明Display Herogg sans56px (3.5rem)8001.1-0.02em营销大标题Page 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.25normal今天下午 4:32Sidebar 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 中被折叠为一条字号阶梯type scale--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营销大标题并配套行高与字间距令牌--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.1 按钮变体背景文本内边距圆角hover用途Primary#5865f2#ffffff8px 16px4px#4752c4主 CTA、继续、加入服务器Secondary#4e5058#ffffff8px 16px4px#6d6f78次级操作Tertiary / 链接式transparent#dbdee1——文本下划线背景不变弱化操作Danger#da373c#ffffff——#a12d2f破坏性操作在 components.html 组件夹具中按钮样式直接消费 token.btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: #4e5058; color: #ffffff; } .btn-secondary:hover { background: #6d6f78; } .btn-danger { background: #da373c; color: #ffffff; }其中.btn:focus-visible使用--focus-ring0 0 0 3px rgba(88, 101, 242, 0.3)呈现 Blurple 色调的焦点环保证键盘可达性的同时延续品牌色。4.2 输入框背景#1e1f22文本#dbdee1边框1px solid#1e1f22圆角4px内边距10px 12px聚焦边框#5865f2组件夹具中对应.field input系列选择器且::placeholder使用var(--muted)、聚焦边框使用var(--accent)见 components.manifest.json 中 inputs 组的 tokenReferences。4.3 服务器头像尺寸48×48px圆角默认 16px圆角方形hover 与激活时过渡到 50%激活态图标列左缘一条 4px 白色胶囊指示条组件夹具中实现为.server-icon默认border-radius16px对应--radius-lg与.server-icon:hover { border-radius: 50%; }。4.4 状态点尺寸10×10px边框3px solid background-tertiary形成 缺口 效果位置头像右下角4.5 卡片 / 嵌入Embeds背景#2b2d31暗色或#f2f3f5浅色左边框4px solid 嵌入强调色圆角4px内边距8px 16px4.6 提及胶囊Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3px4.7 组件夹具的完整性验证components.manifest.json 是对components.html的可重建缓存其中记录1 个 style 块、38 个选择器、17 个类、21 个元素组件分组中buttons、inputs、cards、links、typography、layout均 presentbadges、keyboard、icons缺席代表该夹具未覆盖这些组件。它同时审计了 token 的 declared / referenced / unused 关系——例如--accent-active、--danger、--elev-*、--font-mono等被声明但未被该夹具引用而 referenced 集合中没有出现任何 undeclared token说明组件样式全部收敛在令牌体系之内。五、间距与布局基准单位4px。阶梯4、8、12、16、20、24、32、40服务器栏宽 72px固定频道侧边栏宽 240px成员列表桌面端宽 240px聊天列弹性伸缩最小 380pxtokens.css 将 4px 网格落地为间距令牌并补充了文档未展开的区块节奏与容器约束--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 40px; --section-y-desktop: 80px; --section-y-tablet: 48px; --section-y-phone: 32px; --container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 16px;圆角与层级也一并令牌化--radius-sm: 4px按钮/输入、--radius-md: 8px卡片、--radius-lg: 16px服务器头像、--radius-pill: 9999px胶囊层级用 亮度阶梯 半透明白色边框 表达深度而非投影--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised叠加低透明度黑阴影与 1px 白边。六、动效与过渡时长hover 200ms头像圆形变形 350ms工具提示淡入淡出 80ms缓动头像变形使用cubic-bezier(0.215, 0.61, 0.355, 1)先快后稳通知脉冲未读提及指示器 1.4sease-in-out infinitetokens.css 将其浓缩为三个令牌供所有交互统一消费--motion-fast: 80ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);七、使用红线Usage Guardrails将暗色外壳、紧凑密度与 Blurple 操作层级绑定在一起——在浅色营销风格布局上使用 Blurple 会破坏 Discord 的产品感。高导航密度的界面应围绕栏rail、侧边栏、聊天列组织而不是孤立的装饰性卡片。在表现人物、服务器或在线状态时使用圆角方形头像 状态点这套语言。USAGE.md 进一步给出了面向 Agent 与审阅者的使用纪律保留 schema token 名称以保证跨品牌切换可靠用--accent承担主操作、链接、焦点态与唯一视觉焦点复用组件夹具中的组件组而非自行发明控件避免在:root令牌块之外使用裸十六进制色值避免独立于 tokens.css 重定义 Tailwind 或 design-token 值。八、在 OpenDesign 仓库中的落地与消费方式8.1 包的标准化结构manifest.json 声明这是一个od-design-system-project/v1内置包固定文件命名如下与 design-systems/_schema/AGENTS.md 中定义的契约一致DESIGN.md——权威设计散文本仓库另有 19 种语言译本包括 DESIGN-ar.md、DESIGN-zh.md 等tokens.css——权威编译令牌56 个 tokendesign-tokens.json——由 tokens.css 派生的结构化 Design Tokenstailwind-v4.css——由 tokens.css 派生的 Tailwind v4theme映射components.htmlcomponents.manifest.json——组件夹具与可重建清单preview/——colors.html、typography.html、spacing.html三个静态预览页source/——evidence.md、tokens.source.json、token-contract.report.json审计证据source/evidence.md明确说明该包是基于 OpenDesign 精选的 bundled fixture 回填生成并非对上游品牌仓库/网站的重新抓取design-tokens.json与tailwind-v4.css是派生产物应通过报告与令牌样式表重新生成而非手工编辑。8.2 Token 契约分层根据 design-systems/_schema/AGENTS.md每个共享 token 回答两个问题谁决定值品牌方 Layer A或 schema 方 Layer B-slot以及品牌省略时怎么办required / fallback / alias。Discord 包的 56 个 token 分层统计见 design-tokens.jsonA1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个score: 100、grade: excellent、无 alias token。其中--surface-warm、--fg-2、--meta、--border-soft是 B-slot 令牌——schema 建议其可别名到同级兄弟如--fg-2 → var(--fg)而 Discord 选择了独立绑定更丰富的值。8.3 Tailwind v4 映射tailwind-v4.css 通过theme将全部令牌桥接为 Tailwind 工具类命名空间--color-bg、--font-sans、--text-4xl、--spacing-4、--radius-pill、--shadow-raised、--duration-base、--ease-standard等并注明 Derived from tokens.css. Keep tokens.css as the source of truth.——令牌源始终是 tokens.cssTailwind 层只是派生视图。8.4 消费路径供 Agent 与审阅者参考先读USAGE.md理解包契约再读DESIGN.md或其语言译本把握视觉意图、约束与反模式将tokens.css粘贴进首个产物的style块再编写组件 CSS需要精确选择器或状态时查阅components.html需要紧凑组件清单时用components.manifest.json需要视觉抽查时打开preview/三个预览页。仓库的守护脚本如scripts/check-design-system-manifests.ts与 schema 中的各类 guard会强制校验 manifest 形状、A2/B-slot 令牌齐备性与组件清单一致性保证目录内每个品牌包都能被目录发现、提示词组合与运行时导入直接消费。结语Discord 设计系统的精髓可以概括为一句话用三级深度的暗色表面建立空间层级用唯一的 Blurple 强调色标记一切需要行动的语义用字重阶梯而非颜色承载信息层级。在 OpenDesign 仓库中这套视觉语言不仅以 19 种语言的设计文档描述更被完整编译为 56 个结构化 CSS 令牌、一套可审计的组件夹具、Tailwind v4 桥接与自动校验契约——无论是手写聊天类界面还是作为 Agent 生成 Discord 风格 原型的风格注入源都可以直接从 design-systems/discord/ 目录按需取用。【免费下载链接】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），仅供参考
OpenDesign 仓库中的 Discord 设计系统完整规范：Blurple 暗色聊天的令牌体系与组件实战
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导读本文基于 design-systems/discord/DESIGN.md及其多语言版本如 design-systems/discord/DESIGN-ar.md展开完整梳理 OpenDesign 仓库中内置的 Discord 设计系统从 dark-first 三层深度的表面体系、节制使用的 Blurple#5865f2强调色到 gg sans 排版阶梯、按钮/输入/头像/提及胶囊等组件配方再到 4px 间距网格与动效时长。文中所有色值、字号、半径均可在仓库的 tokens.css 与 components.html 中找到一一对应的实现读者可据此直接复刻出一套 Discord 味 的聊天/社区类界面或理解 OpenDesign 设计系统目录的结构化契约。一、视觉主题与整体氛围Discord 的产品是为夜晚、多人游戏会话与群体语音而设计的因此整套界面dark-first暗色优先默认画布是深色的Background Primary聊天列叠加在略微更亮或更暗的色层之上用来区分频道、子线程与侧边面板。核心特征一览暗色优先表面#1e1f22/#2b2d31/#313338三级深度递进Blurple#5865f2是聊天界面中唯一饱和的强调色所有文本使用 gg sansWhitney 风格——友好、几何、中性圆角方形服务器头像16px 半径hover 时切换为圆形聊天行距紧凑侧边面板留白慷慨状态点绿色在线、黄色空闲、红色勿扰、灰色离线像素级对齐的 1px 分隔线低透明度微白这些特征在 tokens.css 的文件头注释中被凝练为品牌的 三句话身份暗色优先#1e1f22最深→#2b2d31侧栏→#313338聊天面三级深度阶梯gg sans 承载 400/500/600/700/800 全部字重正文 16px 永不缩小层级靠字重而非颜色对比Blurple 作为唯一饱和强调色仅用于品牌标识、主 CTA、提及与 你 的 affordance。形状语言圆润但不过度圆润——卡片 8px 圆角、输入框 4px、状态徽章与标签使用完整胶囊形。服务器图标是 48px 圆角方形hover 时变为正圆这成为品牌识别的标志性微动效。二、颜色系统与角色分工2.1 主色Primary令牌角色色值用途Blurple#5865f2品牌主色、主 CTA、提及高亮Blurple Hover#4752c4Blurple 的 hover/active 态Blurple Soft#7289da旧版 blurple营销物料中的次要强调色2.2 表面色暗色主题——默认令牌角色色值用途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)当前激活行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 源码中的语义化映射设计文档中的角色色值在 tokens.css 中被映射为跨品牌共享的语义令牌例如--bg: #313338; /* 聊天界面 / 主暗色 */ --surface: #2b2d31; /* 频道侧边栏、设置侧边栏 */ --surface-warm: #1e1f22; /* 服务器列表栏——最深一层 */ --fg: #dbdee1; /* 正文——比纯白略冷 */ --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——品牌主 CTA */ --accent-on: #ffffff; --accent-hover: #4752c4; /* 更暗的 hover */ --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #23a55a; /* 在线绿 */ --warn: #f0b232; /* 空闲黄 */ --danger: #f23f43; /* 勿扰 / 破坏性红 */注意--accent-active采用了现代 CSS 的color-mix(in oklab, ...)在 OKLab 色彩空间中对主色压暗 14%而不是再写一个硬编码色值——这体现了 以 token 派生 token 的维护思路。完整 56 个令牌及其分层归属A1-identity / A1-structure / A2 / B-slot记录在 design-tokens.json 中。三、排版规则3.1 字体族正文 / 界面 / 标题gg sans回退Helvetica Neue, Helvetica, Arial, sans-serif展示旧版 / WhitneyWhitney回退gg sans代码 / 等宽gg mono回退Consolas, Andale Mono, Courier New, Courier, monospace在 tokens.css 中对应为--font-display: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: gg mono, Consolas, Andale Mono, Courier New, Courier, monospace;3.2 层级表Hierarchy角色字体字号字重行高字间距说明Display Herogg sans56px (3.5rem)8001.1-0.02em营销大标题Page 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.25normal今天下午 4:32Sidebar 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 中被折叠为一条字号阶梯type scale--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营销大标题并配套行高与字间距令牌--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.1 按钮变体背景文本内边距圆角hover用途Primary#5865f2#ffffff8px 16px4px#4752c4主 CTA、继续、加入服务器Secondary#4e5058#ffffff8px 16px4px#6d6f78次级操作Tertiary / 链接式transparent#dbdee1——文本下划线背景不变弱化操作Danger#da373c#ffffff——#a12d2f破坏性操作在 components.html 组件夹具中按钮样式直接消费 token.btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: #4e5058; color: #ffffff; } .btn-secondary:hover { background: #6d6f78; } .btn-danger { background: #da373c; color: #ffffff; }其中.btn:focus-visible使用--focus-ring0 0 0 3px rgba(88, 101, 242, 0.3)呈现 Blurple 色调的焦点环保证键盘可达性的同时延续品牌色。4.2 输入框背景#1e1f22文本#dbdee1边框1px solid#1e1f22圆角4px内边距10px 12px聚焦边框#5865f2组件夹具中对应.field input系列选择器且::placeholder使用var(--muted)、聚焦边框使用var(--accent)见 components.manifest.json 中 inputs 组的 tokenReferences。4.3 服务器头像尺寸48×48px圆角默认 16px圆角方形hover 与激活时过渡到 50%激活态图标列左缘一条 4px 白色胶囊指示条组件夹具中实现为.server-icon默认border-radius16px对应--radius-lg与.server-icon:hover { border-radius: 50%; }。4.4 状态点尺寸10×10px边框3px solid background-tertiary形成 缺口 效果位置头像右下角4.5 卡片 / 嵌入Embeds背景#2b2d31暗色或#f2f3f5浅色左边框4px solid 嵌入强调色圆角4px内边距8px 16px4.6 提及胶囊Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3px4.7 组件夹具的完整性验证components.manifest.json 是对components.html的可重建缓存其中记录1 个 style 块、38 个选择器、17 个类、21 个元素组件分组中buttons、inputs、cards、links、typography、layout均 presentbadges、keyboard、icons缺席代表该夹具未覆盖这些组件。它同时审计了 token 的 declared / referenced / unused 关系——例如--accent-active、--danger、--elev-*、--font-mono等被声明但未被该夹具引用而 referenced 集合中没有出现任何 undeclared token说明组件样式全部收敛在令牌体系之内。五、间距与布局基准单位4px。阶梯4、8、12、16、20、24、32、40服务器栏宽 72px固定频道侧边栏宽 240px成员列表桌面端宽 240px聊天列弹性伸缩最小 380pxtokens.css 将 4px 网格落地为间距令牌并补充了文档未展开的区块节奏与容器约束--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 40px; --section-y-desktop: 80px; --section-y-tablet: 48px; --section-y-phone: 32px; --container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 16px;圆角与层级也一并令牌化--radius-sm: 4px按钮/输入、--radius-md: 8px卡片、--radius-lg: 16px服务器头像、--radius-pill: 9999px胶囊层级用 亮度阶梯 半透明白色边框 表达深度而非投影--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised叠加低透明度黑阴影与 1px 白边。六、动效与过渡时长hover 200ms头像圆形变形 350ms工具提示淡入淡出 80ms缓动头像变形使用cubic-bezier(0.215, 0.61, 0.355, 1)先快后稳通知脉冲未读提及指示器 1.4sease-in-out infinitetokens.css 将其浓缩为三个令牌供所有交互统一消费--motion-fast: 80ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);七、使用红线Usage Guardrails将暗色外壳、紧凑密度与 Blurple 操作层级绑定在一起——在浅色营销风格布局上使用 Blurple 会破坏 Discord 的产品感。高导航密度的界面应围绕栏rail、侧边栏、聊天列组织而不是孤立的装饰性卡片。在表现人物、服务器或在线状态时使用圆角方形头像 状态点这套语言。USAGE.md 进一步给出了面向 Agent 与审阅者的使用纪律保留 schema token 名称以保证跨品牌切换可靠用--accent承担主操作、链接、焦点态与唯一视觉焦点复用组件夹具中的组件组而非自行发明控件避免在:root令牌块之外使用裸十六进制色值避免独立于 tokens.css 重定义 Tailwind 或 design-token 值。八、在 OpenDesign 仓库中的落地与消费方式8.1 包的标准化结构manifest.json 声明这是一个od-design-system-project/v1内置包固定文件命名如下与 design-systems/_schema/AGENTS.md 中定义的契约一致DESIGN.md——权威设计散文本仓库另有 19 种语言译本包括 DESIGN-ar.md、DESIGN-zh.md 等tokens.css——权威编译令牌56 个 tokendesign-tokens.json——由 tokens.css 派生的结构化 Design Tokenstailwind-v4.css——由 tokens.css 派生的 Tailwind v4theme映射components.htmlcomponents.manifest.json——组件夹具与可重建清单preview/——colors.html、typography.html、spacing.html三个静态预览页source/——evidence.md、tokens.source.json、token-contract.report.json审计证据source/evidence.md明确说明该包是基于 OpenDesign 精选的 bundled fixture 回填生成并非对上游品牌仓库/网站的重新抓取design-tokens.json与tailwind-v4.css是派生产物应通过报告与令牌样式表重新生成而非手工编辑。8.2 Token 契约分层根据 design-systems/_schema/AGENTS.md每个共享 token 回答两个问题谁决定值品牌方 Layer A或 schema 方 Layer B-slot以及品牌省略时怎么办required / fallback / alias。Discord 包的 56 个 token 分层统计见 design-tokens.jsonA1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个score: 100、grade: excellent、无 alias token。其中--surface-warm、--fg-2、--meta、--border-soft是 B-slot 令牌——schema 建议其可别名到同级兄弟如--fg-2 → var(--fg)而 Discord 选择了独立绑定更丰富的值。8.3 Tailwind v4 映射tailwind-v4.css 通过theme将全部令牌桥接为 Tailwind 工具类命名空间--color-bg、--font-sans、--text-4xl、--spacing-4、--radius-pill、--shadow-raised、--duration-base、--ease-standard等并注明 Derived from tokens.css. Keep tokens.css as the source of truth.——令牌源始终是 tokens.cssTailwind 层只是派生视图。8.4 消费路径供 Agent 与审阅者参考先读USAGE.md理解包契约再读DESIGN.md或其语言译本把握视觉意图、约束与反模式将tokens.css粘贴进首个产物的style块再编写组件 CSS需要精确选择器或状态时查阅components.html需要紧凑组件清单时用components.manifest.json需要视觉抽查时打开preview/三个预览页。仓库的守护脚本如scripts/check-design-system-manifests.ts与 schema 中的各类 guard会强制校验 manifest 形状、A2/B-slot 令牌齐备性与组件清单一致性保证目录内每个品牌包都能被目录发现、提示词组合与运行时导入直接消费。结语Discord 设计系统的精髓可以概括为一句话用三级深度的暗色表面建立空间层级用唯一的 Blurple 强调色标记一切需要行动的语义用字重阶梯而非颜色承载信息层级。在 OpenDesign 仓库中这套视觉语言不仅以 19 种语言的设计文档描述更被完整编译为 56 个结构化 CSS 令牌、一套可审计的组件夹具、Tailwind v4 桥接与自动校验契约——无论是手写聊天类界面还是作为 Agent 生成 Discord 风格 原型的风格注入源都可以直接从 design-systems/discord/ 目录按需取用。【免费下载链接】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），仅供参考