IBM

version: alpha name: IBM-design-analysis description: "An enterprise-marketing canvas faithful to Carbon Design System: white surfaces, charcoal type, IBM Blue (#0f62fe) as the single confident accent, and a deliberately flat-square aesthetic where corners stay at 0–4px. Type runs IBM Plex Sans at light weight 300 for display sizes (a brand signature) and 400/600 for body and emphasis. Cards live as thin-bordered tiles with no shadow; sections separate via subtle gray rows. The chrome is square, the typography is light, and the only color in the system is one assertive blue — the result reads as old-world enterprise gravitas reframed for the cloud era."

colors: primary: "#0f62fe" on-primary: "#ffffff" ink: "#161616" ink-muted: "#525252" ink-subtle: "#8c8c8c" canvas: "#ffffff" surface-1: "#f4f4f4" surface-2: "#e0e0e0" inverse-canvas: "#161616" inverse-surface-1: "#262626" inverse-ink: "#ffffff" inverse-ink-muted: "#c6c6c6" hairline: "#e0e0e0" hairline-strong: "#161616" blue-60: "#0043ce" blue-80: "#002d9c" blue-hover: "#0050e6" semantic-success: "#24a148" semantic-warning: "#f1c21b" semantic-error: "#da1e28" semantic-info: "#0f62fe"

typography: display-xl: fontFamily: IBM Plex Sans fontSize: 76px fontWeight: 300 lineHeight: 1.17 letterSpacing: -0.5px display-lg: fontFamily: IBM Plex Sans fontSize: 60px fontWeight: 300 lineHeight: 1.17 letterSpacing: -0.4px display-md: fontFamily: IBM Plex Sans fontSize: 42px fontWeight: 300 lineHeight: 1.20 letterSpacing: 0 headline: fontFamily: IBM Plex Sans fontSize: 32px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0 card-title: fontFamily: IBM Plex Sans fontSize: 24px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 subhead: fontFamily: IBM Plex Sans fontSize: 20px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0 body-lg: fontFamily: IBM Plex Sans fontSize: 18px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0 body: fontFamily: IBM Plex Sans fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0.16px body-sm: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.16px body-emphasis: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 600 lineHeight: 1.29 letterSpacing: 0.16px caption: fontFamily: IBM Plex Sans fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0.32px button: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.16px eyebrow: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0.16px

rounded: none: 0px xs: 2px sm: 4px md: 6px lg: 8px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-primary-pressed: backgroundColor: "{colors.blue-80}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" button-secondary: backgroundColor: "{colors.ink}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px button-danger: backgroundColor: "{colors.semantic-error}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 12px 16px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 24px feature-card-elevated: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 24px product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 32px hero-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: 48px cta-banner: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.headline}" rounded: "{rounded.none}" padding: 48px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px text-input-error: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px newsletter-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 11px 16px product-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 16px 20px product-tab-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-emphasis}" rounded: "{rounded.none}" padding: 16px 20px resource-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 16px customer-logo-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 24px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" height: 48px utility-bar: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.none}" height: 32px footer: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 32px

概览

IBM 的营销系统是 Carbon Design System——IBM 的开源企业设计系统——的忠实应用。主导表面是 {colors.canvas} 纯白，加上 {colors.surface-1} 浅灰用于抬升，炭灰色 {colors.ink}（#161616）用于文字，IBM 蓝 {colors.primary}（#0f62fe）作为单一品牌点缀。

决定性的选择是平面几何：每个 CTA、每张卡片、每个输入框、每个容器都使用方角（{rounded.none} 0px）与 1px 细线边框。这里没有圆角胶囊、没有柔和阴影、没有氛围渐变。系统是工程化的，而非风格化的。

IBM Plex Sans 承载整个字体层级。展示型字号（76 / 60 / 42px）使用 300 字重——IBM 标志性的轻量展示处理，让 76px 比同类品牌的 700 字重显得更沉稳。正文位于 400 字重，letter-spacing: 0.16px（Carbon 的精度细节），行高 1.50。声音读起来是谨慎、技术、可信。

系统极少使用颜色——IBM 蓝标记链接、主 CTA，以及少数铺满的 CTA 横幅。炭灰色承载白色之外的所有表面。结果是兼具企业厚重感却不僵硬：严谨、轻量、刻意克制。

关键特征：

