Intercom

---
version: alpha
name: "Intercom"
description: "Intercom 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Intercom 的 marketing canvas 是 soft cream-white ground（`{colors.canvas}` ≈ #f5f1ec），不是 pure white。这种温暖感就是品牌信号：editorial、calm、product-focused，而不是 bright SaaS。Cream canvas 之上放置 white floating cards（`{colors.surface-1}`）、thin hairline dividers（`{colors.hairline}`）与 charcoal type（`{colors.ink}` #111111）。

Display type 是 **Saans**，Intercom proprietary geometric sans，使用 weight 500，并带经过控制的 negative letter-spacing（72px display 上 -2.0px）。Body type 使用同一 family，weight 400。唯一 proprietary mono 是 **SaansMono**，谨慎用于 code snippet 与嵌入 marketing surface 的 product UI screenshot。

唯一 chromatic accent 是 **Fin Orange**（`{colors.fin-orange}` #ff5600），也就是 Intercom 的 AI-product brand color。它出现在 Fin product CTA、pricing 中的 Fin badge，以及少数 inline emphasis moment 上。它不是 system primary；system primary 是 charcoal `{colors.ink}`。Intercom 还维护一组小型 **report palette**（`{colors.report-blue}`、`{colors.report-green}`、`{colors.report-pink}`、`{colors.report-lime}`），用于 mockup 中展示的 in-product analytics surface。

Page rhythm 重度依赖 **product mockup**：每个 section 的核心内容都是 Intercom product UI 的 high-fidelity screenshot，并放在带 `{rounded.xl}` 16px corner 的 white card 中。Marketing chrome 有意保持安静，让 product 成为 protagonist。

**Key Characteristics:**
- **Cream canvas**（`{colors.canvas}` #f5f1ec）是品牌定义性 surface，既不是 white 也不是 gray，而是 deliberate warm。
- Product-screenshot-led page rhythm：每个 section 都以 product mockup card 为中心，marketing chrome 保持 minimal。
- **Saans** proprietary sans-serif 承载整个 hierarchy；SaansMono 只用于 code context。
- **Charcoal** `{colors.ink}`（#111111）是 system primary；button、headline、body type 都落在 charcoal 上。
- **Fin Orange**（`{colors.fin-orange}` #ff5600）是 AI product color；用于 Fin CTA 与 Fin badge，绝不装饰性使用。
- Display tracking 强烈负向收紧（72px 上 -2.0px）；body 保持 0。
- Card corner 保持克制：`{rounded.lg}` 12px 与 `{rounded.xl}` 16px；从不 pill-rounded，也不 square。

## Colors

> Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox.

### Brand & Accent
- **Charcoal** ({colors.ink}): System primary surface。Headline、body type、primary CTA pill background 都是 charcoal。
- **White** ({colors.on-primary}): Charcoal CTA 上的 text；floating card 的 canvas。
- **Fin Orange** ({colors.fin-orange}): AI-product accent。用于 Fin CTA、Fin badge 与少量 inline emphasis moment。
- **Report Orange** ({colors.report-orange}): 略不同的 orange，用于 in-product mockup 中的 report / analytics palette。
- **Brand Blue** ({colors.brand-blue}): Saturated brand blue（#0007cb），用于少量 marketing illustration。

### Surface
- **Canvas** ({colors.canvas}): 默认 page background，soft cream-white #f5f1ec。
- **Surface 1** ({colors.surface-1}): Pure white，用于 floating card（pricing、feature、product-mockup）。
- **Surface 2** ({colors.surface-2}): 稍深的 cream，用于 startup-discount banner、alt-row stripe。
- **Hairline** ({colors.hairline}): Card 上的 1px border，soft warm gray（#d3cec6）。
- **Hairline Soft** ({colors.hairline-soft}): FAQ row 与 footer column 之间更柔和的 divider。
- **Inverse Canvas** ({colors.inverse-canvas}): Pure black，只用于 testimonial / quote callout strip。
- **Inverse Surface 1** ({colors.inverse-surface-1}): 更亮一级，用于 dark context 中的 hovered footer item。

