用 OpenDesign 复刻 IBM Carbon 风格设计系统：从 DESIGN 规范到 tokens.css 的工程落地

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

IBM 设计系统（Carbon Design System）以其企业级权威、单一蓝色强调色与 0px 圆角的"方盒子"美学著称。本文以 OpenDesign 仓库中打包的 IBM 设计系统包为骨架（规范见 design-systems/ibm/DESIGN-ko.md，机器可读实现见 design-systems/ibm/tokens.css），完整讲解其颜色、排版、组件、布局与响应式规则，并结合仓库内实际生成的 token 文件、Tailwind v4 映射与组件 fixture，说明一套"设计规范 + 语义令牌"双轨制的落地方式，读完即可自行产出高保真的 IBM 风格页面。

1. 理解 OpenDesign 设计系统包的结构

在 OpenDesign 中，每个设计系统都是一个可移植的包，被 Design System 选择面或项目创建流程组合进 Agent 提示词。仓库根目录 design-systems/README.md 说明每个捆绑包的最小机器可读形态为manifest.json + DESIGN.md + tokens.css，而 IBM 包提供了更丰富的完整形态：

design-systems/ibm/ ├── manifest.json # 发现元数据、来源与文件路径声明 ├── DESIGN.md / DESIGN-ko.md # 面向 Agent 的规范正文（多语言） ├── USAGE.md # Agent 阅读顺序与使用守则 ├── tokens.css # 编译后的语义令牌样式表（唯一事实源） ├── tailwind-v4.css # 由 tokens.css 派生的 Tailwind v4 映射 ├── design-tokens.json # 派生的 Design Tokens JSON ├── components.html # 独立组件 fixture（含完整 CSS 与 DOM） ├── components.manifest.json # 组件/令牌索引 ├── preview/ # colors / typography / spacing 预览页 └── source/ # 导入证据与令牌契约报告

design-systems/ibm/manifest.json 记录该包归类为 "Media & Consumer"、来源为 bundled fixture（source.type: "bundled"），并声明files.design、files.tokens、files.tailwind、files.components等规范路径。design-systems/ibm/USAGE.md 给出明确的阅读顺序：先读 USAGE 理解包契约，再读 DESIGN 掌握视觉意图与反模式，然后把tokens.css粘贴到第一个 artifact 的<style>块中再写组件 CSS。这意味着tokens.css 是唯一事实源，任何组件 CSS 都应引用令牌而非裸色值。

2. 视觉主题与氛围：企业权威的"像素蒸馏"

IBM 网站是建立在 Carbon 设计系统之上的企业权威数字实现，其设计语言像一份被渲染成网页的工程规格书，核心是鲜明的二元对立：

• 纯白（#ffffff）画布 + 近黑（#161616）文字，配唯一不可动摇的强调色——IBM Blue 60（#0f62fe）；
• 所有元素存在于 Carbon 严格的 2x 网格中，所有颜色映射到语义令牌，所有间距值落在 8px 基准单位上；
• 这不是初创式的俏皮极简，而是把企业精确度蒸馏到像素级。

IBM Plex 字体家族是系统的根基：

• **IBM Plex Sans 300（Light）**用于展示级标题——大字号下意外地轻盈细腻，是对企业厚重感的刻意对位；
• **IBM Plex Sans 400（Regular）**用于正文，14px 处 0.16px 字距、12px 处 0.32px 字距，让 Carbon 文本"像被工程化而非设计出来"；
• IBM Plex Mono用于代码、数据与技术标签，与几乎不用的 IBM Plex Serif 一起构成"三体"字族。

交互状态全部由--cds-*（Carbon Design System）前缀的 CSS 自定义属性驱动：按钮没有硬编码颜色，而是引用--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-active。这种令牌化架构意味着整个视觉层只是深层次结构化基础之上的薄壳——相当于一个类型良好的 API。

主要特征速览：

• 展示文字用 IBM Plex Sans 300（Light）——以排版克制传递企业权威；
• 代码与技术内容用 IBM Plex Mono，小字号统一 0.16px 字距；
• 单一强调色 IBM Blue 60（#0f62fe）——所有交互元素、所有 CTA、所有链接；
• Carbon 令牌系统（--cds-*）驱动所有语义色，可在变量层面切换主题；
• 严格遵循 8px 间距网格，无任意值，一切对齐；
• #f4f4f4（Gray 10）表面上的扁平无边框卡片——以背景色分层而非阴影表达深度；
• 下边框输入框（非盒型）——Carbon 表单的标志性模式；
• 主按钮 0px 圆角——毫不妥协的矩形，拒绝圆润。

