Intercom

version: alpha name: Intercom-design-analysis description: "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA."

colors: primary: "#111111" on-primary: "#ffffff" ink: "#111111" ink-muted: "#626260" ink-subtle: "#7b7b78" ink-tertiary: "#9c9fa5" canvas: "#f5f1ec" surface-1: "#ffffff" surface-2: "#ebe7e1" inverse-canvas: "#000000" inverse-surface-1: "#313130" inverse-ink: "#ffffff" inverse-ink-muted: "#9c9fa5" hairline: "#d3cec6" hairline-soft: "#ebe7e1" fin-orange: "#ff5600" report-orange: "#fe4c02" report-blue: "#65b5ff" report-green: "#0bdf50" report-pink: "#ff2067" report-lime: "#b3e01c" report-cyan: "#03b2cb" brand-blue: "#0007cb" semantic-error: "#c41c1c" semantic-success: "#0bdf50"

typography: display-xl: fontFamily: Saans fontSize: 72px fontWeight: 500 lineHeight: 1.05 letterSpacing: -2.0px display-lg: fontFamily: Saans fontSize: 56px fontWeight: 500 lineHeight: 1.10 letterSpacing: -1.4px display-md: fontFamily: Saans fontSize: 40px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.8px headline: fontFamily: Saans fontSize: 28px fontWeight: 500 lineHeight: 1.20 letterSpacing: -0.5px card-title: fontFamily: Saans fontSize: 22px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.3px subhead: fontFamily: Saans fontSize: 20px fontWeight: 400 lineHeight: 1.40 letterSpacing: -0.2px body-lg: fontFamily: Saans fontSize: 18px fontWeight: 400 lineHeight: 1.50 letterSpacing: -0.1px body: fontFamily: Saans fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0 body-sm: fontFamily: Saans fontSize: 14px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0 caption: fontFamily: Saans fontSize: 12px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0 button: fontFamily: Saans fontSize: 15px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0 eyebrow: fontFamily: Saans fontSize: 14px fontWeight: 500 lineHeight: 1.30 letterSpacing: 0 mono: fontFamily: SaansMono fontSize: 13px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px 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.ink}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-primary-pressed: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px button-fin: backgroundColor: "{colors.fin-orange}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px pricing-card-featured: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px feature-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px product-mockup-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px testimonial-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: 32px customer-logo-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 16px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 16px pricing-tab-selected: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 16px faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 24px cta-banner: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.headline}" rounded: "{rounded.lg}" padding: 48px startup-discount-card: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 32px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px

概览

Intercom 的营销画布是一块柔和的奶白底色（{colors.canvas} ≈ #f5f1ec）——而非纯白。这种暖意即是品牌信号：编辑感、平静、以产品为中心，而非明亮的 SaaS。在奶色画布之上，漂浮着白色卡片（{colors.surface-1}）、细线分隔（{colors.hairline}）与炭灰文字（{colors.ink} #111111）。

展示型字体是 Saans —— Intercom 的专有几何无衬线，字重 500，使用克制的负字距（72px 展示下 -2.0px）。正文字体是同一字族的 400 字重。唯一的专有等宽字体是 SaansMono，仅在营销表面嵌入的代码片段和产品 UI 截图中谨慎使用。

唯一的彩色点缀是 Fin Orange（{colors.fin-orange} #ff5600）—— Intercom 的 AI 产品品牌色。它出现在 Fin 产品 CTA、价格页上的 Fin 徽标，以及少数行内强调瞬间。它不是系统主色；系统主色是炭灰 {colors.ink}。Intercom 还维护一套小型报告调色板（{colors.report-blue}、{colors.report-green}、{colors.report-pink}、{colors.report-lime}），用于在模拟产品图中显示的内部产品分析表面。

页面节奏高度依赖产品模拟图：每个段落的核心都是一张 Intercom 产品 UI 的高保真截图，框在带 {rounded.xl} 16px 圆角的白色卡片中。营销界面刻意保持安静，让产品成为主角。

关键特征：

• 奶色画布（{colors.canvas} #f5f1ec）是品牌的定义性表面——既非白也非灰，是刻意的暖色。
• 产品截图引领的页面节奏：每个段落以产品模拟卡为中心，营销界面保持最少。
• Saans 专有无衬线承载整个层级；SaansMono 仅用于代码场景。
• 炭灰 {colors.ink}（#111111）是系统主色——按钮、标题、正文皆立于炭灰之上。
• Fin Orange（{colors.fin-orange} #ff5600）是 AI 产品色——用于 Fin CTA 与 Fin 徽标，从不作装饰。
• 展示型字距向负方向拉开（72px 时 -2.0px）；正文保持 0。
• 卡片圆角保持适中：{rounded.lg} 12px 与 {rounded.xl} 16px——既非胶囊圆角，也非方形。

配色

来源页面：intercom.com（首页）、/pricing、/helpdesk、/customers、/helpdesk/inbox。

品牌与点缀