### Text
- **Ink** ({colors.ink}): 所有 headline、body type、button label，charcoal #111111。
- **Ink Muted** ({colors.ink-muted}): #626260 的 secondary type，用于 meta info、deselected pricing tab。
- **Ink Subtle** ({colors.ink-subtle}): #7b7b78 的 tertiary type，用于 footer column、helper text。
- **Ink Tertiary** ({colors.ink-tertiary}): #9c9fa5 的 quaternary type，用于 disabled、footnote。
- **Inverse Ink** ({colors.inverse-ink}): Black 上的 white，用于 quote-strip type。
- **Inverse Ink Muted** ({colors.inverse-ink-muted}): Black 上的 light gray，用于 quote-strip meta。

### Semantic & Report Palette (in-product mockups)
- **Error Red** ({colors.semantic-error}): Form validation、destructive state。
- **Success Green** ({colors.semantic-success}): Positive state（也就是 `{colors.report-green}`）。
- **Report Blue** ({colors.report-blue}): Analytics chart blue。
- **Report Pink** ({colors.report-pink}): Analytics chart pink。
- **Report Lime** ({colors.report-lime}): Analytics chart lime。
- **Report Cyan** ({colors.report-cyan}): Phone country selector accent。

Report palette 出现在 product UI mockup 内部；它们是 Intercom 的 in-product chart color，不是 marketing surface color。

## Typography

### Font Family

- **Saans** — Intercom proprietary geometric sans，fallback 为 `Saans Fallback, ui-sans-serif, system-ui`。承载 display、body、eyebrow 与 button。
- **SaansMono** — Proprietary mono，fallback 为 `SaansMono Fallback, ui-monospace`。用于 product mockup 中展示的 code snippet。

同一 family 承载整个 hierarchy。Hierarchy 由 size + weight + tracking 承担，而不是 family change。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 72px | 500 | 1.05 | -2.0px | 最大 hero headline |
| `{typography.display-lg}` | 56px | 500 | 1.10 | -1.4px | Section opener headline |
| `{typography.display-md}` | 40px | 500 | 1.15 | -0.8px | Sub-section headline |
| `{typography.headline}` | 28px | 500 | 1.20 | -0.5px | Pricing tier title、CTA banner |
| `{typography.card-title}` | 22px | 500 | 1.25 | -0.3px | Card title、feature card |
| `{typography.subhead}` | 20px | 400 | 1.40 | -0.2px | Lead body、intro paragraph |
| `{typography.body-lg}` | 18px | 400 | 1.50 | -0.1px | Hero subhead、lead paragraph |
| `{typography.body}` | 16px | 400 | 1.50 | 0 | Default body |
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body、footer |
| `{typography.caption}` | 12px | 400 | 1.40 | 0 | Caption、meta |
| `{typography.button}` | 15px | 500 | 1.20 | 0 | Pill / square button label |
| `{typography.eyebrow}` | 14px | 500 | 1.30 | 0 | Section eyebrow（sentence case） |
| `{typography.mono}` | 13px | 400 | 1.50 | 0 | Mockup 中 code 使用的 SaansMono |

### Principles

- **Weight 500 承载 display。** 500 的 Saans 读起来 confident，但不 bold。
- **Negative letter-spacing 随 size 缩放。** 72px 时 -2.0px（约 size 的 3%），到 body 降为 0。
- **Line-height 在 display 上收紧，在 body 上放松。** Display-xl 为 1.05，body 为 1.50。
- **Chrome 上不使用 mono。** SaansMono 存在于 product UI；marketing chrome 保持 Saans。
- **Eyebrow 使用 sentence case**，14px / 500 weight，不使用 all-caps tracking。

### Font Substitutes

如果不使用 Saans，实现时可用 **Söhne**（paid）、**Inter**（free，weight 500）或 **Geist Sans**（free）替代。Weight 500 的 Inter 是最接近的免费替代；SaansMono 可用 weight 400 的 **JetBrains Mono** 近似。

## Layout

### Spacing System