3. 颜色系统：单蓝加灰阶的语义化架构

3.1 主色

3.2 中性灰阶（Gray 家族）

3.3 交互色

3.4 支持与状态色

3.5 深色主题（Gray 100 主题）

3.6 仓库中的令牌落地

上述语义在 design-systems/ibm/tokens.css 中被归一化为项目自己的令牌命名（--bg、--surface、--fg、--accent等），这是 OpenDesign 跨品牌切换的约定：保留 schema 令牌名不变以保证跨品牌切换可靠（见 USAGE.md 的 Do 清单）。注意 hover/active 采用color-mix(in oklab, ...)计算：

--accent: #0f62fe; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%);

而 design-systems/ibm/source/token-contract.report.json 会把每个 schema 令牌绑定映射回tokens.css的声明行，design-tokens.json与tailwind-v4.css均为派生输出（见 design-systems/ibm/source/evidence.md）。

4. 排版规则：IBM Plex 三体字族

4.1 字体家族

• 主字体：IBM Plex Sans，回退Helvetica Neue, Arial, sans-serif；
• 等宽：IBM Plex Mono，回退Menlo, Courier, monospace；
• 衬线（受限使用）：IBM Plex Serif，用于编辑/表现性场景；
• 图标字体：ibm_icons，20px 专用图标字形。

4.2 完整层级表

4.3 设计原则

• 展示尺寸用轻字重：Carbon 表现性字体集在 42px 及以上使用 300（Light），制造独特张力——内容以企业权威发声，字形却以排版轻盈低语；
• 小尺寸微字距：14px 用 0.16px、12px 用 0.32px 字距。这些不起眼的值是 Carbon 在紧凑尺寸下保持可读性的秘密武器，恰到好处地打开 IBM Plex 紧凑的字形；
• 三个功能字重：300（展示/表现）、400（正文/阅读）、600（强调/UI 标签）。字重 700 被有意排除在生产字阶之外；
• Productive vs. Expressive：Productive 集为高密度 UI 采用紧凑行高（1.29）；Expressive 集为营销与编辑内容更宽松（1.40–1.50）。

在令牌层面，design-systems/ibm/tokens.css 将字阶压缩为--text-xs: 12px至--text-4xl: 60px七个档位，并定义--leading-tight: 1.17、--leading-body: 1.5、--tracking-display: 0，与上述 Display/Heading/Body 规则一一对应。

5. 组件样式规范

5.1 按钮

主按钮（蓝色）

• 背景：#0f62fe（Blue 60）→--cds-button-primary；文字：#ffffff；
• 内边距：14px 63px 14px 15px（非对称——为尾部图标预留空间）；
• 边框：1px solid transparent；圆角：0px（锋利矩形——Carbon 签名）；
• 高度：48px（默认）、40px（紧凑）、64px（表现性）；
• hover：#0353e9→--cds-button-primary-hover；active：#002d9c（Blue 80）→--cds-button-primary-active；
• focus：内嵌2px solid #0f62fe+ 内部1px solid #ffffff。

次按钮（灰色）：背景#393939（Gray 80）、文字#ffffff、hover#4c4c4c（Gray 70）、active#6f6f6f（Gray 60），与主按钮同内边距/圆角。

三级按钮（幽灵蓝）：透明背景、#0f62fe文字、1px solid #0f62fe边框、hover 时文字变#0353e9并叠加 Blue 10 背景淡染、圆角 0px。

幽灵按钮：透明背景、#0f62fe文字、内边距14px 16px、无边框、hover 时#e8e8e8背景淡染。

危险按钮：背景#da1e28（Red 60）、文字#ffffff、hover#b81921（Red 70）。

5.2 卡片与容器

• 背景：白主题下#ffffff，抬升卡片#f4f4f4（Gray 10）；
• 边框：无（扁平设计——多数卡片无边框无阴影）；圆角：0px；
• hover：可点击卡片背景变为#e8e8e8（Gray 10 hover）；
• 内容内边距：16px；
• 分区：靠背景色分层而非阴影（白 → Gray 10 → 白）。

5.3 输入与表单