• Carbon Design System——IBM 的营销界面就是 Carbon。按钮是方的，输入框是带底线的方形，圆角保持 0px。
• 轻量展示字体：42–76px 标题用 Plex Sans 300 字重，是品牌的字体签名。
• 单一点缀色：{colors.primary} IBM 蓝承载所有链接、主 CTA 与 CTA 横幅。没有第二种品牌色。
• 白色画布 + 浅灰（{colors.surface-1}）+ 炭灰（{colors.ink}）覆盖 95% 的表面。
• 页脚反转为炭灰（{colors.inverse-canvas} #161616）——分页线之上唯一的暗色表面。
• 卡片层级靠 1px 细线与表面变化承担，永不靠投影。
• 正文 letter-spacing: 0.16px 是 Carbon 的精度细节——这一小段正向字距是品牌声音的一部分。
• 页面节奏：工具栏 → 顶导 → 带轻量标题的英雄区 → 特性卡网格 → 客户 Logo 跑马灯 → 企业特性行 → 培训段 → 通讯/注册 CTA → 深色页脚。

配色

来源页面：ibm.com（首页）、/software/ai-productivity、/consulting、/products/cloud-pak-for-aiops、/products/bare-metal-servers、community.ibm.com。

品牌与点缀

• IBM 蓝（{colors.primary}）：唯一的品牌点缀。链接、主 CTA、CTA 横幅背景、聚焦环。
• 蓝 60（{colors.blue-60}）：悬浮链接状态。
• 蓝 80（{colors.blue-80}）：按下的主按钮。
• 蓝 悬浮（{colors.blue-hover}）：主按钮的悬浮状态。

表面

• 画布（{colors.canvas}）：默认页面背景。
• 表面 1（{colors.surface-1}）：浅灰（#f4f4f4）——输入字段、交替行条纹、淡段落带。
• 表面 2（{colors.surface-2}）：略深的灰（#e0e0e0）——禁用字段、分隔线的填充形式。
• 细线（{colors.hairline}）：卡片、输入框、分隔线的 1px 边框。
• 细线 强（{colors.hairline-strong}）：聚焦输入框底部 1px 炭灰下划线（Carbon 的标志性聚焦处理）。
• 反色画布（{colors.inverse-canvas}）：炭灰 #161616——页脚表面。
• 反色表面 1（{colors.inverse-surface-1}）：比反色画布高一档——页脚列分隔线、悬浮的页脚项。

文字

• 墨色（{colors.ink}）：所有标题与强调正文——炭灰 #161616。
• 墨色 弱（{colors.ink-muted}）：次级文字 #525252——元信息、副标题、页脚正文。
• 墨色 柔（{colors.ink-subtle}）：三级文字 #8c8c8c——禁用、辅助说明、说明文字。
• 反色墨色（{colors.inverse-ink}）：炭灰上的白色——页脚标题。
• 反色墨色 弱（{colors.inverse-ink-muted}）：炭灰上的浅灰——页脚正文。

语义

• 成功绿（{colors.semantic-success}）：Carbon 绿 50——成功状态。
• 警示黄（{colors.semantic-warning}）：Carbon 黄 30——警示状态。
• 错误红（{colors.semantic-error}）：Carbon 红 60——错误状态；危险按钮背景。
• 信息蓝（{colors.semantic-info}）：与主色相同——信息徽标。

字体排版

字体族

• IBM Plex Sans——IBM 的开源专有字体（任何用途免费）。几何、略人文，专为企业 UI 设计。回退：Helvetica Neue, Arial, sans-serif。

同一字族承载展示、正文与说明——没有展示 + 正文双字族搭配。层级靠字号 + 字重而非字族切换。Plex Sans 也以 SIL 开源字体许可证免费/开源——使其成为该清单上实施中最易替代的定制字。

层级

原则

• 轻量展示是品牌声音。Plex Sans 76px 标题用 300 字重，读起来是安静而权威的——切换到 700 会让它看起来像每个其他企业网站。
• Carbon 的 letter-spacing: 0.16px 在正文字号上是精度细节。不要去掉。
• 营销表面无等宽字体（Plex Mono 存在但只在产品表面）。
• 引标字体使用句式首字母大写 14px——Carbon 抵制其他企业品牌常见的大写加字距引标。
• 展示紧凑、正文宽松：display-xl 行高 1.17，body 行高 1.50——与字号成比例。

字体替代说明

IBM Plex Sans 免费且开源（SIL OFL 许可证），可在 Google Fonts 获取。它是推荐的实施字体。Plex 字族还包括 Plex Mono 与 Plex Serif，如果需要扩展字体需求。

布局

间距体系

