首页/风格学院/IBM Carbon

IBM Carbon 是什么风格?

IBM Carbon 示例

IBM Carbon 是为整天泡在控制台里的人设计的企业级系统:偏冷的浅灰页面、白色卡片、方正的转角,以及全屏唯一一种代表“可以点”的蓝。

IBM Carbon 速览

Carbon 是 IBM 的开源设计系统,IBM Cloud、Watson、Cognos 这些企业产品的界面都出自它。它不是一种情绪或潮流,而是一套能干活的工具包:令牌、组件、模式和规则,让几百个产品团队做出来的页面看上去像同一家公司的作品。这里描述的视觉语言来自它的 Gray 10 主题,也就是浅色版本:偏冷的浅灰页面上,白色卡片彼此紧挨着铺开。

只要知道看什么,这种风格很好认。转角是方的。层级不靠阴影,而靠明度,白与灰交替出现,用来表示哪一层压在哪一层上面。分隔线又细又安静。所有可交互的东西只用一种蓝,只有这一种,所以用户几分钟内就会学会:蓝色是操作,其余都是信息。

字体是另一半身份。整个界面只用 IBM Plex 一个家族,并按一套克制的字重阶梯来用:大标题用 Light,正文用 Regular,标签用 SemiBold,标识符和数字则用等宽字形。结果是密而不躁的观感:这是要看一整天、操作一整天的界面,不是让人看几秒钟就赞叹的界面。

IBM Carbon 用在文章页上

IBM Carbon 从何而来?

Carbon 出自 IBM Design,也就是 IBM 内部的设计组织,总部设在美国得克萨斯州奥斯汀。它在 2017 年与 IBM Plex 一起公开发布。这样搭配是有意为之:组件库告诉团队怎么搭,公司字体则告诉所有人,这家公司在屏幕上该用什么声音说话。

之后系统沿着清楚的阶段演进。2019 年的 Carbon v10 把系统重新围绕主题和一套严谨的令牌结构来组织。2022 年起的 v11 引入了层级令牌,把 Gray 10 外观所依赖的“白压灰、灰压白”层层叠放正式写成规则。每一步都让它少一点“风格指南”的味道,多一点“基础设施”的味道:工程师可以直接换主题,不必重画任何东西。

这条脉络背后有几个名字。Mike Abbink、Paul van der Laan 与 Pieter van Rosmalen 是和 IBM Plex 联系在一起的设计师,他们的工作给系统撑起了字体上的骨架,既不是中性的无衬线,也不是怀旧的企业衬线。Paul Rand 在二十世纪塑造了 IBM 的视觉形象,站在更远处,提醒人们 IBM 很早就把设计当作全公司的纪律,而不是装饰。

三条传统在这里汇合。第一是企业设计系统,即把品牌编码成可复用部件的做法。第二是 IBM 设计语言本身,延续了公司崇尚清晰与克制的习惯。第三是瑞士现代主义的网格纪律:十六栏网格、严格对齐,以及“让信息易读的是结构而不是装饰”的信念。

IBM Carbon 的视觉特征是什么?

色彩

页面是偏冷的浅灰,内容卡片是白色。唯一一种饱和的蓝专门留给操作、链接和聚焦,其他东西都不许和它争。其余工作全由灰阶完成:次要文字用中灰,分隔线用更浅的灰。红、橙、绿这类状态色只在真有事需要注意时才出现,所以它们始终保有含义。

字体

全站都是 IBM Plex。大标题用 Light 字重,让大字有一种轻盈、像工程图纸的气质,而不是在喊叫。正文用 Regular,标签和按钮用 SemiBold,等宽字形负责标识符、代码和数字,让一列列数据能对齐。文字左对齐、右侧自然参差,行距紧凑而均匀。

网格与间距

版面建在十六栏网格上,间距遵循一套小而重复的比例,所以各处空隙看上去彼此有关联。卡片是紧贴着铺开,而不是各自悬浮,页面因此读起来像一整块被细线分割的表面。密度是有意为之:控制台的价值就在于一屏装得下很多,而不必让用户滚动。

形状与层级

按钮、输入框、卡片、菜单,转角一律是方的。没有用柔和阴影去暗示高度,而是靠交替的明度区分层级:灰页上的白卡,白卡里的灰色输入区。分隔线细如发丝,用浅灰绘制。整体是平的,却不会让人迷糊,因为每一层都有自己的明度。

组件与聚焦

按钮是矩形,文字靠左、图标贴到最右边,让一列控件有一条统一的扫视线。聚焦用一圈粗的、向内收的招牌蓝框来表示,而不是发光,所以键盘用户永远知道自己在哪。输入框是淡色底加底边线,不用整圈描边。

气质与动效