- **Base unit**：8px。
- **Tokens (front matter)**：`{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px。
- Card interior padding：pricing / feature card 使用 `{spacing.lg}` 24px；testimonial / discount card 使用 `{spacing.xl}` 32px；CTA banner 使用 `{spacing.xxl}` 48px。
- Pill button padding：10px vertical · 18px horizontal。

### Grid & Container

- Max content width 约 1280px。
- Card grid 在 desktop 为 3-up，tablet 为 2-up，mobile 为 1-up。
- Pricing tier grid 为 3-up；下方 comparison strip 按 tier 显示 checkmark。
- Product mockup card 横跨 full content width，它们是每个 section 的 protagonist。

### Whitespace Philosophy

Cream canvas 承担其他品牌中 white space 的工作。Section 通过充足的 vertical breathing room（`{spacing.section}` 96px）与 lift-onto-white card 分隔。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| 0 (flat) | 无 shadow，无 border | Body type、hero text、footer 的默认层级 |
| 1 (lift on cream) | `{colors.canvas}` cream 上的 `{colors.surface-1}` white background | Pricing card、feature card、product mockup |
| 2 (hairline lift) | `{colors.surface-1}` + 1px `{colors.hairline}` border | 需要额外 definition 的 floating tile |
| 3 (deep accent) | `{colors.inverse-canvas}` true black | Quote / testimonial callout strip |

Intercom 抵制 drop shadow。Depth 通过 white-on-cream 的 surface change 传达。

### Decorative Depth

- **Product UI mockup** 主导每个 section 的右列或 center band；它们是 screenshot，不是 illustration。
- **没有 atmospheric gradient、spotlight card、pastel section block。** Cream + white system 是刻意克制的。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.xs}` | 4px | Small chip、badge |
| `{rounded.sm}` | 6px | Inline tag |
| `{rounded.md}` | 8px | 所有 button、form input |
| `{rounded.lg}` | 12px | Pricing card、feature card、FAQ row |
| `{rounded.xl}` | 16px | Product mockup card |
| `{rounded.xxl}` | 24px | Oversized CTA banner |
| `{rounded.pill}` | 9999px | Tab toggle |
| `{rounded.full}` | 9999px | Avatar circle |

### Photography & Illustration Geometry

- Product UI screenshot 主导 marketing surface；它们位于 `{rounded.xl}` 16px tile 中。
- Customer logo tile 在 `{colors.canvas}` cream 上以小尺寸渲染（logo height 约 24–32px），没有 border。
- Testimonial card 中的 avatar circle 使用 `{rounded.full}`，尺寸 40–48px。

## Components

### Buttons

**`button-primary`** — Charcoal CTA。所有页面的默认 primary CTA。
- Background `{colors.ink}`、text `{colors.on-primary}`、type `{typography.button}`、padding 10px 18px、rounded `{rounded.md}`。
- Pressed state 位于 `button-primary-pressed`。

**`button-secondary`** — Cream 上的 white button。用于 secondary CTA。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.button}`、padding 10px 18px、rounded `{rounded.md}`。带 1px `{colors.hairline}` border。

**`button-tertiary`** — Plain text button。
- Background `{colors.canvas}`、text `{colors.ink}`、type `{typography.button}`、rounded `{rounded.md}`、padding 10px 18px。

**`button-fin`** — Fin Orange CTA，保留给 Fin AI product CTA。
- Background `{colors.fin-orange}`、text `{colors.on-primary}`、type `{typography.button}`、rounded `{rounded.md}`、padding 10px 18px。

### Pricing Tabs

**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing` 上的 pill-toggle。
- Default：`{colors.canvas}` background、`{colors.ink-muted}` text、rounded `{rounded.pill}`。
- Selected：`{colors.surface-1}` white background、`{colors.ink}` text；selected = lift onto white。

### Cards & Containers

**`pricing-card`** — `/pricing` 上的每个 tier。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.body}`、rounded `{rounded.lg}`、padding 24px。

**`pricing-card-featured`** — Featured / recommended tier，反转为 charcoal。
- Background `{colors.ink}`、text `{colors.on-primary}`，其他结构相同。

**`feature-card`** — 通用 feature highlight。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.body}`、rounded `{rounded.lg}`、padding 24px。

**`product-mockup-card`** — 主导性 card type，用来 framing 高保真的 product UI screenshot。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.body}`、rounded `{rounded.xl}`、padding 24px。

**`testimonial-card`** — 带 avatar + name + company 的 customer quote。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.body-lg}`、rounded `{rounded.lg}`、padding 32px。

**`startup-discount-card`** — “Startups get 90% off” tinted card。
- Background `{colors.surface-2}`、text `{colors.ink}`、type `{typography.body}`、rounded `{rounded.lg}`、padding 32px。

**`customer-logo-tile`** — Customer marquee 中的小 tile。
- Background `{colors.canvas}`、text `{colors.ink-muted}`、type `{typography.caption}`、rounded `{rounded.xs}`、padding 16px。