• 炭灰（{colors.ink}）：系统主色表面。标题、正文、主 CTA 胶囊背景——皆为炭灰。
• 白色（{colors.on-primary}）：炭灰 CTA 上的文字；漂浮卡片的画布。
• Fin Orange（{colors.fin-orange}）：AI 产品点缀。用于 Fin CTA、Fin 徽标，以及少数行内强调瞬间。
• 报告橙（{colors.report-orange}）：一种略不同的橙色，用于报告/分析调色板内的产品模拟。
• 品牌蓝（{colors.brand-blue}）：饱和品牌蓝（#0007cb）——用于少数营销插画。

表面

• 画布（{colors.canvas}）：默认页面背景——柔和的奶白 #f5f1ec。
• 表面 1（{colors.surface-1}）：纯白——用于漂浮卡片（价格、特性、产品模拟）。
• 表面 2（{colors.surface-2}）：略深的奶色——初创折扣横幅、交替行条纹。
• 细线（{colors.hairline}）：卡片 1px 边框——柔和暖灰（#d3cec6）。
• 细线 柔（{colors.hairline-soft}）：FAQ 行与页脚列之间的更柔分隔线。
• 反色画布（{colors.inverse-canvas}）：纯黑——仅用于证言/引用横幅条。
• 反色表面 1（{colors.inverse-surface-1}）：高一档——暗色场景中的悬浮页脚项。

文字

• 墨色（{colors.ink}）：所有标题、正文、按钮标签——炭灰 #111111。
• 墨色 弱（{colors.ink-muted}）：次级文字 #626260——元信息、未选中的价格标签。
• 墨色 柔（{colors.ink-subtle}）：三级文字 #7b7b78——页脚列、辅助文字。
• 墨色 第三（{colors.ink-tertiary}）：四级文字 #9c9fa5——禁用、脚注。
• 反色墨色（{colors.inverse-ink}）：黑色上的白色——引用条文字。
• 反色墨色 弱（{colors.inverse-ink-muted}）：黑色上的浅灰——引用条元信息。

语义与报告调色板（产品模拟内）

• 错误红（{colors.semantic-error}）：表单校验、破坏性状态。
• 成功绿（{colors.semantic-success}）：正面状态（同时为 {colors.report-green}）。
• 报告蓝（{colors.report-blue}）：分析图表蓝。
• 报告粉（{colors.report-pink}）：分析图表粉。
• 报告青柠（{colors.report-lime}）：分析图表青柠。
• 报告青（{colors.report-cyan}）：电话国家选择器点缀。

报告调色板出现在产品 UI 模拟内部——这些是 Intercom 产品内的图表颜色，而非营销表面颜色。

字体排版

字体族

• Saans —— Intercom 的专有几何无衬线，回退 Saans Fallback, ui-sans-serif, system-ui。承载展示、正文、引标与按钮。
• SaansMono —— 专有等宽字体，回退 SaansMono Fallback, ui-monospace。用于产品模拟中显示的代码片段。

同一字族承载整个层级。层级由字号 + 字重 + 字距承担，而非字族切换。

层级

原则

• 字重 500 承载展示。Saans 500 字重读起来自信而不粗体。
• 负字距随字号缩放。72px 时 -2.0px（约字号 3%），正文降为 0。
• 展示紧凑，正文宽松。display-xl 行高 1.05，body 行高 1.50。
• 界面无等宽字体。SaansMono 位于产品 UI 内；营销界面保持 Saans。
• 引标采用句式首字母大写 14px / 500 字重——无大写加字距。

字体替代说明

如果没有 Saans，合适的替代包括 Söhne（付费）、Inter（免费，500 字重）、或 Geist Sans（免费）。Inter 的 500 字重是最接近的免费替代；SaansMono 可用 400 字重的 JetBrains Mono 近似。

布局

间距体系

• 基础单位：8px。
• 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。
• 胶囊按钮内边距：垂直 10px · 水平 18px。

网格与容器

• 最大内容宽度约 1280px。
• 卡片网格：桌面 3 列，平板 2 列，移动 1 列。
• 价格档位网格 3 列；下方对比条按档位显示对勾。
• 产品模拟卡横跨完整内容宽度——它们是每个段落的主角。

留白哲学

奶色画布承担了其他品牌中白色空间的工作。段落之间靠充裕的垂直呼吸空间（{spacing.section} 96px）以及抬升至白色卡片的视觉效果分隔。

层次与深度

Intercom 抵制投影。深度通过白叠奶的表面变化传达。

装饰性深度

• 产品 UI 模拟主导每个段落的右栏或中央区——这些是截图，而非插画。
• 无氛围渐变、无聚光卡片、无淡彩段落块。奶色 + 白色系统刻意克制。

形状

圆角体系

摄影与插画几何

• 产品 UI 截图主导营销表面；它们位于 {rounded.xl} 16px 瓦片中。
• 客户 Logo 瓦片在 {colors.canvas} 奶色上以小尺寸（约 24–32px Logo 高度）呈现，无边框。
• 证言卡中的头像圆形使用 {rounded.full}，尺寸 40–48px。

组件

按钮

button-primary —— 炭灰 CTA。所有页面的默认主 CTA。

• 背景 {colors.ink}，文字 {colors.on-primary}，字体 {typography.button}，内边距 10px 18px，圆角 {rounded.md}。
• 按下状态见 button-primary-pressed。

