Open Design 中的 Discord 設(shè)計(jì)系統(tǒng)復(fù)刻Blurple 暗色界面、gg sans 排版與令牌化組件規(guī)范全解析【免費(fèi)下載鏈接】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.項(xiàng)目地址: https://gitcode.com/gh_mirrors/opend/open-designDiscord 的產(chǎn)品體驗(yàn)建立在一套鮮明的視覺語言之上默認(rèn)暗色的三層深度表面、唯一的飽和強(qiáng)調(diào)色 Blurple、以及用字重階梯而非顏色對(duì)比來構(gòu)建信息層級(jí)。Open Design 倉庫將這套語言整理成可復(fù)用的設(shè)計(jì)系統(tǒng)包design-systems/discord以規(guī)范文檔多語言DESIGN-*.md、令牌樣式表tokens.css、組件夾具components.html與派生產(chǎn)物design-tokens.json、tailwind-v4.css四層形式落地。閱讀本文后你將掌握 Discord 風(fēng)格暗色界面的完整配色、排版、組件、間距與動(dòng)效參數(shù)并能在 Open Design 的 Agent 工作流中按規(guī)范直接引用這套令牌化設(shè)計(jì)系統(tǒng)。1. 包結(jié)構(gòu)一個(gè)設(shè)計(jì)系統(tǒng)如何被組織成可審計(jì)的資產(chǎn)design-systems/discord目錄是一個(gè)完整的 Design System 2.0 包其 manifest.json 聲明了包契約規(guī)范文檔DESIGN.md、令牌tokens.css、JSON 化令牌design-tokens.json、Tailwind v4 映射tailwind-v4.css、組件夾具components.html與組件清單components.manifest.json并配套 USAGE.md 指導(dǎo)消費(fèi)順序。值得注意的是一點(diǎn)國際化細(xì)節(jié)同一份規(guī)范被翻譯為 20 余種語言包括 DESIGN-zh.md、DESIGN-ja.md 與本文對(duì)應(yīng)的 DESIGN-uk.md確保不同語言的 Agent 與審閱者都能讀取同一套視覺契約。包內(nèi)還包含三個(gè)可視化預(yù)覽頁 preview/colors.html、preview/typography.html 與 preview/spacing.html以及source/下的審計(jì)證據(jù)。據(jù) source/evidence.md 說明本包基于 Open Design 精選的內(nèi)置夾具curated bundled fixture回填并未聲稱對(duì)上游品牌站點(diǎn)做過全新抓取這一點(diǎn)在使用時(shí)需如實(shí)對(duì)待。2. 視覺主題與氛圍為夜間語音社區(qū)而生的暗色語言Discord 的產(chǎn)品被設(shè)計(jì)用于夜晚、開黑與群組語音場(chǎng)景因此整個(gè)界面默認(rèn)暗色。規(guī)范 DESIGN.md 第 1 節(jié)與 DESIGN-uk.md 對(duì)應(yīng)內(nèi)容一致定義了以下關(guān)鍵特征三層深度表面#1e1f22/#2b2d31/#313338靠亮度階梯luminance stepping而非顏色變化區(qū)分層級(jí)Blurple#5865f2是聊天界面中唯一的飽和強(qiáng)調(diào)色保留給品牌標(biāo)識(shí)、主 CTA、提及與你自己的標(biāo)識(shí)用量克制以在低飽和中性色中凸顯gg sansDiscord 自研的 Whitney 替代字體用于全部文本幾何圓潤、友好但不失小字號(hào)可讀性服務(wù)器頭像為 48px 圓角方形16px 圓角懸停時(shí)變形為圓形聊天行距緊湊消息組之間 4–8px側(cè)欄留白寬松狀態(tài)點(diǎn)綠色在線、黃色離開、紅色勿擾、灰色離線1px 分割線以低透明度、微偏白的顏色并做像素對(duì)齊。形態(tài)語言圓潤但不過分膨脹卡片 8px 圓角、輸入框 4px 圓角、狀態(tài)徽章與標(biāo)簽使用全橢圓。這一整套參數(shù)在 tokens.css 頭部注釋中以三句話概括了品牌身份并直接映射為 CSS 變量。3. 色彩角色與調(diào)色板3.1 主色Primary角色值用途Blurple#5865f2品牌主色、主 CTA、提及高亮Blurple Hover#4752c4blurple 的懸停/激活態(tài)Blurple Soft#7289da舊版 blurple營銷中的次級(jí)強(qiáng)調(diào)在 tokens.css 中對(duì)應(yīng)--accent、--accent-hover并額外定義了--accent-active: color-mix(in oklab, var(--accent), black 14%)與--accent-on: #ffffff。3.2 表面暗色主題默認(rèn)令牌值語義Background Tertiary#1e1f22服務(wù)器列表欄最深的背景Background Secondary#2b2d31頻道側(cè)欄、設(shè)置側(cè)欄Background Primary#313338聊天表面、消息列Background Floating#111214浮層、提示、自動(dòng)補(bǔ)全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亮色主題側(cè)欄Light Bg Tertiary#e3e5e8最深的亮色表面3.4 文本令牌值語義Header Primary#f2f3f5暗色下頻道標(biāo)題、彈窗標(biāo)題Header Secondary#b5bac1弱化標(biāo)題Text Normal#dbdee1暗色正文比純白略冷Text Muted#949ba4時(shí)間戳、服務(wù)器名、次要元數(shù)據(jù)Text Link#00a8fc消息內(nèi)超鏈接天藍(lán)色與 blurple 區(qū)分Channels Default#80848e側(cè)欄未激活頻道名3.5 狀態(tài)與語義令牌值語義Status Online#23a55a在線點(diǎn)、成功態(tài)Status Idle#f0b232離開點(diǎn)、afkStatus DND#f23f43勿擾同時(shí)作為破壞性紅色Status Streaming#593695直播中紫色Status Offline#80848e離線灰Mention Highlightrgba(88, 101, 242, 0.1)提及行的柔和 blurple 洗色3.6 邊框與分割線令牌值語義Background Modifier Accentrgba(255, 255, 255, 0.06)暗色下的標(biāo)準(zhǔn)分割線Border Subtle#3f4147卡片的實(shí)線分割線在 tokens.css 中上述角色統(tǒng)一映射為--bg、--surface、--surface-warm、--fg、--fg-2、--muted、--meta、--border、--border-soft等令牌。據(jù) design-tokens.json 的契約報(bào)告該包共 56 個(gè)令牌、56 個(gè)均有源可查source-backed契約評(píng)分為 100評(píng)級(jí) excellent。4. 排版規(guī)則字重對(duì)比優(yōu)先于顏色對(duì)比4.1 字體族正文 / UI / 標(biāo)題gg sans回退Helvetica Neue, Helvetica, Arial, sans-serif展示舊版 / WhitneyWhitney回退gg sans代碼 / 等寬gg mono回退Consolas, Andale Mono, Courier New, Courier, monospace對(duì)應(yīng) tokens.css 中的--font-display、--font-body、--font-mono。4.2 層級(jí)表角色字體尺寸字重行高字距備注Display Herogg sans56px (3.5rem)8001.1-0.02em營銷 HeroPage Headinggg sans24px (1.5rem)7001.25normal設(shè)置/資料標(biāo)題Channel Namegg sans16px (1rem)6001.25normal#general頻道標(biāo)題Message Bodygg sans16px (1rem)4001.375normal標(biāo)準(zhǔn)聊天文本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服務(wù)器標(biāo)題Caption / Metagg sans12px (0.75rem)4001.30.02em狀態(tài)文本、編輯標(biāo)記Code Inlinegg mono0.875em400inheritnormal行內(nèi)codeCode Blockgg mono14px (0.875rem)4001.5normal三反引號(hào)代碼塊4.3 三項(xiàng)核心原則友好的幾何造型gg sans 以 a/g/s 的圓潤末端替代 Whitney品牌在保持可讀性的前提下傳遞溫度字重對(duì)比而非顏色對(duì)比信息層級(jí)來自 400→500→600→700→800 的字重階梯表面保持中性正文 16px 底線聊天消息不得小于 16px密度由行高1.375而非字號(hào)來獲得。這些原則在 tokens.css 中固化為字號(hào)階梯--text-xs: 12px到--text-4xl: 56px以及--leading-body: 1.375、--leading-tight: 1.10、--tracking-display: -0.02em。組件夾具 components.html 中的實(shí)現(xiàn)進(jìn)一步印證h1 采用 56px --tracking-displayh232px行高 1.20h324px行高 1.25.eyebrow使用 12px 小號(hào)大寫 0.08em 字距。5. 組件樣式規(guī)范5.1 按鈕Buttons變體背景文本內(nèi)邊距圓角懸停主要 Primary#5865f2#ffffff8px 16px4px#4752c4次要 Secondary#4e5058#ffffff8px 16px4px#6d6f78三級(jí)/弱化鏈接式transparent#dbdee1——文本加下劃線背景不變破壞性 Danger#da373c#ffffff8px 16px4px#a12d2fPrimary 用于主 CTA、Continue、Join Server 等關(guān)鍵動(dòng)作。在 components.html 中.btn基類使用--radius-sm、--focus-ring懸停背景切換采用--motion-fast80ms--ease-standard過渡.btn:focus-visible以 3px blurple 半透明光環(huán)呈現(xiàn)焦點(diǎn)。5.2 輸入框Inputs背景#1e1f22文本#dbdee1邊框1px solid#1e1f22圓角4px內(nèi)邊距10px 12px聚焦邊框變?yōu)?5865f2在 components.html 中.field label采用 600 字重大寫 0.04em 字距placeholder 使用--muted聚焦態(tài)以 80ms 過渡到--accent。5.3 服務(wù)器頭像Server Avatars尺寸48×48px圓角默認(rèn) 16px圓角方形懸停與激活態(tài)過渡到 50%正圓激活態(tài)圖標(biāo)列左緣出現(xiàn) 4px 白色橢圓條pillcomponents.html 中的.server-icon以 200ms cubic-bezier(0.215, 0.61, 0.355, 1)過渡border-radius懸停時(shí)變圓——這正是規(guī)范中品牌標(biāo)識(shí)級(jí)微動(dòng)效的實(shí)現(xiàn)。5.4 狀態(tài)點(diǎn)Status Dots尺寸10×10px邊框3px solid background-tertiary形成凹槽效果位置頭像右下角5.5 卡片 / 嵌入Cards / Embeds背景#2b2d31暗色或#f2f3f5亮色左側(cè)邊框4px solid 嵌入強(qiáng)調(diào)色圓角4px內(nèi)邊距8px 16px5.6 提及藥丸Mention Pill背景rgba(88, 101, 242, 0.3)文本#c9cdfb內(nèi)邊距0 2px圓角3pxcomponents.manifest.json 對(duì)組件夾具做了結(jié)構(gòu)化盤點(diǎn)共 38 個(gè)選擇器、17 個(gè)類、21 個(gè)元素覆蓋 buttons、inputs、cards、links、typography、layout 六類組件組badges、keyboard、icons 組在當(dāng)前夾具中為缺省并逐組列出其引用的令牌例如 buttons 組引用--accent-hover與--focus-ringcards 組引用--border-soft、--radius-md、--space-6、--surface。這為 Agent 在復(fù)用組件前提供了精確的該用什么令牌清單。6. 間距與布局4px 基準(zhǔn)網(wǎng)格基準(zhǔn)單位4px刻度為 4、8、12、16、20、24、32、40服務(wù)器欄72px固定寬頻道側(cè)欄240px成員列表240px桌面端聊天列流體布局最小 380pxtokens.css 將刻度固化為--space-1至--space-12并定義了桌面/平板/手機(jī)的區(qū)塊縱向節(jié)奏--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px以及--container-max: 1200px與三檔容器 gutter24/16/16px。7. 動(dòng)效規(guī)范時(shí)長懸停 200ms頭像變圓 350ms提示浮現(xiàn) 80ms緩動(dòng)頭像變形使用cubic-bezier(0.215, 0.61, 0.355, 1)先快后穩(wěn)通知脈沖未讀提及指示器 1.4s ease-in-out infinite在令牌層面對(duì)應(yīng)為--motion-fast: 80ms、--motion-base: 200ms與--ease-standard: cubic-bezier(0.2, 0, 0, 1)tokens.css。需要注意的是規(guī)范文檔中頭像變圓的 350ms 與令牌中的 200ms 屬于文檔描述與實(shí)現(xiàn)常量兩種表達(dá)實(shí)際組件夾具 components.html 采用 200ms 文檔指定的緩動(dòng)曲線。8. 使用約束Usage Guardrails規(guī)范明確列出三條紅線防止形似神不似的誤用保持暗色外殼、緊湊密度與 blurple 動(dòng)作層級(jí)三者共存在亮色營銷布局中單獨(dú)使用 blurple 會(huì)破壞 Discord 產(chǎn)品感導(dǎo)航密集的表面應(yīng)圍繞欄、側(cè)欄與聊天列組織而非孤立的裝飾性卡片表現(xiàn)人、服務(wù)器或在線狀態(tài)時(shí)使用圓角方形頭像與狀態(tài)點(diǎn)的語言。USAGE.md 進(jìn)一步給出 Do/Avoid 清單嚴(yán)格保留 schema 令牌名以保證跨品牌切換可靠用--accent承擔(dān)主操作、鏈接、焦點(diǎn)態(tài)與唯一焦點(diǎn)元素避免在:root令牌塊之外使用裸十六進(jìn)制值避免脫離tokens.css另行定義 Tailwind 或設(shè)計(jì)令牌值避免聲稱持有上游原始來源證據(jù)。此外manifest.json 的 craft 字段建議在應(yīng)用該包時(shí)配合倉庫 craft/color.md 與 craft/accessibility-baseline.md 兩份工藝準(zhǔn)則做合規(guī)檢查。9. 從規(guī)范到代碼如何在 Open Design 中落地這套暗色設(shè)計(jì)系統(tǒng)按 USAGE.md 的推薦閱讀順序?qū)嶋H落地路徑如下讀取本文檔系先讀USAGE.md理解包契約再讀DESIGN.md或?qū)?yīng)語言的DESIGN-*.md掌握視覺意圖與反模式注入令牌將 tokens.css 粘貼到產(chǎn)物第一個(gè)style塊中再編寫組件 CSS所有值一律引用:root中的 CSS 變量復(fù)用組件用 components.manifest.json 做組件盤點(diǎn)需要精確選擇器或狀態(tài)時(shí)打開 components.html 對(duì)照視覺校驗(yàn)需要時(shí)打開 preview/colors.html、preview/typography.html、preview/spacing.html 做人工確認(rèn)Tailwind v4 場(chǎng)景若使用 Tailwindtailwind-v4.css 通過theme塊將全部令牌映射為--color-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*等實(shí)用類變量例如bg-bg、text-fg-2、bg-accent、rounded-md該文件是派生產(chǎn)物規(guī)范要求以tokens.css為唯一事實(shí)源審計(jì)與溯源design-tokens.json與source/token-contract.report.json將每個(gè)令牌綁定回tokens.css的具體聲明行如--bg溯源至tokens.css:32可用于自動(dòng)化校驗(yàn)與跨品牌切換的一致性檢查。這套規(guī)范文檔 → CSS 令牌 → 組件夾具 → 派生產(chǎn)物 → 審計(jì)報(bào)告的分層結(jié)構(gòu)使得 Discord 風(fēng)格的暗色界面不僅是一份設(shè)計(jì)說明而是一套可由 Agent 直接消費(fèi)、可校驗(yàn)、可跨品牌復(fù)用的工程資產(chǎn)?！久赓M(fèi)下載鏈接】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.項(xiàng)目地址: https://gitcode.com/gh_mirrors/opend/open-design創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考