• 背景：#f4f4f4（Gray 10）→--cds-field；文字：#161616；
• 内边距：0 16px（仅水平）；高度：40px（默认）、48px（大号）；
• 边框：无左右上边框，底部2px solid transparent；
• 底部边框激活态：2px solid #161616（Gray 100）；
• 聚焦：底部边框2px solid #0f62fe（Blue 60）→--cds-focus；
• 错误：底部边框2px solid #da1e28（Red 60）；
• 标签：12px IBM Plex Sans、0.32px 字距、Gray 70；帮助文本：12px、Gray 60；占位符：Gray 60（#6f6f6f）；
• 圆角：0px（顶部）——输入框锋锐直角。

5.4 导航

• 背景：#161616（Gray 100）——全宽深色桅杆式头栏；高度 48px；
• Logo：IBM 8 条杠 logo，深色底白字，左对齐；
• 链接：14px IBM Plex Sans、400、默认#c6c6c6（Gray 30）；hover 文字#ffffff；激活链接带底部边框指示器且文字#ffffff；
• 平台切换器：左对齐水平标签页；搜索：图标触发的滑出式搜索框；移动端：含左侧滑出面板的汉堡菜单。

5.5 链接

• 默认：#0f62fe（Blue 60），无下划线；hover：#0043ce（Blue 70），带下划线；
• 已访问：保持 Blue 60（无 visited 状态变化）；行内链接：正文中默认带下划线。

5.6 特征组件

• 内容块（Hero/Feature）：全宽交替白/Gray-10 背景带；60px 或 48px Display 字重标题左对齐；蓝色主按钮带箭头图标作 CTA；图片/插画在移动端右对齐或置于底部。
• Tile（可点击卡片）：背景#f4f4f4或#ffffff；hover 时全宽底部边框或背景变化；hover 时右下角出现箭头图标；无阴影——平面即身份。
• 标签：背景为 10% 不透明度的情境色（如 Blue 10、Red 10）；文字用对应 60 级色；内边距4px 8px；圆角24px（胶囊形——0px 规则的唯一例外）；12px、字重 400。
• 通知横幅：全宽条，通常 Blue 60 或 Gray 100 背景；白色 14px 文字；右侧关闭/解除图标。

5.7 仓库中的组件实证

design-systems/ibm/components.html 是打包的独立组件 fixture，完整实现了上述规则：.btn-primary引用var(--accent)/var(--accent-on)，.btn:focus-visible使用var(--focus-ring)（0 0 0 2px #ffffff, 0 0 0 4px #0f62fe），输入框input:focus用box-shadow双环表达聚焦。design-systems/ibm/components.manifest.json 进一步给出结构化索引：48 个选择器、26 个类、9 个组件组（buttons / inputs / cards / badges / links / typography / layout 等），并精确列出每个组件组引用的令牌集合——例如 buttons 组引用--accent、--accent-on、--radius-md、--space-5、--text-sm等。这份清单让 Agent 不必打开 HTML 即可知道"该组件需要哪些令牌"。

6. 布局原则

6.1 间距系统

• 基准单位：8px（Carbon 2x 网格）；
• 组件间距刻度：2px、4px、8px、12px、16px、24px、32px、40px、48px；
• 布局间距刻度：16px、24px、32px、48px、64px、80px、96px、160px；
• 最小单位：8px（最小可用间距）；组件内边距：通常 16px；卡片/瓦片间距：1px（发丝线）或 16px（标准）。

6.2 网格与容器

• 16 列网格（Carbon 2x 网格系统）；
• 最大内容宽度：1584px（最大断点）；列间距（gutter）：32px（移动端 16px）；
• 外边距：16px（移动端）、32px（平板及以上）；
• 为可读行长，内容通常跨 8–12 列；全出血区块与受限内容交替。

6.3 留白哲学

• 功能性密度：Carbon 偏好生产性密度而非广袤留白。区块比消费级设计系统填充得更紧凑——这反映了 IBM 的企业 DNA；
• 背景色分区：IBM 用交替背景色（白 → Gray 10 → 白）而非区块间大留白来实现视觉分离，以最少垂直空间达成区分；
• 一致的 48px 节奏：主要区块切换用 48px 垂直间距；Hero 区可用 80–96px。

6.4 圆角刻度

• 0px：主按钮、输入、瓦片、卡片——主导处理，Carbon 本质上是矩形；
• 2px：偶尔用于小交互元素（标签）；
• 24px：标签/徽标（胶囊形——唯一圆润例外）；
• 50%：头像圆形、图标容器。

6.5 令牌中的布局落地