**`cta-banner`** — Page bottom 附近的 closing CTA panel。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.headline}`、rounded `{rounded.lg}`、padding 48px。

### Inputs & Forms

**`text-input`** + **`text-input-focused`** — Contact 与 search overlay 上的 form field。
- Background `{colors.surface-1}`、text `{colors.ink}`、type `{typography.body}`、rounded `{rounded.md}`、padding 10px 14px。

### FAQ

**`faq-row`** — Pricing FAQ 中的 expandable accordion row。
- Background `{colors.canvas}`、text `{colors.ink}`、type `{typography.body}`、rounded `{rounded.md}`、padding 24px。底部 1px `{colors.hairline-soft}` rule。

### Navigation

**`top-nav`** — Sticky cream bar：左侧 Intercom wordmark，中间 nav links，右侧 log-in + sign-up pair。
- Background `{colors.canvas}`、text `{colors.ink}`、type `{typography.body-sm}`、height 56px。

### Footer

**`footer`** — `{colors.canvas}` cream 上的 dense link grid，左侧 Intercom wordmark。
- Background `{colors.canvas}`、text `{colors.ink-muted}`、type `{typography.caption}`、padding 64px 32px。

## Do's and Don'ts

### Do

- 将 `{colors.canvas}` cream 保留为 system anchor surface，绝不要替换成 pure white。
- 通过把 card 从 cream 提升到 white（`{colors.surface-1}`）来建立 hierarchy。
- **`button-fin`** Fin Orange 只用于 Fin AI product CTA 与 Fin badge。
- Saans display 使用 weight 500，body 使用 400。
- 让 product UI screenshot 成为每个 section 的 protagonist。
- Card 使用 `{rounded.lg}` 12px，product mockup tile 使用 `{rounded.xl}` 16px。
- 按 display size 比例应用 negative tracking。

### Don't

- 不要用 pure white 作为 canvas。
- 不要把 Fin Orange 用作 section background 或 generic primary CTA。
- 不要给 floating card 添加 drop shadow。
- 不要引入第二个 display family。
- 不要把 CTA 做成 pill-round。
- 不要写 all-caps tracked eyebrow。
- 不要把 report palette color 提升为 brand-level surface。
- 不要在同一 viewport 同时组合 charcoal CTA 与 Fin Orange CTA。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Desktop-XL | 1440px | 默认 desktop layout |
| Desktop | 1280px | 保持 card grid 3-up |
| Tablet | 1024px | Card grid 3-up → 2-up |
| Mobile-Lg | 768px | Pricing comparison 变为 accordion；nav hamburger |
| Mobile | 480px | Single-column；display-xl 从 72px 缩放到约 32px |

### Touch Targets

- CTA 在所有 viewport 保持 ≥40px tap height。
- Pricing tab pill 保持 ≥40px tap height。
- Form input 在 touch 上保持 ≥44px tap target。

### Collapsing Strategy

- **Top nav**：768px 以下 link 折叠为 hamburger；primary CTA 保持可见。
- **Card grids**：1024px 处 3-up → 2-up，768px 以下 → 1-up。
- **Pricing comparison**：768px 以下折叠为 per-tier accordion。
- **Display type**：`{typography.display-xl}` 72px 在 mobile 上向 `{typography.display-md}` 40px 缩放。

### Image Behavior

- Product UI screenshot 保持 aspect ratio，绝不裁切。
- Marquee 中的 customer logo 可在 768px 以下从 6-up 折叠为 3-up。

## Iteration Guide

1. 一次只聚焦一个 component，并通过其 `components:` token name 引用。
2. 引入 section 时，先决定它位于 `{colors.canvas}` cream（default），还是提升到 `{colors.surface-1}` white card。
3. 默认 body 使用 `{typography.body}`、weight 400。
4. 编辑后运行 `npx @google/design.md lint DESIGN.md`。
5. 将新 variant 作为独立 component entry 添加。
6. 把 Fin Orange 当作 product accent：只用于 Fin CTA 与 Fin badge。
7. 每个 section 都以 product screenshot 为主导。

## Known Gaps

- **Report palette** 存在于 marketing mockup 内部渲染的 product analytics dashboard；这里为完整性记录，但它们不是 brand surface color。
- Form-field error 与 validation styling 在已检查页面中不可见。
- Dark mode 未记录，因为 marketing site 没有交付 dark theme。
- Helpdesk / inbox product surface 展示的是 in-product UI state，不属于正式 marketing chrome。
- Saans 与 SaansMono 是 proprietary；可以接受 open-source substitute（Inter、Söhne、Geist）。