• 基础单位：4px（Carbon 标志性的 4 像素网格）。
• Token（前言中）：{spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• 卡片内边距：特性卡 {spacing.lg} 24px；产品卡 {spacing.xl} 32px；英雄卡与 CTA 横幅 {spacing.xxl} 48px。
• 按钮内边距：垂直 12px · 水平 16px——Carbon 规范。
• 表单输入内边距：垂直 11px · 水平 16px。

网格与容器

• 桌面 Carbon 16 列网格，扩展到平板 8 列、移动 4 列。
• 最大内容宽度约 1584px（Carbon 最大网格断点）。
• 卡片网格：桌面 4 列，平板 2 列，移动 1 列。
• 客户 Logo 跑马灯在 flex 行中使用固定宽度瓦片，在较小视口水平滚动。

留白哲学

Carbon 用精确对齐 4 像素网格作为其留白系统。段落之间靠细灰行（{colors.surface-1}）而非大垂直间距分隔。内容本就密集——IBM 的客户期待在一页上看到大量内容，而非大量空白。

层次与深度

Carbon 在营销上抵制投影——深度靠表面变化与 1px 细线承载。例外是产品/应用表面（Carbon 为抬升面板文档化阴影 token），但营销站点几乎不使用。

装饰性深度

• 柔和的蓝色渐变背景出现在某些英雄插画背后——淡蓝到白色的水洗，温暖画布而不与标题争抢。
• 无氛围深度。无聚焦卡片、无淡彩段落块、无渐变面板。

形状

圆角体系

品牌承诺平面 0px 圆角。其他 token 为产品/移动表面存在，但在营销上很少出现。

摄影与插画几何

• IBM 交替使用摄影（人物、硬件、赛车）与抽象插画（几何网格、点状图案）。
• 图像框是平面的——无圆角。
• 客户 Logo 瓦片位于 {rounded.none} 0px 瓦片上，配 1px 细线边框。

组件

按钮

button-primary —— 蓝色实心 CTA。所有页面的默认主按钮。

• 背景 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button}，内边距 12px 16px，圆角 {rounded.none}。
• 按下状态见 button-primary-pressed（背景切换到 {colors.blue-80}）。

button-secondary —— 炭灰实心按钮——Carbon 的"次级"处理。

• 背景 {colors.ink}，文字 {colors.inverse-ink}，字体 {typography.button}，内边距 12px 16px，圆角 {rounded.none}。

button-tertiary —— 白色按钮配 1px 蓝色边框 + 蓝字。用于三级 CTA。

• 背景 {colors.canvas}，文字 {colors.primary}，字体 {typography.button}，圆角 {rounded.none}，内边距 12px 16px。（实施中的边框：1px {colors.primary}。）

button-ghost —— 纯文字 + chevron，悬浮前无背景。

• 背景 {colors.canvas}，文字 {colors.primary}，字体 {typography.button}，圆角 {rounded.none}，内边距 12px 16px。

button-danger —— Carbon 的破坏性变体。

• 背景 {colors.semantic-error}，文字 {colors.on-primary}，字体 {typography.button}，圆角 {rounded.none}，内边距 12px 16px。

卡片与容器

feature-card —— 首页与产品页的默认特性亮点瓦片。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.none}，内边距 24px。带 1px {colors.hairline} 描边。

feature-card-elevated —— 同一形态位于 {colors.surface-1} 底——用于最新内容轮播中的"Recommended"卡。

• 背景 {colors.surface-1}，其余结构相同。

product-card —— 更大的产品展示瓦片。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.none}，内边距 32px。

hero-card —— 带轻量标题、正文与 CTA 的英雄组合卡。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.display-md}，圆角 {rounded.none}，内边距 48px。

cta-banner —— 页面底部附近的全宽蓝色 CTA 面板。

• 背景 {colors.primary}，文字 {colors.on-primary}，字体 {typography.headline}，圆角 {rounded.none}，内边距 48px。

resource-tile —— 较小的文章 / 案例研究瓦片。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}，圆角 {rounded.none}，内边距 16px。

customer-logo-tile —— 首页客户跑马灯中的单个瓦片（Ferrari、Pfizer 等）。

• 背景 {colors.canvas}，文字 {colors.ink-muted}，字体 {typography.caption}，圆角 {rounded.none}，内边距 24px。1px 细线边框。

输入与表单

text-input + text-input-focused + text-input-error —— Carbon 的输入界面。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.none}，内边距 11px 16px。
• 聚焦状态把底部 1px 细线替换为 2px {colors.primary} 下划线（Carbon 的标志性聚焦处理）。
• 错误状态添加 2px {colors.semantic-error} 底部下划线。

newsletter-input —— 首页的"Stay connected"通讯采集。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.none}，内边距 11px 16px。相邻提交按钮为 button-primary。

标签页

product-tab + product-tab-selected —— 产品页与首页"Recommended"轮播上的水平标签条。

• 默认：{colors.canvas} 背景，{colors.ink-muted} 文字，圆角 {rounded.none}，内边距 16px 20px。底部 1px 细线。
• 选中：{colors.canvas} 背景，{colors.ink} 文字，{typography.body-emphasis} 字重，底部 2px {colors.primary} 下划线。同样的内边距/圆角。

导航