design-systems/ibm/tokens.css 将间距固化为--space-1: 4px到--space-12: 48px的 8px 序列；区块纵向间距按设备分档（--section-y-desktop: 96px、--section-y-tablet: 72px、--section-y-phone: 48px，与文档中"Hero 80–96px、常规 48px"吻合）；容器宽度收敛为--container-max: 1312px，gutter 分三档（桌面 32px / 平板 24px / 手机 16px）。design-systems/ibm/tailwind-v4.css 通过@theme把这些变量映射为--color-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*等 Tailwind 主题键，让bg-accent、text-fg-2、rounded-sm（实际为 0px）这类工具类直接可用，且文件头明确声明"由 tokens.css 派生，tokens.css 才是事实源"。

7. 深度与层级

阴影哲学：Carbon 有意回避阴影。IBM 主要通过背景色分层实现深度——不是叠加 box-shadow，而是堆叠渐深的灰色表面。这造就了扁平、印刷感的美学，层级以颜色值而非模拟光照传达。阴影只用于真正悬浮于内容之上的元素（下拉、工具提示、模态）。这种克制赋予了罕见阴影以意义——在 Carbon 里，当某物浮起时，它很重要。

在令牌中，这体现为--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)（1px 描边替代阴影）、--elev-raised: 0 2px 6px rgba(0,0,0,0.12)三档，以及聚焦双环--focus-ring。从 components.html 的.panel可看到"边框 + 抬升阴影"仅用于需要浮起的容器，而普通卡片.tile只用--surface背景与--border描边。

8. 该做与不该做（Do & Don't）

应该做：

• 展示尺寸（42px 以上）用 IBM Plex Sans 300（Light）——轻盈是有意为之；
• 14px 正文 0.16px 字距、12px 说明 0.32px 字距；
• 按钮、输入、卡片、瓦片用 0px 圆角——矩形是系统的语言；
• 实现时引用--cds-*令牌名（如--cds-button-primary、--cds-text-primary）；
• 用背景色分层（白 → Gray 10 → Gray 20）而非阴影表达深度；
• 输入框用底部边框（非盒型）作为指示器；
• 保持 48px 默认按钮高度与容纳图标的非对称内边距；
• 只用 Blue 60（#0f62fe）一个强调色——一个蓝统治一切。

不该做：

• 不要把按钮角做圆——0px 半径是 Carbon 的身份；
• 卡片/瓦片禁用阴影——平面性是核心；
• 不引入额外强调色——IBM 的系统是单色 + 蓝；
• 不使用字重 700（粗体）——字阶到 600（半粗）为止；
• 展示尺寸文字不加字距——tracking 只用于 14px 及以下；
• 不用完整边框把输入框盒型化——Carbon 输入框只用底部边框；
• 不用渐变背景——IBM 表面是纯色扁平；
• 不偏离 8px 间距网格——所有值都应能被 8 整除（微调用 2px 和 4px）。

9. 响应式行为

9.1 断点

9.2 触控目标

• 按钮高度：48px 默认，最小 40px（紧凑）；导航链接：48px 行高以适配触控；
• 输入高度：40px 默认、48px 大号；图标按钮：48px 方形触控目标；移动端菜单项：全宽 48px 行。

9.3 折叠策略

• Hero：视口变窄时 60px Display → 42px → 32px 标题；
• 导航：全宽水平桅杆 → 汉堡 + 滑出面板；
• 网格：4 列 → 2 列 → 单列；瓦片/卡片：水平网格 → 垂直堆叠；
• 图片：保持宽高比、max-width: 100%；页脚：多列链接组 → 堆叠单列；区块内边距：48px → 32px → 16px。

9.4 图片行为

• max-width: 100%响应式图片；产品插画保持比例缩放；
• Hero 图片可从并排布局转为底部堆叠；数据可视化在移动端保持宽高比并支持横向滚动。

在 components.html 中可以看到相同的响应式折叠落地：@media (max-width: 1023px)把容器 gutter 与区块纵向间距降档（--container-gutter-tablet、--section-y-tablet），@media (max-width: 639px)再降一档到手机值；@media (max-width: 860px)将.hero、.lower、.metric-grid、.card-row全部切换为单列。

10. Agent 提示词指南（可直接复用）

10.1 快速颜色参考

