IBM Carbon 设计系统规范实战：从视觉语言到 Token 化落地（OpenDesign design-systems/ibm 包全解）

IBM Carbon 设计系统规范实战从视觉语言到 Token 化落地OpenDesign design-systems/ibm 包全解【免费下载链接】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本文基于 OpenDesign 仓库design-systems/ibm包的核心规范文档DESIGN-ar.md展开系统拆解 IBM Carbon Design System 的视觉语言——从#0f62fe单一强调色、IBM Plex 字体族、0px 圆角方角美学到 8px 间距网格与--cds-*Token 架构。读者读完可获得一套可直接复用的企业级设计规范参数表以及如何在该仓库的tokens.css、design-tokens.json、components.html等落地文件中对照使用的实战方法适合希望用 AI 生成IBM 风格页面或为设计系统做 Token 化改造的工程师与设计 Agent 使用者。1. 设计定位作为工程规范的视觉系统IBM 官网的数字呈现本质上是 Carbon Design System 的完整具象化——一套严谨到像以网页形式呈现的工程规格书的设计语言。它建立在严格的白/黑/单一蓝色三元结构之上白色画布#ffffff 近黑正文#161616一个永不妥协的强调色IBM Blue 60#0f62fe这不是初创公司式活泼的极简主义而是把企业级精确度浓缩进每一个像素每个元素都落在 Carbon 严格的 2x 网格上每个颜色都映射为语义 Token每个间距值都被 8px 基本单位吸附。其视觉结构的核心秘密在于整层视觉实现只是包在严谨系统外的一层薄壳。按钮不内置颜色而是引用--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-active这种Token 化 变量级换肤的架构在视觉上等价于一个强类型接口API——设计层与实现层彻底解耦。关键特性速览展示级排版使用 IBM Plex Sans 300Light——用克制的字体传达企业庄重感IBM Plex Mono 承载代码与技术内容小字号下保持 0.16px 字距唯一强调色 IBM Blue 60#0f62fe——每个交互元素、每个 CTA、每个链接Carbon Token 系统--cds-*驱动全部语义颜色支持在变量层面完成主题切换8px 间距网格严格对齐无任意值卡片扁平无边框浮于 Gray 10#f4f4f4表面——用背景色叠加而非阴影制造层次输入框仅使用底部边框不封框——Carbon 标志性表单形态主按钮border-radius: 0px——直角不妥协、不圆润。2. 颜色系统与 Token 角色2.1 三大主色颜色色值角色IBM Blue 60#0f62fe唯一交互色主按钮、链接、焦点态、激活指示白色#ffffff页面背景、卡片表面、蓝底按钮文字--cds-backgroundGray 100#161616主文本、标题、深色表面、导航栏、页脚--cds-text-primary2.2 中性灰阶Gray 家族Token 层级色值用途Gray 100#161616主文本、标题、深色界面、页脚背景Gray 90#262626次要深色表面、深色背景上的 hover 态Gray 80#393939第三级深色表面、激活态Gray 70#525252次要文本、辅助文本、描述--cds-text-secondaryGray 60#6f6f6f占位符文本、禁用文本Gray 50#8d8d8d禁用图标、淡化标签Gray 30#c6c6c6边框、分隔线、输入框下边框--cds-border-subtleGray 20#e0e0e0浅边框、卡片描边Gray 10#f4f4f4次级表面背景、卡片填充、交替行--cds-layer-01Gray 10 Hover#e8e8e8Gray 10 表面的 hover 态2.3 交互态蓝色阶色值用途Blue 60#0f62fe主交互按钮、链接、焦点--cds-link-primary/--cds-button-primaryBlue 70#0043ce链接 hover 态--cds-link-primary-hoverBlue 80#002d9c蓝色元素的激活/按下态Blue 10#edf5ff蓝色调表面、选中行背景Focus Blue#0f62fe--cds-focus聚焦元素 2px 内边框Focus Inset#ffffff--cds-focus-inset深色背景上的白色内环2.4 支持与状态色Red 60#da1e28错误、危险--cds-support-errorGreen 50#24a148成功--cds-support-successYellow 30#f1c21b警告--cds-support-warningBlue 60#0f62fe信息提示--cds-support-info。2.5 暗色主题Gray 100 主题角色Token / 值说明背景Gray 100#161616--cds-backgroundLayer 01Gray 90#262626卡片与容器表面Layer 02Gray 80#393939更高层级表面主文本Gray 10#f4f4f4--cds-text-primary次要文本Gray 30#c6c6c6--cds-text-secondary浅边框Gray 80#393939--cds-border-subtle交互Blue 40#78a9ff深色背景下链接与交互元素提亮以保证对比度3. 排版系统3.1 字体族主字体IBM Plex Sans回退Helvetica Neue, Arial, sans-serif等宽字体IBM Plex Mono回退Menlo, Courier, monospace衬线字体有限使用IBM Plex Serif用于编辑与表达型语境图标字体ibm_icons20px 专用图标字形。3.2 完整层级表角色字体字号字重行高字距备注Display 01IBM Plex Sans60px (3.75rem)300 (Light)1.17 (70px)0最大冲击力细字重呈现优雅Display 02IBM Plex Sans48px (3.00rem)300 (Light)1.17 (56px)0次级 Hero响应式替代Heading 01IBM Plex Sans42px (2.63rem)300 (Light)1.19 (50px)0表达型标题Heading 02IBM Plex Sans32px (2.00rem)400 (Regular)1.25 (40px)0章节标题Heading 03IBM Plex Sans24px (1.50rem)400 (Regular)1.33 (32px)0子章节标题Heading 04IBM Plex Sans20px (1.25rem)600 (Semibold)1.40 (28px)0卡片标题、功能头部Heading 05IBM Plex Sans20px (1.25rem)400 (Regular)1.40 (28px)0更轻的卡片标题Body Long 01IBM Plex Sans16px (1.00rem)400 (Regular)1.50 (24px)0标准阅读文本Body Long 02IBM Plex Sans16px (1.00rem)600 (Semibold)1.50 (24px)0强调正文、标签Body Short 01IBM Plex Sans14px (0.88rem)400 (Regular)1.29 (18px)0.16px紧凑文本、注释Body Short 02IBM Plex Sans14px (0.88rem)600 (Semibold)1.29 (18px)0.16px加粗注释、导航项Caption 01IBM Plex Sans12px (0.75rem)400 (Regular)1.33 (16px)0.32px元数据、时间戳Code 01IBM Plex Mono14px (0.88rem)400 (Regular)1.43 (20px)0.16px行内代码、终端Code 02IBM Plex Mono16px (1.00rem)400 (Regular)1.50 (24px)0代码块Mono DisplayIBM Plex Mono42px (2.63rem)400 (Regular)1.19 (50px)0装饰性等宽 Hero3.3 排版原则大字号用细字重Carbon 表达型排版在 42px 及以上使用 300Light。这制造出独特张力——内容以企业权威发声而字形以印刷级的轻盈细语小字号精细字距14px 用 0.16px、12px 用 0.32px 字距。这些看似微小的值正是 Carbon 在紧凑尺寸下保持可读性的秘密武器——恰好撑开 IBM Plex 较窄的字形三个功能性字重300展示/表达、400正文/阅读、600强调/UI 标签。生产排版刻度中刻意缺席 700Bold生产力 vs 表达力生产力组合使用更紧凑的行高1.29适配高密度 UI表达组合使用更宽松的行高1.40–1.50服务营销与编辑内容。4. 组件格式规范4.1 按钮主按钮蓝色背景#0f62feBlue 60→--cds-button-primary文字#ffffff内边距14px 63px 14px 15px非对称——为后续图标预留空间边框1px solid transparent圆角0px直角是 Carbon 的标志性特征高度 48px默认、40px紧凑、64px表达型Hover#0353e9Blue 60 Hover→--cds-button-primary-hoverActive#002d9cBlue 80→--cds-button-primary-active焦点内部2px solid #0f62fe 内部1px solid #ffffff。次按钮灰色背景#393939Gray 80、文字#ffffffHover#4c4c4cGray 70、Active#6f6f6fGray 60内边距与圆角同主按钮。三级按钮蓝色描边透明背景 transparent、文字#0f62fe边框1px solid #0f62feHover文字#0353e9 Blue 10 背景晕染圆角 0px。幽灵按钮背景 transparent、文字#0f62fe内边距14px 16px无边框Hover 背景晕染#e8e8e8。危险按钮背景#da1e28Red 60、文字#ffffffHover#b81921Red 70。4.2 卡片与容器背景白色主题下#ffffff抬升卡片#f4f4f4Gray 10无边框扁平设计——绝大多数卡片既无边框也无阴影圆角 0px与直角按钮美学一致可点击卡片 Hover背景过渡到#e8e8e8Gray 10 Hover内容内边距 16px分隔手段背景色叠加白 → Gray 10 → 白而非阴影。4.3 输入框与表单背景#f4f4f4Gray 10——--cds-field文字#161616Gray 100内边距0px 16px仅水平高度 40px默认、48px大号两侧与顶部无边框——底部2px solid transparent激活下边框2px solid #161616Gray 100焦点下边框2px solid #0f62feBlue 60——--cds-focus错误下边框2px solid #da1e28Red 60标签12px IBM Plex Sans、字距 0.32px、Gray 70辅助文本12px、Gray 60占位符 Gray 60#6f6f6f圆角 0px顶部——输入框同样锋利。4.4 导航背景#161616Gray 100——全宽深色页头高度 48pxLogo8 条杠 IBM 标志深底白色左对齐链接14px IBM Plex Sans、字重 400、默认#c6c6c6Gray 30链接 Hover文字#ffffff激活链接#ffffff 下边框指示条平台切换器左对齐水平标签页搜索图标触发滑出式搜索框移动端汉堡菜单 左侧滑出面板。4.5 链接默认#0f62feBlue 60无下划线Hover#0043ceBlue 70加下划线已访问保持 Blue 60访问态不变化正文内行内链接默认带下划线。4.6 特色组件内容块Hero / 功能块全宽白 / Gray-10 背景条交替左对齐 60px 或 48px 展示型标题CTA 为带箭头图标的蓝色主按钮图片/插画右对齐移动端下移堆叠。图块可点击卡片背景#f4f4f4或#ffffffHover 显示全宽下边框或背景过渡Hover 时右下角浮现箭头图标无阴影——扁平即身份。徽章 / 标签背景语境色 10% 透明度如 Blue 10、Red 10文字对应 60 阶色内边距4px 8px圆角 24px胶囊形——0px 规则的唯一例外字体 12px 字重 400。通知条全宽条带通常 Blue 60 或 Gray 100 背景白色 14px 文字右对齐关闭/拒绝图标。5. 布局原则5.1 间距系统基本单位 8pxCarbon 2x 网格组件间距刻度2、4、8、12、16、24、32、40、48px布局间距刻度16、24、32、48、64、80、96、160px最小可用间距 8px组件内边距通常 16px卡片/图块间空隙 1px细线或 16px标准。5.2 网格与容器16 列网格Carbon 2x 网格系统内容最大宽度 1584px最大断点列间隙 32px移动端 16px外边距移动端 16px平板及以上 32px内容通常横跨 8–12 列以保证可读行长全宽区块与受限内容交替排布。5.3 留白哲学功能性密度Carbon 偏好生产力密度而非大留白——区块比消费级设计系统更紧凑这反映了 IBM 的企业基因背景色分区不依赖区块间巨大留白而是用交替背景色白 → Gray 10 → 白以最小垂直空间完成视觉分隔48px 恒定节奏主要区块过渡使用 48px 垂直间距Hero 区可用 80–96px。5.4 圆角刻度0px主按钮、输入框、图块、卡片——主流处理Carbon 本质是直角2px偶尔用于小型交互元素徽章24px徽章/标签胶囊形——唯一的圆形例外50%头像圆、图标容器。6. 深度与高度层级处理用途扁平0 级无阴影背景#ffffff页面默认表面Layer 01无阴影背景#f4f4f4卡片、图块、交替区块Layer 02无阴影背景#e0e0e0Layer 01 内的抬升面板抬升0 2px 6px rgba(0,0,0,0.3)下拉菜单、提示、溢出菜单覆盖同上 暗色遮罩模态对话框、侧滑面板焦点内部2px solid #0f62fe1px solid #ffffff键盘焦点环下边框底部2px solid #161616激活输入框、激活标签页指示条阴影哲学Carbon 刻意回避阴影。IBM 主要通过背景色叠加实现层次——以渐深灰阶堆叠表面而非添加 box-shadow。这塑造出受印刷启发的扁平美学层级通过色值而非光线模拟表达。阴影被严格保留给真正的浮动元素下拉、提示、模态因为元素确实与内容重叠。这种克制让罕见的阴影产生意义——在 Carbon 中某物一旦浮起就代表有明确含义。7. 该做与不该做应当展示字号42px使用 IBM Plex Sans 300 字重——轻盈是刻意设计14px 正文应用 0.16px、12px 注释应用 0.32px 字距按钮、输入框、卡片、图块一律border-radius: 0px——直角即系统实现时引用--cds-*Token 名如--cds-button-primary、--cds-text-primary用背景色叠加白 → Gray 10 → Gray 20表达深度而非阴影输入框指示用下边框非整框保持按钮默认高度 48px 与非对称内边距以容纳图标应用 Blue 60#0f62fe为唯一强调色——一个蓝统治一切。不该做不要圆化按钮角——0px 半径是 Carbon 的身份不要给卡片或图块加阴影——扁平是意图不要引入额外强调色——IBM 系统是单色 蓝不要用 700 字重——刻度止于 600半粗不要给展示字号加字距——字距只用于 14px 及以下不要给输入框加完整边框——Carbon 输入框只用下边框不要使用渐变背景——IBM 表面是扁平的纯色不要偏离 8px 间距网格——每个值都应能被 8 整除2px、4px 用于微调。8. 响应式行为8.1 断点名称宽度主要变化Small (sm)320px单列、汉堡导航、16px 边距Medium (md)672px开始两列网格、内容扩展Large (lg)1056px完整导航可见、3–4 列网格X-Large (xlg)1312px最大内容密度、宽布局Max1584px内容最大宽度居中带边距8.2 触控目标按钮高度默认 48px至少 40px紧凑导航链接48px 行高以便触控输入框高度默认 40px、大号 48px图标按钮48px 方形触控目标移动端菜单项48px 全宽行。8.3 折叠策略Hero60px → 42px → 32px 标题随视口收窄降级导航全宽水平页头 → 汉堡 滑出面板网格4 列 → 2 列 → 1 列图块/卡片横向网格 → 纵向堆叠图片保持宽高比max-width: 100%页脚多列链接组 → 单列堆叠区块内边距48px → 32px → 16px。8.4 图片行为响应式图片使用max-width: 100%产品插图按比例缩放Hero 图可从并排转为下方堆叠数据可视化保持宽高比移动端支持横向滚动。9. Agent 速查指南可直接使用的 Prompt 素材9.1 快速颜色参考主 CTAIBM Blue 60#0f62fe背景白#ffffff标题文本Gray 100#161616正文Gray 100#161616次要文本Gray 70#525252表面/卡片Gray 10#f4f4f4边框Gray 30#c6c6c6链接Blue 60#0f62fe链接 HoverBlue 70#0043ce焦点环Blue 60#0f62fe错误Red 60#da1e28成功Green 50#24a148。9.2 组件 Prompt 示例Hero 区块创建白色背景 Hero 区块。标题 60px IBM Plex Sans 字重 300line-height 1.17颜色 #161616。副标题 16px 字重 400line-height 1.50颜色 #525252max-width 640px。蓝色 CTA 按钮背景 #0f62fe文字 #ffffffborder-radius 0px高度 48px内边距 14px 63px 14px 15px。卡片图块设计卡片图块背景 #f4f4f4border-radius 0px内边距 16px。标题 20px IBM Plex Sans 字重 600line-height 1.40颜色 #161616。正文 14px 字重 400letter-spacing 0.16pxline-height 1.29颜色 #525252。Hover背景过渡到 #e8e8e8。表单字段构建表单字段背景 #f4f4f4border-radius 0px高度 40px水平内边距 16px。顶部标签 12px 字重 400letter-spacing 0.32px颜色 #525252。下边框默认 2px solid transparent焦点 2px solid #0f62fe。占位符 #6f6f6f。深色导航栏创建深色导航栏背景 #161616高度 48px。白色 IBM Logo 左对齐。链接 14px IBM Plex Sans 字重 400颜色 #c6c6c6。Hover文字 #ffffff。Active#ffffff 加 2px 下边框。徽章组件构建徽章组件背景 Blue 10#edf5ff文字 Blue 60#0f62fe内边距 4px 8pxborder-radius 24px12px IBM Plex Sans 字重 400。9.3 迭代检查清单按钮、输入框、卡片一律border-radius: 0px——Carbon 中不可妥协只在字号 14px0.16px与 12px0.32px时加字距——绝不用于展示文本三个字重300展示、400正文、600强调——无粗体Blue 60 是唯一强调色——不引入第二强调色深度来自背景色叠加白 → #f4f4f4 → #e0e0e0而非阴影输入框只保留下边框绝不整框封边Token 命名使用--cds-前缀以保持 Carbon 兼容48px 是交互元素的全局高度。10. 在 OpenDesign 仓库中的落地实现本规范在仓库中并非停留在文档层面design-systems/ibm目录提供了完整的可执行设计包Design System 2.0按 USAGE.md 规定的顺序阅读与使用先读USAGE.md理解包契约读DESIGN.md掌握视觉意图、约束与反模式把tokens.css粘贴进第一个产物的style块再写组件 CSS用components.manifest.json做紧凑组件清单需要精确选择器或状态时打开components.html需要视觉检查时查看preview/页面colors.html、typography.html、spacing.html。10.1 tokens.css把规范编译成变量tokens.css 是整套规范的机器可读形态把 DESIGN 文档中的每个数值绑定为 CSS 自定义属性:root { --bg: #ffffff; --surface: #f4f4f4; --surface-warm: #edf5ff; /* 即 DESIGN 中的 Blue 10 选中行表面 */ --fg: #161616; --fg-2: #525252; /* 即 Gray 70 次要文本 */ --muted: #6f6f6f; /* 即 Gray 60 占位符/禁用文本 */ --border: #c6c6c6; /* 即 Gray 30 --cds-border-subtle */ --border-soft: #e0e0e0; /* 即 Gray 20 */ --accent: #0f62fe; /* 即 IBM Blue 60 --cds-button-primary */ --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #24a148; --warn: #f1c21b; --danger: #da1e28; --font-display: IBM Plex Sans, Helvetica Neue, Arial, sans-serif; --font-mono: IBM Plex Mono, SF Mono, Menlo, monospace; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 9999px; --elev-flat: none; --elev-raised: 0 2px 6px rgba(0, 0, 0, 0.12); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe; --motion-fast: 110ms; --motion-base: 180ms; --container-max: 1312px; }从源码结构看几个值得注意的实现决策强调色的 hover/active 用color-mix()计算--accent-hover: color-mix(in oklab, var(--accent), black 8%)在 oklab 色彩空间混合 8%/14% 黑色等价于 DESIGN 文档中 Blue 60 Hover#0353e9与 Blue 80 Active#002d9c的明度方向同时保持单一 Token 源直角即默认--radius-sm/md/lg全部为 0px只有--radius-pill: 9999px留给徽章胶囊与文档0px 为主流、24px 胶囊为唯一圆形例外完全对应圆角/间距/字号刻度 Token 化--space-1到--space-12对应 4–48px 组件间距刻度--text-xs到--text-4xl对应 12–60px 排版刻度--tracking-display: 0明确展示字号零字距三档区块垂直节奏--section-y-desktop: 96px、--section-y-tablet: 72px、--section-y-phone: 48px对应文档Hero 区 80–96px、主区块过渡 48px的留白哲学。10.2 design-tokens.jsonToken 合同与审计design-tokens.json 是od-design-tokens/v1格式的派生产物由tokens.css与source/token-contract.report.json自动生成而非手写。其 summary 显示共 56 个 Token56 个有源码背书source-backed其中 26 个为 A1 身份/结构层、4 个为 B 槽位层合同评分 100、评级 excellent、recommendRebuild: false。每个 Token 都带sources字段精确指向tokens.css的声明行如--bg指向tokens.css:8这使文档数值 → CSS 变量 → 审计报告形成可追踪的闭环。依据 manifest.json该包按od-design-system-project/v1模式组织design指向 DESIGN.mdtokens指向 tokens.css另有tailwind-v4.css与components.html两个派生/参考产物importMode: normalized并建议配套color与accessibility-baseline两条 craft 规范。10.3 使用约束与来源边界按 USAGE.md 与 source/evidence.md 的明确声明需要留意三条边界Token 名必须原样保留保持 schema Token 名不变跨品牌切换才能保持可靠--accent承担主操作、链接、焦点态与唯一焦点元素避免脱离 Token 层的裸色值在复制的:rootToken 块之外不要使用原始十六进制也不要绕过tokens.css单独重定义 Tailwind 或 design-token 值来源限定本包基于 OpenDesign 策划的捆绑 fixturebundled fixture派生不声称做过上游官网/仓库的新鲜抓取components.manifest.json 的 fixture 统计显示参考组件页含 1 个样式块、48 个选择器、26 个类、19 个元素新增组件配方应能在components.html或 DESIGN 文档中找到对应不应凭空添加。这套规范文档 Token 样式表 组件清单 审计报告的四层结构正是将本文前面全部视觉规范转化为可被 AI 生成引擎与前端工程直接消费的落地范式——如果你想复刻 IBM 风格的企业级界面直接引用design-systems/ibm/tokens.css的 Token 块再按第 4、5、6 节的组件与布局参数书写 CSS 即可。【免费下载链接】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），仅供参考