button-secondary —— 奶色上的白色按钮。用于次级 CTA。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.button}，内边距 10px 18px，圆角 {rounded.md}。1px {colors.hairline} 边框。

button-tertiary —— 纯文字按钮。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

button-fin —— Fin Orange CTA——保留给 Fin AI 产品 CTA。

• 背景 {colors.fin-orange}，文字 {colors.on-primary}，字体 {typography.button}，圆角 {rounded.md}，内边距 10px 18px。

价格标签页

pricing-tab-default + pricing-tab-selected —— /pricing 上的胶囊切换。

• 默认：{colors.canvas} 背景，{colors.ink-muted} 文字，圆角 {rounded.pill}。
• 选中：{colors.surface-1} 白色背景，{colors.ink} 文字——选中即抬升到白。

卡片与容器

pricing-card —— /pricing 上的每个档位。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 24px。

pricing-card-featured —— 推荐档位——反转为炭灰。

• 背景 {colors.ink}，文字 {colors.on-primary}，其余结构相同。

feature-card —— 通用特性亮点。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 24px。

product-mockup-card —— 主导卡型——框住高保真产品 UI 截图。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.xl}，内边距 24px。

testimonial-card —— 带头像 + 姓名 + 公司的客户引用。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body-lg}，圆角 {rounded.lg}，内边距 32px。

startup-discount-card —— "Startups get 90% off" 染色卡。

• 背景 {colors.surface-2}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.lg}，内边距 32px。

customer-logo-tile —— 客户跑马灯中的小瓦片。

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

cta-banner —— 页面底部的收尾 CTA 面板。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.headline}，圆角 {rounded.lg}，内边距 48px。

输入与表单

text-input + text-input-focused —— 联系与搜索覆盖层上的表单字段。

• 背景 {colors.surface-1}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.md}，内边距 10px 14px。

FAQ

faq-row —— 价格 FAQ 中的可展开手风琴行。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body}，圆角 {rounded.md}，内边距 24px。底部 1px {colors.hairline-soft} 线条。

导航

top-nav —— 黏性奶色栏，左侧 Intercom 字标，中间导航链接，右侧登录 + 注册组合。

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-sm}，高度 56px。

页脚

footer —— {colors.canvas} 奶色上的密集链接网格，左侧 Intercom 字标。

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

推荐与避免

推荐

• 保留 {colors.canvas} 奶色作为系统的锚定表面——永不替换为纯白。
• 卡片从奶色抬升到白色（{colors.surface-1}）以建立层级。
• button-fin Fin Orange 仅用于 Fin AI 产品 CTA 与 Fin 徽标。
• Saans 展示 500 字重配正文 400 字重。
• 每个段落以产品 UI 截图作为主角。
• 卡片用 {rounded.lg} 12px，产品模拟瓦片用 {rounded.xl} 16px。
• 负字距按比例应用于展示型字号。

避免

• 不要把画布用纯白。
• 不要把 Fin Orange 用作段落背景或通用主 CTA。
• 不要给漂浮卡片加投影。
• 不要引入第二种展示字族。
• 不要把 CTA 圆成胶囊。
• 不要写大写加字距的引标。
• 不要把报告调色板的颜色提升到品牌级表面。
• 不要在同一视口混用炭灰 CTA 与 Fin Orange CTA。

响应式行为

断点

触摸目标

• CTA 在各视口保持 ≥40px 点击高度。
• 价格标签胶囊保持 ≥40px 点击高度。
• 表单输入在触摸上保持 ≥44px 点击目标。

折叠策略

• 顶导：768px 以下链接折叠为汉堡菜单；主 CTA 保持可见。
• 卡片网格：1024px 时 3 列 → 2 列，768px 以下 1 列。
• 价格对比：768px 以下折叠为按档位手风琴。
• 展示型字体：{typography.display-xl} 72px 在移动端向 {typography.display-md} 40px 缩放。

图片行为

• 产品 UI 截图保持宽高比且永不裁剪。
• 跑马灯中的客户 Logo 768px 以下可从 6 列折叠为 3 列。

迭代指南

1. 一次只聚焦一个组件，并以其 components: token 名引用。
2. 引入段落时，先判断它位于 {colors.canvas} 奶色（默认）还是抬升到 {colors.surface-1} 白卡。
3. 正文默认 {typography.body} 400 字重。
4. 编辑后运行 npx @google/design.md lint DESIGN.md。
5. 新增变体作为独立组件条目。
6. 把 Fin Orange 视为产品点缀：仅用于 Fin CTA 与 Fin 徽标。
7. 每个段落以产品截图开篇。

已知缺口

• 报告调色板位于营销模拟内呈现的产品分析仪表板中；为完整性而文档化，但并非品牌表面颜色。
• 表单字段错误与校验样式在所检视页面中不可见。
• 暗色模式未文档化，因为营销站点不发布暗色主题。
• helpdesk / inbox 产品表面显示的 UI 状态不属于正式营销界面。
• Saans 与 SaansMono 是专有字体；可接受开源替代（Inter、Söhne、Geist）。