• 主 CTA：IBM Blue 60（#0f62fe）；背景：白（#ffffff）；
• 标题文字：Gray 100（#161616）；正文：Gray 100（#161616）；辅助文字：Gray 70（#525252）；
• 表面/卡片：Gray 10（#f4f4f4）；边框：Gray 30（#c6c6c6）；
• 链接：Blue 60（#0f62fe）；链接 hover：Blue 70（#0043ce）；
• 聚焦环：Blue 60（#0f62fe）；错误：Red 60（#da1e28）；成功：Green 50（#24a148）。

10.2 组件提示词示例

• "在白背景上创建 Hero 区块：60px IBM Plex Sans 300 标题，行高 1.17，颜色 #161616；16px 400 副标题，行高 1.50，颜色 #525252，最大宽度 640px；蓝色 CTA 按钮（#0f62fe 背景、#ffffff 文字、0px 圆角、48px 高、14px 63px 14px 15px 内边距）。"
• "设计卡片瓦片：#f4f4f4 背景、0px 圆角、16px 内边距；标题 20px IBM Plex Sans 600、行高 1.40、颜色 #161616；正文 14px 400、字距 0.16px、行高 1.29、颜色 #525252；hover：背景变 #e8e8e8。"
• "构建表单字段：#f4f4f4 背景、0px 圆角、40px 高、16px 水平内边距；上方标签 12px 400、字距 0.32px、颜色 #525252；底部边框：默认 2px solid transparent，聚焦 2px solid #0f62fe；占位符 #6f6f6f。"
• "生成深色导航栏：#161616 背景、48px 高；IBM logo 白色左对齐；链接 14px IBM Plex Sans 400、颜色 #c6c6c6；hover：文字 #ffffff；激活：带 2px 底部边框的 #ffffff。"
• "构建标签组件：Blue 10（#edf5ff）背景、Blue 60（#0f62fe）文字、4px 8px 内边距、24px 圆角、12px IBM Plex Sans 400。"

10.3 迭代清单

1. 按钮、输入、卡片永远 0px 圆角——Carbon 中不可协商；
2. 字距只用于小字号：14px 用 0.16px、12px 用 0.32px——展示文字绝对禁止；
3. 三个字重：300（展示）、400（正文）、600（强调）——无粗体；
4. Blue 60 是唯一强调色——不引入任何辅助强调色调；
5. 深度来自背景色分层（白 →#f4f4f4→#e0e0e0），而非阴影；
6. 输入框只用底部边框，禁止整体盒型化；
7. 为保持 Carbon 兼容，令牌命名使用--cds-前缀；
8. 48px 是通用交互元素高度。

11. 在 OpenDesign 中使用该设计系统包

要让 Agent 实际产出 IBM 风格页面，正确姿势是组合使用仓库中的三个核心产物（路径见 design-systems/ibm/manifest.json 的files声明）：

1. 把 design-systems/ibm/tokens.css 粘贴进第一个 artifact 的<style>块（USAGE.md 第 3 步），之后所有组件 CSS 只引用var(--bg)、var(--accent)等令牌，不在组件内写裸色值；
2. 参考 design-systems/ibm/components.manifest.json 的组件组清单复用现成控件模式（buttons/inputs/cards 等），需要精确选择器与状态时再打开 design-systems/ibm/components.html；
3. 需要视觉核对时打开 design-systems/ibm/preview/colors.html、preview/typography.html、preview/spacing.html三个预览页。

若使用 Tailwind v4，可直接导入 design-systems/ibm/tailwind-v4.css（它内部已@import "./tokens.css"并通过@theme完成映射），从而获得bg-accent、text-fg-2、rounded-sm、shadow-raised、duration-fast等语义化工具类。需要审计证据时，design-systems/ibm/source/evidence.md 明确说明该包源自 OpenDesign 打包的 fixture，不宣称抓取过上游官网，source/token-contract.report.json 则提供令牌契约的逐行映射报告。

12. 总结

IBM Carbon 风格的本质可以浓缩为三句话：单蓝加灰阶的语义化颜色、Plex 三体字族的严格字阶、以及用"0px 圆角 + 背景色分层"构建的平面而精确的工程美学。OpenDesign 仓库把这份视觉规范固化成了规范正文（DESIGN 系列多语言文档）、机器可读清单（manifest.json、components.manifest.json）与可执行令牌（tokens.css、tailwind-v4.css、components.html）三层资产。对于 Agent 驱动的设计生成而言，规范文档负责"为什么"，令牌文件负责"怎么落地"，组件 fixture 负责"长什么样"——三层配合即可稳定复现这套企业级设计语言，并保证跨品牌切换时只需替换令牌层。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成