top-nav —— 黏性白色顶栏，左侧 IBM logo mark，中间导航类别，右侧搜索/登录图标。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}，高度 48px。1px 底部细线。

utility-bar —— 顶导之上的细灰带，配地区切换、联系方式、搜索快捷方式。

• 背景 {colors.surface-1}，文字 {colors.ink-muted}，字体 {typography.caption}，高度 32px。

页脚

footer —— 炭灰页脚（{colors.inverse-canvas}），左侧 IBM 字标，5–6 列说明字号链接。分页线之上唯一的反色表面。

• 背景 {colors.inverse-canvas}，文字 {colors.inverse-ink-muted}，字体 {typography.body-sm}，内边距 64px 32px。

推荐与避免

推荐

• 每个 CTA、卡片、输入框和容器都使用 {rounded.none} 0px。平面方形美学即品牌。
• Plex Sans 300 字重用于展示型字号（42px+），400 字重用于正文。克制加粗标题的冲动。
• 把 {colors.primary} IBM 蓝保留给主 CTA、链接、聚焦输入下划线和 CTA 横幅。不要用作卡片背景或引标色。
• 正文字号应用 letter-spacing: 0.16px。这是 Carbon 的精度细节，是字体声音的一部分。
• 用表面变化（canvas → surface-1）和 1px 细线建立卡片层级。跳过投影。
• 引标和段标签坚持句式首字母大写——Carbon 抵制大写加字距。
• 仅在页脚反转为 {colors.inverse-canvas}；页面其余部分保持浅色。

避免

• 不要圆角化按钮、卡片或输入框。即使 4px 圆角也会破坏 Carbon 外观。
• 不要加粗展示标题。Plex Sans 300 字重是品牌声音；700 字重会显得平庸。
• 不要在文档化的柔蓝英雄渐变之外添加氛围深度（渐变背景、投影、氛围覆盖层）。
• 不要引入第二种品牌色。IBM 蓝是唯一的彩色点缀；状态语义使用文档化的绿/黄/红。
• 不要在保留 letter-spacing: 0.16px 与 300 字重展示处理的前提下，用 Inter 或 Helvetica 替换 IBM Plex Sans。
• 不要使用胶囊形按钮。Carbon 用方角；胶囊读起来是另一个品牌。
• 不要写大写加字距的引标。Carbon 的引标是句式首字母大写 14px。

响应式行为

断点

触摸目标

• Carbon 规范：48px 最小点击目标。按钮与输入框在触摸视口保持 48px。
• 顶导链接在触摸视口从 36px 增长到 48px 点击高度。
• 标签条行保持 48px 点击高度。

折叠策略

• 顶导：672px 以下链接折叠为汉堡菜单覆盖层。Logo mark 和搜索图标保持在栏上。
• 工具栏：672px 以下隐藏以回收垂直空间。
• 卡片网格：1056px 时 4 列 → 2 列，672px 以下 1 列。
• 展示型字体：{typography.display-xl} 76px 在移动端向 42px 缩放，同时保留 300 字重处理。
• 页脚：6 列链接网格 → 平板 3 列 → 移动 1 列。

图片行为

• 跑马灯中的客户 Logo 保持宽高比，672px 以下可折叠为 2 行滚动。
• 英雄插画按比例缩放；672px 以下可堆叠在标题之上，而非并排。

迭代指南

1. 一次只聚焦一个组件，并以其 components: token 名引用。
2. 正文默认 {typography.body} 400 字重 letter-spacing: 0.16px。不要去掉字距。
3. 引入新段落时，先判断它位于 {colors.canvas}（默认）还是 {colors.surface-1}（交替带）。两种表面节奏就是节奏本身。
4. 编辑后运行 npx @google/design.md lint DESIGN.md。
5. 新增变体作为独立组件条目（button-primary-pressed、text-input-error、text-input-focused）。
6. 把 IBM 蓝视为稀缺：链接、主 CTA、CTA 横幅、聚焦下划线。除此之外即为漂移。
7. 抵制圆角。如果设计师推动加 4px 圆角，品牌就在远离 Carbon。

已知缺口

• IBM 的产品表面（cloud-pak、watson、datacap）有更丰富的 Carbon 组件用法（数据表、图表单元格、面包屑、上下文菜单），不在所检视的营销页面中——这些组件存在于 Carbon 文档而非营销提取中。
• 表单字段错误与校验样式在 Carbon 文档中有文档化；所检视页面未渲染错误状态。
• 暗色模式在 Carbon 中作为 Gray-100 主题文档化，但未在这些营销页面暴露——仅页脚反色。完整的暗色主题是单独的 Carbon 调色板，未在此提取。
• community.ibm.com 子域使用不同的界面（社区平台白标）近似 Carbon 但不严格——文档化的系统适用于 ibm.com 主域。