气质是工程化的、克制的、很少出错。图像稀少,大多是示意图;图标是在严格网格上画的简洁象形;动效只讲功能,快速、有目的的过渡,用来确认一次操作而不是取悦谁。系统里没有任何东西想讨好你,它只想不挡你的路。

IBM Carbon 用在仪表盘上

谁塑造了 IBM Carbon?

Mike Abbink

Abbink 是与 IBM Plex 相关的设计师之一,这个字体家族给了 Carbon 它的声音。该家族与 Carbon 同在 2017 年发布,从 Light 到 SemiBold 再加一款等宽字形,整个界面的字体层级就建在这套字重阶梯上。

Paul van der Laan

van der Laan 被列为 IBM Plex 背后的设计师之一。他的工作属于 Carbon 的字体骨架,使系统在云控制台、分析工具和 AI 产品之间保持一致,而不必依赖装饰。

Pieter van Rosmalen

van Rosmalen 同样与 IBM Plex 的创作相关。他与 Abbink、van der Laan 一起,构成了“一套全公司字体如何成为与组件库并列、共同定义系统身份的伙伴”这个故事的一部分。

Paul Rand

Rand 在二十世纪塑造了 IBM 的视觉形象。他不是 Carbon 的作者,却是最广为人知的提醒:IBM 几代人都把清晰与克制当作公司价值,这正是这套系统生长的文化土壤。

今天怎么用 IBM Carbon?

做幻灯片时,Carbon 的语言适合朴素而笃定的封面:白色或浅灰底,左对齐的 Light 字重大标题,加一条蓝色强调条或细线。内容页最好做成紧贴着铺在灰底上的卡片,每张卡片只讲一件事。别想着加照片或渐变,这套系统的权威感恰恰来自它拒绝装饰。

做数据页和网页仪表盘,这里是它的原生地盘。表格、图表、状态面板放在白色卡片上,数字用等宽字形让各列对齐,筛选器和工具栏用方形按钮,标签靠左。蓝色只留给主要操作和选中状态,这样用户永远找得到哪里能点。一屏可以放很多信息,但分隔靠细线和明度,不要靠阴影。

做面向开发者或企业采购的定价页和产品宣传页,同样的克制读起来就是信任。把方案做成紧贴的卡片铺在灰页上,核心数字用 Light 字重,由一个蓝色按钮承担行动号召。这种外观传递的信息是:这是正经软件,不是玩具,而这往往正是采购团队想看到的。

做文章和文档时,把十六栏网格用足:窄栏放正文,宽一些的区域放代码示例和图示,两侧留出大片空网格。标题用 Light、正文用 Regular,层级平静清楚。代码和标识符一律切成等宽字形,让读者一眼知道哪些东西可以复制。

最常见的错误是把它做软。圆角、投影、第二种强调色、亲切的插画风格,每一样都会稀释 Carbon 的辨识度;混进另一种字体则会破坏它赖以成立的字重阶梯。第二个错误是把蓝色当装饰用:一旦蓝色出现在不能点的东西上,界面里最有用的那个信号就失效了。

IBM Carbon 用在幻灯片 · 封面上

IBM Carbon · 常见问题

IBM Carbon 是什么?

Carbon 是 IBM 的开源设计系统,是 IBM Cloud、Watson、Cognos 等产品的基础。它提供令牌、组件和规则,让许多团队能做出外观和行为像同一产品家族的界面。它在 2017 年与 IBM Plex 字体一同公开发布,并经历了 2019 年的 v10 与 2022 年起的 v11。

Gray 10 主题长什么样?

Gray 10 是浅色主题:偏冷的浅灰页面,白色卡片紧贴着铺在十六栏网格上,转角是方的,分隔线细而浅,所有可点击的东西只用一种蓝。层级靠明度交替而不是阴影,所有文字用 IBM Plex。

为什么 Carbon 只用一种蓝?

因为这种蓝是信号,不是装饰。只要它只出现在可操作的东西上,用户几分钟就能学会按它来扫视,界面其余部分就可以安心用中性灰而不失清晰。再加一种强调色就会模糊这个信号,而对一个人们要用一整天的工具来说,这很要紧。

Carbon 和瑞士设计有关系吗?

有,在精神上。它的来源说明里把瑞士现代主义的网格纪律列为它所属的潮流之一,你能在十六栏网格、左对齐文字,以及“结构承载意义”的信念里看到。Carbon 把这种纪律改造给了软件:它面对的是密集的表格、状态和聚焦框,而不是海报和印刷页面。

什么时候不该用 Carbon 式的外观?

当目标是温暖、好玩或情感叙事时就别用。消费类生活方式品牌、儿童产品或讲故事的落地页,放进这套系统都会显得冷。它最适合的是人们需要快速工作、比较数据并信任眼前信息的场景。

获取 IBM Carbon 完整设计系统
© 2026 Curio