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