Open Design 中的 Slack 风格设计系统从设计令牌到组件实现的完整还原指南【免费下载链接】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导读本文以 Open Design 仓库中 design-systems/slack/DESIGN-es.md 为骨架系统拆解 Slack 工作场所沟通工具的设计语言以茄子紫侧边栏为锚点的浅色内容界面、语义化四色 Logo 调色板、15px 密度化排版与 4px 圆角组件体系。文章不仅完整继承该文档的全部设计令牌、排版刻度、组件样式与 Agent 提示词指南还结合仓库内的 tokens.css、components.html、manifest.json 等真实产物说明这些规范如何在 Open Design 的设计系统 2.0 包结构中落地为可校验的 CSS 变量契约。读完本文你将能直接基于这套规范在 Open Design 中生成、审查或还原 Slack 风格的产品界面并理解其底层令牌分层A1 / A2 / B-slot机制。1. 视觉主题与氛围浅色界面 茄子紫锚点Slack 的视觉身份建立在工作应当有人情味、甚至有点趣味的核心理念之上。其典型表面是浅色的——内容区域为白色配以深茄子紫侧边栏#4A154B与常见深色背景工具形成刻意对比。这个对比是有意为之侧边栏是始终存在的安静导航锚点而内容区明亮开放。Logo 调色板蓝、绿、黄、红主要出现在井号图标和营销场景中而非散落于产品界面产品内部使用的是以茄子紫为唯一品牌锚点的克制配色体系。关键特征继承自 DESIGN-es.md 第 1 节内容表面以浅色为主白色#FFFFFF与近白#F8F8F8深茄子紫侧边栏#4A154B—— 品牌最具辨识度的界面元素四个 Logo 强调色蓝、绿、黄、红克制使用仅作高亮标题使用 Larsseit营销场景界面使用系统无衬线字体圆润但不过度卡通多数组件圆角 4–8px密集而透气紧凑的消息行 清晰的线程层级温暖对话式基调 —— 表情、回应与插画是一等公民在 Open Design 中这套视觉判断被编码为 tokens.css 顶部注释所描述的三句话品牌身份浅色优先的内容表面 Larsseit/系统字体与 15px 基线与 700 加粗未读通道名 四个 Logo 强调色严格语义化、#1264A3用于链接与焦点环。2. 颜色令牌与语义角色2.1 品牌主色茄子紫家族TokenHex角色--color-aubergine#4A154B侧边栏背景、品牌主色--color-aubergine-dark#350d36茄子紫表面上的 hover 状态--color-aubergine-light#611f69侧边栏激活元素高亮在 tokens.css 的规范层中这一家族被映射为统一的 accent 槽位--accent: #4a154b; /* 主 CTA、侧边栏背景 */ --accent-on: #ffffff; --accent-hover: #611f69; /* 激活/悬停茄子紫 */ --accent-active: #350d36; /* 深茄子紫 —— 按压态 */注意命名上的对应关系文档层的--color-aubergine-light#611f69即契约层的--accent-hover--color-aubergine-dark#350d36即--accent-active。这在设计系统 2.0 中是刻意的槽位化设计——品牌可以起自己的语义名但必须绑定到共享 TOKEN_SCHEMA 定义的 A1/A2 槽位从而保证跨品牌切换时组件代码无需改动参见 packages/contracts/src/design-systems/token-schema.ts。2.2 Logo 强调色克制使用——仅限高亮、图标、营销TokenHex名称角色--color-blue#36C5F0天蓝频道图标、链接、信息状态--color-green#2EB67D蓝绿在线状态、成功状态--color-yellow#ECB22E金色离开状态、警告、高亮--color-red#E01E5A红宝石通知、错误、提及徽标在契约层这四个颜色被直接注册为语义令牌tokens.css 注释明确写道Logo palette: these ARE the semantic colors--success: #2eb67d; /* Slack 蓝绿 —— 在线、成功 */ --warn: #ecb22e; /* Slack 金色 —— 离开、警告 */ --danger: #e01e5a; /* Slack 红宝石 —— 通知、错误 */一个关键的设计决策Slack 系没有独立的信息蓝语义令牌--color-blue/--color-info#36C5F0在 design-tokens.json 的 56 个令牌中按 A2 层登记但其槽位语义即 info。这也解释了为什么 components.html 中反应 pill 的激活态直接使用#1264a3蓝而非品牌蓝。2.3 表面与背景TokenHex角色--bg-primary#FFFFFF主消息区、弹窗--bg-secondary#F8F8F8线程面板、次级表面--bg-tertiary#F1F1F1输入框背景、hover 状态--bg-sidebar#4A154B左侧边栏茄子紫--bg-sidebar-hoverrgba(255,255,255,0.1)侧边栏元素 hover--bg-sidebar-activergba(255,255,255,0.2)侧边栏激活元素--bg-message-hover#F8F8F8消息行 hover契约层对应为--bg: #ffffff、--surface: #f8f8f8、--border-soft: #f1f1f1。特别地由于 Slack 体系中没有暖色层级--surface-warm通过 B-slot 别名直接指向--surfacealiasTo: var(--surface)这是 token-schema.ts 中 B-slot 机制的典型应用没有更丰富层级的品牌将兄弟令牌别名到基础令牌即可。2.4 文本颜色TokenHex角色--text-primary#1D1C1D正文主文本近黑非纯黑--text-secondary#616061时间戳、弱化标签--text-sidebarrgba(255,255,255,0.9)侧边栏频道名--text-sidebar-mutedrgba(255,255,255,0.6)侧边栏非激活元素--text-link#1264A3消息内联链接--text-mention#1264A3提及文本颜色2.5 语义颜色TokenHex角色--color-success#2EB67D成功通知、正向状态--color-warning#ECB22E警告状态--color-danger#E01E5A错误状态、破坏性操作--color-info#36C5F0信息高亮2.6 边框与分隔线TokenHex角色--border-default#DDDDDD标准分隔线、卡片边框--border-subtle#F1F1F1行间细微分隔--border-focus#1264A3焦点环颜色3. 排版规则3.1 字体栈角色官方字体Web 替代屏幕标题 / 营销LarsseitLarsseit, Helvetica Neue, Arial, sans-serif界面 / 正文 / ChromeSlack Lato定制system-ui, -apple-system, BlinkMacSystemFont, sans-serif代码 / 等宽—Monaco, Menlo, Courier New, monospace在 tokens.css 中这三档被注册为--font-display: Larsseit, Helvetica Neue, Arial, sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif; --font-mono: Monaco, Menlo, Courier New, Courier, monospace;Slack 营销标题用 Larsseit产品界面用定制版 LatoWeb 场景下system-ui是最稳妥的替代。3.2 字体刻度层级尺寸字重行高字距用途展示 XL48px8001.1-1px营销主视觉标题展示 L36px7001.15-0.5px章节主视觉标题 128px7001.25normal弹窗标题、页面标题标题 222px7001.3normal卡片标题、设置区块标题 318px7001.35normal子章节标题正文 L16px4001.5normal消息文本、描述正文15px4001.46667normal默认界面文本Slack 基准正文 SM13px4001.38462normal次级元数据说明12px4001.33normal时间戳、提示代码12px4001.5normal行内代码、代码块契约层用统一的类型刻度变量表达这套体系tokens.css 的注释明确给出了映射关系xs12, sm15, base15(body), lg18, xl22, 2xl28, 3xl36, 4xl48--text-xs: 12px; /* 说明/时间戳 */ --text-sm: 13px; /* 正文 SM —— 次级元数据 */ --text-base: 15px; /* 默认 UI 文本Slack 基准 */ --text-lg: 16px; /* 正文 L —— 消息、描述 */ --text-xl: 22px; /* 标题 2 —— 卡片标题 */ --text-2xl: 28px; /* 标题 1 —— 弹窗标题 */ --text-3xl: 36px; /* 展示 L —— 章节主视觉 */ --text-4xl: 48px; /* 展示 XL —— 营销主视觉 */行高与字距的归一化也体现在令牌中--leading-body: 1.5、--leading-tight: 1.1048px 展示级压缩、--tracking-display: -0.021em即 -1px ÷ 48px 归一化。components.html 中 h2/h3 的覆盖也与此一致h2 行高 1.15、h3 行高 1.25。3.3 排版规则要点Slack 正文基准为15px略小于 16px 以获得更高密度未读频道字重 700 —— 加粗是未读的主要指示器时间戳12px--text-secondary仅悬停时显示代码块背景#F8F8F8、边框1px solid #DDDDDD、圆角 4px严禁使用小于 12px 的字体营销标题大号展示级使用-1px字距4. 组件样式实现原文档给出了组件层的基础 CSS在仓库中这些样式以令牌化形式完整落到了 components.html42 个选择器、19 个类、21 个元素全部可见值来自 tokens.css见 components.manifest.json。下面将文档版与仓库版对照呈现推荐直接使用令牌化版本。4.1 按钮文档版/* Primary */ .btn-primary { background: #4A154B; color: #FFFFFF; border-radius: 4px; padding: 0 16px; height: 36px; font-size: 15px; font-weight: 700; border: none; } .btn-primary:hover { background: #611f69; } /* Secondary */ .btn-secondary { background: #FFFFFF; color: #1D1C1D; border: 1px solid #DDDDDD; border-radius: 4px; padding: 0 16px; height: 36px; font-size: 15px; font-weight: 700; } .btn-secondary:hover { background: #F8F8F8; } /* Danger */ .btn-danger { background: #E01E5A; color: #FFFFFF; border-radius: 4px; } .btn-danger:hover { background: #B3114A; }仓库令牌化版本components.html.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); height: 36px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; line-height: 1; cursor: pointer; border: none; transition: background-color var(--motion-fast) var(--ease-standard); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg); color: var(--fg); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface); } .btn-danger { background: var(--danger); color: #ffffff; }关键参数高度 36px、字重 700、圆角 4px--radius-smSlack 保守圆角的标志、过渡 150ms--motion-fast配合标准缓动曲线cubic-bezier(0.2, 0, 0, 1)--ease-standard。4.2 输入框.input { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 4px; color: #1D1C1D; font-size: 15px; padding: 8px 12px; height: 36px; } .input:focus { border-color: #1264A3; box-shadow: 0 0 0 2px rgba(18,100,163,0.25); outline: none; }令牌化版本.field input把焦点环抽为共享令牌--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25)占位符颜色使用--muted边框色#1264A3保持不变。4.3 侧边栏频道元素.channel-item { height: 28px; padding: 0 16px; border-radius: 6px; color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 400; } .channel-item:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; } .channel-item.active { background: rgba(255,255,255,0.2); color: #FFFFFF; } .channel-item.unread { color: #FFFFFF; font-weight: 700; }仓库版 (components.html) 完全一致并补充了transition: background-color var(--motion-fast) var(--ease-standard), color ...。侧边栏本身.sidebar背景为var(--accent)、min-width: 220px、内边距var(--space-4)标题.sidebar-title字重 700。4.4 未读徽标.badge { background: #E01E5A; color: #FFFFFF; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 1px 6px; min-width: 18px; }4.5 消息附件 / 卡片.attachment { border-left: 4px solid #DDDDDD; background: #F8F8F8; border-radius: 0 4px 4px 0; padding: 8px 12px; margin: 4px 0; }border-left: 4px是 Slack 附件/消息插入的签名细节在该做与不该做中作为强制项反复出现。4.6 反应Reaction.reaction { border: 1px solid #DDDDDD; border-radius: 24px; background: #F8F8F8; padding: 2px 8px; font-size: 13px; cursor: pointer; } .reaction:hover { background: #F1F1F1; } .reaction.active { background: rgba(18,100,163,0.1); border-color: #1264A3; }仓库版components.html中.reaction使用var(--radius-md)之外的硬编码24pxpill 圆角、var(--surface)背景、激活态蓝色调rgba(18, 100, 163, 0.1)#1264a3边框——注意激活态用的是链接蓝而非品牌蓝体现语义色只在语义场景出现。5. 布局原则5.1 三栏布局┌──────────────┬──────────────────────────────┬─────────────┐ │ Sidebar │ Message Area │ Thread │ │ (240px) │ (flex: 1) │ (400px) │ │ #4A154B │ #FFFFFF │ optional │ └──────────────┴──────────────────────────────┴─────────────┘5.2 间距系统4px 基准Token值用途--space-14px紧凑间隙--space-28px组件内边距--space-312px输入框内边距--space-416px标准内边距--space-624px卡片内边距--space-832px区块间距tokens.css 在此基础上补充了--space-520px与--space-1248px以及响应式区块节奏--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px与 components.html 中section的padding-block及media (max-width: 1023px) / (max-width: 639px)断点一一对应。5.3 侧边栏结构[Workspace Name ▼] ──────────────────── Threads All DMs Drafts Sent ──────────────────── ▼ Channels # general # random # design ● (unread) ──────────────────── ▼ Direct Messages John Doe Jane Smith5.4 消息编辑器Composer固定于消息区底部border: 1px solid #DDDDDD、border-radius: 8px、margin: 0 16px 16px工具栏表情、附件、格式化、发送按钮6. 深度与层级Slack 在浅色表面上使用柔和阴影层级用途阴影平面消息行、侧边栏元素none低卡片、输入框0 1px 3px rgba(0,0,0,0.08)中下拉菜单、popover0 4px 12px rgba(0,0,0,0.12)高弹窗、对话框0 8px 24px rgba(0,0,0,0.15)遮罩弹窗背景rgba(0,0,0,0.5)令牌层用三档抽象表达tokens.css--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)发丝线描边卡片/按钮边缘、--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12)对应文档的中层阴影。这正是 Open Design 设计系统 2.0 的抽象方式把品牌的具体阴影值收敛为少数槽位供跨品牌组件复用。7. 该做与不该做Do Dont✅ 该做用茄子紫#4A154B作为侧边栏 —— 它是 Slack 最具标志性的界面元素保持主要内容区白色浅亮正文全部使用#1D1C1D近黑不用纯黑未读频道名加粗 —— 字重即指示器四个强调色只用于语义角色成功、警告、危险、信息附件与消息插入使用border-left: 4px时间戳仅悬停时显示链接与焦点态使用#1264A3侧边栏元素保持紧凑高 28px、圆角 6px❌ 不该做不要使用深色主内容区 —— Slack 以浅色为主不要把蓝/绿/黄/红当作装饰性强调散布界面不要用纯黑#000000作为文本不要使用对话气泡 —— 消息是平面行不要使用大圆角按钮 —— 4px 是标准不要永久显示时间戳不要用大写字母写频道名不要使用小于 12px 的字体这些约束在 components.html 的实现中逐条可验证消息以平面.channel-item/.reaction形式呈现而非气泡、按钮border-radius: var(--radius-sm)4px、输入焦点环统一走--focus-ring。8. 响应式行为8.1 断点断点宽度布局移动端 768px单面板侧边栏变为左侧抽屉平板768–1024px仅侧边栏 消息区桌面 1024px完整三栏布局8.2 移动端适配侧边栏左侧抽屉向右滑动打开底部标签栏首页、MD、活动、我线程面板全屏覆盖层编辑器固定在键盘上方频道列表项触控目标高 44px顶部保留茄子紫标题栏仓库中 components.html 的实际断点为1023px平板与639px手机用于切换.container内边距与section垂直节奏、将.hero-grid折叠为单列、将.features-grid从 3 列降为 2 列再降为 1 列。9. Agent 提示词指南可直接复制使用原文档第 9 节为设计 Agent 提供了开箱即用的提示模板这里完整保留并标注其在令牌层的对应色彩应用将background: #FFFFFF作为主画布。用#4A154B茄子紫作为侧边栏。所有正文使用#1D1C1D。链接与焦点环使用#1264A3。四个 Logo 色 ——#36C5F0、#2EB67D、#ECB22E、#E01E5A—— 仅作语义用途信息、成功、警告、危险。排版全界面使用system-ui, -apple-system, sans-serif。基准字号 15px。未读频道字重 700。正文字重 400。时间戳 12px#616061仅悬停显示。代码Monaco, Menlo, monospace12px背景#F8F8F8。布局三栏240px 茄子紫侧边栏 弹性白色消息区 可选 400px 线程面板。侧边栏元素高 28px、圆角 6px、未读加粗。编辑器固定在底部border: 1px solid #DDDDDD、border-radius: 8px。组件按钮圆角 4px、高 36px、主按钮茄子紫。输入框边框1px solid #DDDDDD、焦点环#1264A3。消息行平面、无气泡、36px 圆形头像。反应pill 样式border: 1px solid #DDDDDD、border-radius: 24px。基调Slack 温暖、专业、人性化。空状态使用友好插画。行动号召直接明了发送消息、开始使用。错误提示清晰有用绝不制造恐慌。要避免的反模式无深色内容区。无对话气泡。无纯黑文本。无散落的彩色强调。无大写频道名。无小于 12px 的字体。无大圆角按钮。在 Open Design 的 Agent 工作流中这组提示词对应 USAGE.md 定义的读取顺序先读 USAGE.md 理解包契约 → 读 DESIGN.md 掌握视觉意图与反模式 → 将 tokens.css 粘贴进首个产物的style块 → 用 components.manifest.json 做组件清单、细节查 components.html → 用 preview/ 页面做视觉抽检。10. 在 Open Design 中的包结构与令牌契约该设计系统以标准包形式组织在 design-systems/slack/ 下manifest.json 声明了schemaVersion: od-design-system-project/v1、来源类型为bundled基于 Open Design 策划的内置 fixture非上游实时抓取并列出各文件职责design: DESIGN.md —— 视觉规范主文档DESIGN-es.md 为西语译本tokens: tokens.css —— 结构化令牌绑定designTokens: design-tokens.json —— 派生令牌清单tailwind: tailwind-v4.css —— Tailwind v4 适配components: components.html —— 参考组件preview: preview/colors.html、preview/typography.html、preview/spacing.html —— 可视化抽查页source: source/evidence.md、source/token-contract.report.json —— 审计证据与契约报告值得注意的校验数据根据 design-tokens.json 的 summarySlack 包共 56 个令牌、56 个声明、56 个有源背书的令牌契约评分为 100excellent其中 A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个。所有令牌都必须满足 packages/contracts/src/design-systems/token-schema.ts 中TOKEN_SCHEMA的强制清单 —— 该清单定义了令牌分层A1 品牌身份/结构、A2 带默认回退值的共享层、B-slot 兄弟别名以及默认回退值如--accent-hover回退color-mix(in oklab, var(--accent), black 8%)。这就是为什么 Slack 的--surface-warm可以直接别名var(--surface)、--meta别名var(--muted)品牌只要声明基础层共享层自动补齐。USAGE.md 还给出了使用约束保留 schema 令牌名以保证跨品牌切换可靠--accent只用于主操作、链接、焦点态与一个明确的视觉焦点元素优先复用 components.manifest.json 的组件组而非发明新控件在复制的:root令牌块之外避免裸写 hex 值不要独立于tokens.css重定义 Tailwind 或设计令牌值不要声称存在上游原始源码证据本包基于策划的内置 fixture 回填。结语从 DESIGN-es.md 的视觉叙事到 tokens.css 的令牌契约再到 components.html 的可运行组件Open Design 的 Slack 设计系统包展示了一条完整的品牌规范 → 结构化令牌 → 组件实现链路。其核心可迁移经验有三以单一品牌锚点茄子紫约束视觉重心将 Logo 四色降级为纯语义色并以 4px/15px/28px 这类紧凑度量支撑高密度工作界面。无论你是要生成 Slack 风格原型、审查 Agent 产出还是在 Open Design 中切换品牌皮肤这套包都是可直接引用的权威依据。【免费下载链接】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），仅供参考