Intercom

Overview

Intercom's marketing canvas is a soft cream-white ground (`{colors.canvas}` ≈ #f5f1ec) — not pure white. The warmth is the brand's signal: this is editorial, calm, and product-focused, not bright SaaS. On top of the cream canvas sit white floating cards (`{colors.surface-1}`), thin hairline dividers (`{colors.hairline}`), and charcoal type (`{colors.ink}` #111111).

Display type is **Saans** — Intercom's proprietary geometric sans — set at weight 500 with measured negative letter-spacing (-2.0px on 72px display). Body type is the same family at weight 400. The single proprietary mono is **SaansMono**, used sparingly for code snippets and product UI screenshots embedded in the marketing surface.

The single chromatic accent is **Fin Orange** (`{colors.fin-orange}` #ff5600) — Intercom's AI-product brand color. It surfaces on the Fin product CTA, the Fin badge in pricing, and a few inline emphasis moments. It is NOT a system primary; the system primary is charcoal `{colors.ink}`. Intercom also maintains a small **report palette** (`{colors.report-blue}`, `{colors.report-green}`, `{colors.report-pink}`, `{colors.report-lime}`) used inside in-product analytics surfaces shown in mockups.

The page rhythm is heavy on **product mockups**: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with `{rounded.xl}` 16px corners. The marketing chrome is intentionally quiet so the product can be the protagonist.

**Key Characteristics:**

• **Cream canvas** (`{colors.canvas}` #f5f1ec) is the brand's defining surface — neither white nor gray, deliberately warm.
• Product-screenshot-led page rhythm: every section centers a product mockup card, marketing chrome stays minimal.
• **Saans** proprietary sans-serif carries the entire hierarchy; SaansMono for code-only contexts.
• **Charcoal** `{colors.ink}` (#111111) is the system primary — buttons, headlines, body type all sit on charcoal.
• **Fin Orange** (`{colors.fin-orange}` #ff5600) is the AI product color — used on the Fin CTA and Fin badge, never decoratively.
• Display tracking pulls aggressively negative (-2.0px on 72px); body stays at 0.
• Card corners stay modest at `{rounded.lg}` 12px and `{rounded.xl}` 16px — never pill-rounded; never square.

Colors

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

Brand & Accent

• **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, primary CTA pill background — all charcoal.
• **White** ({colors.on-primary}): Text on charcoal CTAs; canvas of floating cards.
• **Fin Orange** ({colors.fin-orange}): The AI-product accent. Used on the Fin CTA, Fin badge, and a small set of inline emphasis moments.
• **Report Orange** ({colors.report-orange}): A slightly different orange used inside the report / analytics palette for in-product mockups.
• **Brand Blue** ({colors.brand-blue}): Saturated brand blue (#0007cb) — used on a small set of marketing illustrations.

Surface

• **Canvas** ({colors.canvas}): Default page background — soft cream-white #f5f1ec.
• **Surface 1** ({colors.surface-1}): Pure white — used for floating cards (pricing, feature, product-mockup).
• **Surface 2** ({colors.surface-2}): Slightly darker cream — startup-discount banner, alt-row stripes.
• **Hairline** ({colors.hairline}): 1px borders on cards — soft warm gray (#d3cec6).
• **Hairline Soft** ({colors.hairline-soft}): Even softer dividers between FAQ rows and footer columns.
• **Inverse Canvas** ({colors.inverse-canvas}): Pure black — only on the testimonial / quote callout strip.
• **Inverse Surface 1** ({colors.inverse-surface-1}): One step lighter — hovered footer items in dark contexts.

Text

• **Ink** ({colors.ink}): All headlines, body type, button labels — charcoal #111111.
• **Ink Muted** ({colors.ink-muted}): Secondary type at #626260 — meta info, deselected pricing tabs.
• **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #7b7b78 — footer columns, helper text.
• **Ink Tertiary** ({colors.ink-tertiary}): Quaternary type at #9c9fa5 — disabled, footnotes.
• **Inverse Ink** ({colors.inverse-ink}): White on black — quote-strip type.
• **Inverse Ink Muted** ({colors.inverse-ink-muted}): Light gray on black — quote-strip meta.

Semantic & Report Palette (in-product mockups)

• **Error Red** ({colors.semantic-error}): Form validation, destructive states.
• **Success Green** ({colors.semantic-success}): Positive states (also `{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.

The report palette appears INSIDE product UI mockups — these are Intercom's in-product chart colors, not marketing surface colors.

Typography

Font Family

• **Saans** — Intercom's proprietary geometric sans, fallback `Saans Fallback, ui-sans-serif, system-ui`. Carries display, body, eyebrow, and button.
• **SaansMono** — Proprietary mono, fallback `SaansMono Fallback, ui-monospace`. Used inside code snippets shown in product mockups.

The same family carries the entire hierarchy. Hierarchy is carried by size + weight + tracking, not by family change.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 72px | 500 | 1.05 | -2.0px | Largest hero headline |

| `{typography.display-lg}` | 56px | 500 | 1.10 | -1.4px | Section opener headlines |

| `{typography.display-md}` | 40px | 500 | 1.15 | -0.8px | Sub-section headlines |

| `{typography.headline}` | 28px | 500 | 1.20 | -0.5px | Pricing tier titles, 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 paragraphs |

| `{typography.body-lg}` | 18px | 400 | 1.50 | -0.1px | Hero subhead, lead paragraphs |

| `{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 | Captions, meta |

| `{typography.button}` | 15px | 500 | 1.20 | 0 | Pill / square button labels |

| `{typography.eyebrow}` | 14px | 500 | 1.30 | 0 | Section eyebrow (sentence case) |

| `{typography.mono}` | 13px | 400 | 1.50 | 0 | SaansMono for code in mockups |

Principles

• **Weight 500 carries display.** Saans at 500 reads as confident without bold.
• **Negative letter-spacing scales with size.** -2.0px at 72px (≈3% of size), down to 0 on body.
• **Line-heights tighten on display, relax on body.** 1.05 at display-xl, 1.50 at body.
• **No mono on chrome.** SaansMono lives in product UI; marketing chrome stays in Saans.
• **Eyebrow uses sentence case** at 14px / 500 weight — no all-caps tracking.

Note on Font Substitutes

If implementing without Saans, suitable substitutes include **Söhne** (paid), **Inter** (free, weight 500), or **Geist Sans** (free). Inter at weight 500 is the closest free substitute; SaansMono can be approximated with **JetBrains Mono** at weight 400.

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: `{spacing.lg}` 24px on pricing/feature cards; `{spacing.xl}` 32px on testimonial/discount cards; `{spacing.xxl}` 48px on CTA banners.
• Pill button padding: 10px vertical · 18px horizontal.

Grid & Container

• Max content width sits around 1280px.
• Card grids are 3-up at desktop, 2-up at tablet, 1-up at mobile.
• Pricing tier grid is 3-up; comparison strip below shows checkmarks per tier.
• Product mockup cards span full content width — they're the protagonist of every section.

Whitespace Philosophy

The cream canvas does the work white space would in another brand. Sections separate by ample vertical breathing room (`{spacing.section}` 96px) plus the lift-onto-white cards.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Default for body type, hero text, footer |

| 1 (lift on cream) | `{colors.surface-1}` white background on `{colors.canvas}` cream | Pricing cards, feature cards, product mockups |

| 2 (hairline lift) | `{colors.surface-1}` + 1px `{colors.hairline}` border | Floating tiles with extra definition |

| 3 (deep accent) | `{colors.inverse-canvas}` true black | Quote / testimonial callout strip |

Intercom resists drop shadows. Depth is communicated by the white-on-cream surface change.

Decorative Depth

• **Product UI mockups** dominate every section's right column or center band — these are screenshots, not illustrations.
• **No atmospheric gradients, no spotlight cards, no pastel section blocks.** The cream + white system is deliberately restrained.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips, badges |

| `{rounded.sm}` | 6px | Inline tags |

| `{rounded.md}` | 8px | All buttons, form inputs |

| `{rounded.lg}` | 12px | Pricing cards, feature cards, FAQ rows |

| `{rounded.xl}` | 16px | Product mockup cards |

| `{rounded.xxl}` | 24px | Oversized CTA banners |

| `{rounded.pill}` | 9999px | Tab toggles |

| `{rounded.full}` | 9999px | Avatar circles |

Photography & Illustration Geometry

• Product UI screenshots dominate the marketing surface; they sit in `{rounded.xl}` 16px tiles.
• Customer logo tiles render at small sizes (~24–32px logo height) on `{colors.canvas}` cream with no border.
• Avatar circles in testimonial cards use `{rounded.full}` at 40–48px sizes.

Components

Buttons

**`button-primary`** — Charcoal CTA. The default primary CTA across all pages.

• Background `{colors.ink}`, text `{colors.on-primary}`, type `{typography.button}`, padding 10px 18px, rounded `{rounded.md}`.
• Pressed state lives in `button-primary-pressed`.

**`button-secondary`** — White button on cream. Used for secondary CTAs.

• 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 — reserved for Fin AI product CTAs.

• 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`** — Pill-toggle on `/pricing`.

• 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`** — Each tier on `/pricing`.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.

**`pricing-card-featured`** — Featured / recommended tier — inverts to charcoal.

• Background `{colors.ink}`, text `{colors.on-primary}`, otherwise identical structure.

**`feature-card`** — Generic feature highlight.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.

**`product-mockup-card`** — The dominant card type — frames a high-fidelity product UI screenshot.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.

**`testimonial-card`** — Customer quote with avatar + name + company.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-lg}`, rounded `{rounded.lg}`, padding 32px.

**`startup-discount-card`** — The "Startups get 90% off" tinted card.

• Background `{colors.surface-2}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 32px.

**`customer-logo-tile`** — Small tile in the customer marquee.

• Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.xs}`, padding 16px.

**`cta-banner`** — Closing CTA panel near page bottom.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.headline}`, rounded `{rounded.lg}`, padding 48px.

Inputs & Forms

**`text-input`** + **`text-input-focused`** — Form fields on contact and search overlays.

• Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 10px 14px.

FAQ

**`faq-row`** — Expandable accordion row in the pricing FAQ.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 24px. 1px `{colors.hairline-soft}` bottom rule.

Navigation

**`top-nav`** — Sticky cream bar with the Intercom wordmark left, nav links centered, log-in + sign-up pair right.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.

Footer

**`footer`** — Dense link grid on `{colors.canvas}` cream with the Intercom wordmark left.

• Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.

Do's and Don'ts

Do

• Reserve `{colors.canvas}` cream as the system's anchor surface — never replace with pure white.
• Lift cards from cream onto white (`{colors.surface-1}`) for hierarchy.
• Use **`button-fin`** Fin Orange ONLY on Fin AI product CTAs and Fin badges.
• Pair Saans display at weight 500 with body at 400.
• Use product UI screenshots as the protagonist of every section.
• Use `{rounded.lg}` 12px for cards and `{rounded.xl}` 16px for product mockup tiles.
• Apply negative tracking proportionally to display sizes.

Don't

• Don't use pure white as the canvas.
• Don't use Fin Orange as a section background or as a generic primary CTA.
• Don't add drop shadows to floating cards.
• Don't introduce a second display family.
• Don't pill-round CTAs.
• Don't write all-caps tracked eyebrows.
• Don't promote the report palette colors to brand-level surfaces.
• Don't combine charcoal CTAs and Fin Orange CTAs in the same viewport.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Desktop-XL | 1440px | Default desktop layout |

| Desktop | 1280px | Card grid 3-up maintained |

| Tablet | 1024px | Card grid 3-up → 2-up |

| Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger |

| Mobile | 480px | Single-column; display-xl scales 72px → ~32px |

Touch Targets

• CTAs hold ≥40px tap height across viewports.
• Pricing tab pills hold ≥40px tap height.
• Form inputs hold ≥44px tap target on touch.

Collapsing Strategy

• **Top nav**: links collapse to hamburger below 768px; primary CTA stays visible.
• **Card grids**: 3-up → 2-up at 1024px → 1-up below 768px.
• **Pricing comparison**: collapses into per-tier accordion below 768px.
• **Display type**: `{typography.display-xl}` 72px scales toward `{typography.display-md}` 40px on mobile.

Image Behavior

• Product UI screenshots maintain aspect ratio and never crop.
• Customer logos in the marquee may collapse from 6-up to 3-up below 768px.

Iteration Guide

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. When introducing a section, decide first whether it sits on `{colors.canvas}` cream (default) or whether it lifts onto a `{colors.surface-1}` white card.

3. Default body to `{typography.body}` at weight 400.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new variants as separate component entries.

6. Treat Fin Orange as a product accent: Fin CTA and Fin badge only.

7. Lead every section with a product screenshot.

Known Gaps

• The **report palette** lives in product analytics dashboards rendered inside marketing mockups; they are documented for completeness but are not brand surface colors.
• Form-field error and validation styling is not visible on the inspected pages.
• Dark mode is not documented because the marketing site does not ship a dark theme.
• The helpdesk / inbox product surfaces show in-product UI states that aren't formal marketing chrome.
• Saans and SaansMono are proprietary; an open-source substitute (Inter, Söhne, Geist) is acceptable.

개요

Intercom의 마케팅 캔버스는 순수한 흰색이 아닌 부드러운 크림색 바탕(`{colors.canvas}` ≒ #f5f1ec)입니다. 따뜻함은 브랜드의 신호입니다. 이는 밝은 SaaS가 아닌 사설적이고 차분하며 제품 중심입니다. 크림색 캔버스 위에는 흰색 플로팅 카드(`{colors.surface-1}`), 얇은 헤어라인 구분선(`{colors.hairline}`), 목탄색 유형(`{colors.ink}` #111111)이 있습니다.

디스플레이 유형은 **Saans** - Intercom의 독점 기하학적 산세 - 측정된 음수 문자 간격(72px 디스플레이에서 -2.0px)을 사용하여 무게 500으로 설정됩니다. 신체 유형은 체중 400의 동일한 제품군입니다. 단일 독점 모노는 **SaansMono**이며 마케팅 화면에 포함된 코드 조각 및 제품 UI 스크린샷에 드물게 사용됩니다.

단일 색채 악센트는 Intercom의 AI 제품 브랜드 색상인 **Fin Orange** (`{colors.fin-orange}` #ff5600)입니다. 이는 Fin 제품 CTA, 가격의 Fin 배지 및 몇 가지 인라인 강조 순간에 표시됩니다. 이는 시스템 기본이 아닙니다. 시스템 기본은 목탄 `{colors.ink}`입니다. Intercom은 또한 모형에 표시된 제품 내 분석 표면 내부에 사용되는 작은 **보고서 팔레트**(`{colors.report-blue}`, `{colors.report-green}`, `{colors.report-pink}`, `{colors.report-lime}`)를 유지 관리합니다.

**제품 모형**에서는 페이지 리듬이 무겁습니다. 모든 섹션의 페이로드는 '{rounded.xl}' 16px 모서리가 있는 흰색 카드로 둘러싸인 Intercom 제품 UI의 고화질 스크린샷입니다. 마케팅 크롬은 의도적으로 조용하므로 제품이 주인공이 될 수 있습니다.

**주요 특징:**

• **크림 캔버스**(`{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}): 순백색 — 플로팅 카드에 사용됩니다(가격, 기능, 제품 모형).
• **Surface 2** ({colors.surface-2}): 약간 더 어두운 크림색 — 시작 할인 배너, 대체 행 줄무늬.
• **헤어라인**({colors.hairline}): 카드의 1px 테두리 — 부드럽고 따뜻한 회색(#d3cec6).
• **Hairline Soft** ({colors.hairline-soft}): FAQ 행과 바닥글 열 사이를 더욱 부드럽게 구분합니다.
• **역 캔버스**({colors.inverse-canvas}): 순수한 검정색 — 추천/인용 콜아웃 스트립에만 해당됩니다.
• **Inverse Surface 1** ({colors.inverse-surface-1}): 한 단계 더 가벼워졌습니다. 어두운 상황에서 마우스오버된 바닥글 항목입니다.

텍스트

• **잉크** ({colors.ink}): 모든 헤드라인, 본문 유형, 버튼 라벨 — 차콜색 #111111.
• **잉크 음소거**({colors.ink-muted}): #626260의 보조 유형 — 메타 정보, 선택 해제된 가격 탭.
• **Ink Subtle** ({colors.ink-subtle}): #7b7b78의 3차 유형 — 바닥글 열, 도우미 텍스트.
• **잉크 3차**({colors.ink-tertiary}): #9c9fa5의 4차 유형 — 비활성화됨, 각주.
• **역잉크** ({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-시안}): 전화 국가 선택기 악센트입니다.

보고서 팔레트는 제품 UI 모형 내부에 나타납니다. 이는 시장이 아닌 Intercom의 제품 내 차트 색상입니다.

概要

Intercom のマーケティング キャンバスは、柔らかいクリームホワイトの地色 (`{colors.canvas}` ≈ #f5f1ec) であり、純粋な白ではありません。暖かさはブランドのシグナルです。これは編集的で、穏やかで、製品に焦点を当てたものであり、明るい SaaS ではありません。クリーム色のキャンバスの上に、白いフローティング カード (`{colors.surface-1}`)、細いヘアラインの仕切り (`{colors.hairline}`)、チャコール タイプ (`{colors.ink}` #111111) を配置します。

表示タイプは **Saans** (Intercom 独自の幾何学的な sans) で、ウェイト 500 に設定され、負の文字間隔が測定されます (72 ピクセルのディスプレイで -2.0 ピクセル)。ボディタイプは、重量 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}」 16 ピクセルの角を持つ白いカードで囲まれています。製品が主役になれるよう、マーケティング クロムは意図的に静かにしています。

**主な特徴:**

• **クリーム キャンバス** (`{colors.canvas}` #f5f1ec) はブランドの特徴的な表面です。白でもグレーでもなく、意図的に温かみのある色です。
• 製品のスクリーンショット主導のページ リズム: すべてのセクションが製品のモックアップ カードを中心に配置され、マーケティング クロムは最小限に抑えられます。
• **Saans** 独自のサンセリフが階層全体を伝えます。コードのみのコンテキスト用の SaansMono。
• **Charcoal** `{colors.ink}` (#111111) はシステムのプライマリです。ボタン、見出し、ボディタイプはすべて木炭の上にあります。
• **Fin Orange** (`{colors.fin-orange}` #ff5600) は AI 製品の色であり、Fin CTA および Fin バッジに使用されており、装飾的には使用されていません。
• ディスプレイ トラッキングは積極的にマイナスに引き上げます (72 ピクセルで -2.0 ピクセル)。本体は0のままです。
• カードの角は `{rounded.lg}` 12 ピクセルと `{rounded.xl}` 16 ピクセルで控えめに保ちます。丸く丸くすることはありません。決して正方形ではありません。

色

> ソース ページ: intercom.com (ホーム)、/pricing、/helpdesk、/customers、/helpdesk/inbox。

ブランドとアクセント

• **Charcoal** ({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。
• **Surface 1** ({colors.surface-1}): 純白 — フローティング カード (価格、機能、製品モックアップ) に使用されます。
• **Surface 2** ({colors.surface-2}): わずかに濃いクリーム — スタートアップ割引バナー、代替行ストライプ。
• **ヘアライン** ({colors.hairline}): カード上の 1 ピクセルの境界線 — 柔らかいウォーム グレー (#d3cec6)。
• **ヘアライン ソフト** ({colors.hairline-soft}): FAQ 行とフッター列の間のさらにソフトな区切り線。
• **反転キャンバス** ({colors.inverse-canvas}): 純粋な黒 — 紹介/引用吹き出しストリップのみ。
• **反転サーフェス 1** ({colors.inverse-surface-1}): 1 段階明るくなります - 暗いコンテキストでフッター項目をホバーします。

テキスト

• **インク** ({colors.ink}): すべての見出し、本文タイプ、ボタン ラベル — チャコール #111111。
• **インクミュート** ({colors.ink-muted}): #626260 のセカンダリ タイプ — メタ情報、選択解除された価格タブ。
• **Ink Subtle** ({colors.ink-subtle}): #7b7b78 の 3 次タイプ — フッター列、ヘルパー テキスト。
• **インク三次** ({colors.ink-tertiary}): #9c9fa5 の四次タイプ — 無効、脚注。
• **反転インク** ({colors.inverse-ink}): 黒地に白 — 引用ストリップ タイプ。
• **Inverse Ink Muted** ({colors.inverse-ink-muted}): 黒地に明るいグレー — 引用ストリップ メタ。

セマンティックおよびレポート パレット (製品内のモックアップ)

• **エラー 赤** ({colors.semantic-error}): フォーム検証、破壊的な状態。
• **成功グリーン** ({colors.semantic-success}): 肯定的な状態 (`{colors.report-green}` とも呼ばれます)。
• **レポート ブルー** ({colors.report-blue}): 分析グラフは青色です。
• **レポート ピンク** ({colors.report-pink}): 分析グラフのピンク。
• **レポート ライム** ({colors.report-lime}): 分析グラフ ライム。
• **レポート シアン** ({colors.report-chan}): 電話の国セレクターのアクセント。

レポート パレットは製品 UI モックアップ内に表示されます。これらは Intercom の製品内チャートの色であり、市場で使用されている色ではありません。