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의 마케팅 캔버스는 순백색이 아닌 부드러운 크림색 흰색 바탕(`` ≒ #f5f1ec)입니다. 따뜻함은 브랜드의 신호입니다. 이는 밝은 SaaS가 아닌 사설적이고 차분하며 제품 중심입니다. 크림색 캔버스 위에는 흰색 플로팅 카드(``), 얇은 헤어라인 칸막이(``), 차콜형(`` #111111)이 놓여 있습니다.

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

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

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

**주요 특성:**

• **크림 캔버스**(`` #f5f1ec)는 브랜드를 정의하는 표면입니다. 흰색도 회색도 아니며 의도적으로 따뜻합니다.
• 제품 스크린샷 중심 페이지 리듬: 모든 섹션이 제품 모형 카드 중앙에 배치되고 마케팅 크롬은 최소화됩니다.
• **Saans** 독점 산세리프체는 전체 계층 구조를 담고 있습니다. 코드 전용 컨텍스트를 위한 SaansMono.
• **차콜** ``(#111111)이 시스템 기본입니다. 버튼, 헤드라인, 본문 유형이 모두 차콜 위에 있습니다.
• **Fin Orange**(`` #ff5600)는 AI 제품 색상으로 Fin CTA 및 Fin 배지에 사용되며 결코 장식용으로 사용되지 않습니다.
• 디스플레이 추적이 적극적으로 음수를 가져옵니다(72px에서 -2.0px). 본문은 0.
에 유지됩니다.
• 카드 모서리는 `` 12px 및 `` 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의 3차 유형 — 바닥글 열, 도우미 텍스트.
• **잉크 3차**({colors.ink-tertiary}): #9c9fa5의 4차 유형 — 비활성화됨, 각주.
• **역잉크** ({colors.inverse-ink}): 검정색 바탕에 흰색 — 따옴표 유형.
• **역 잉크 음소거**({colors.inverse-ink-muted}): 검정색 바탕에 밝은 회색 — 인용문 메타.

의미 체계 및 보고서 팔레트(제품 내 모형)

• **빨간색 오류**({colors.semantic-error}): 양식 유효성 검사, 파괴적인 상태.
• **성공 녹색**({colors.semantic-success}): 긍정적인 상태(또한 ``).
• **보고서 파란색**({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`. 제품 모형에 표시된 코드 조각 내부에 사용됩니다.

동일한 계열이 전체 계층 구조를 전달합니다. 계층 구조는 제품군 변경이 아닌 크기 + 무게 + 추적을 기준으로 수행됩니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 72px | 500 | 1.05 | -2.0px | 가장 큰 영웅 헤드라인 |

| _`` | 56px | 500 | 1.10 | -1.4px | 섹션 오프너 헤드라인 |

| _`` | 40px | 500 | 1.15 | -0.8px | 하위 섹션 헤드라인 |

| _`` | 28px | 500 | 1.20 | -0.5px | 가격 등급 제목, CTA 배너 |

| _`` | 22px | 500 | 1.25 | -0.3px | 카드 제목, 기능 카드 |

| _`` | 20픽셀 | 400 | 1.40 | -0.2px | 본문, 소개 단락 |

| _`` | 18px | 400 | 1.50 | -0.1px | 주요 부제목, 리드 단락 |

| _`` | 16px | 400 | 1.50 | 0 | 기본 본문 |

| _`` | 14px | 400 | 1.50 | 0 | 카드 본문, 바닥글 |

| _`` | 12px | 400 | 1.40 | 0 | 캡션, 메타 |

| _`` | 15px | 500 | 1.20 | 0 | 알약/사각형 버튼 라벨 |

| _`` | 14px | 500 | 1.30 | 0 | 섹션 눈썹(문장 케이스) |

| _`` | 13px | 400 | 1.50 | 0 | 모형의 코드를 위한 SaansMono |

원칙

• **무게 500은 디스플레이를 나타냅니다.** 500의 Saans는 굵은 글씨 없이 자신감 있게 읽힙니다.
• **음수 문자 간격은 크기에 따라 조정됩니다.** 72px에서 -2.0px(크기의 3%), 본문에서는 0까지 감소합니다.
• **디스플레이에서는 줄 높이가 더 조여지고 본체에서는 편안해집니다.** 디스플레이-xl에서 1.05, 본체에서 1.50.
• **크롬에는 모노가 없습니다.** SaansMono는 제품 UI에 있습니다. 마케팅 크롬은 Saans에 그대로 유지됩니다.
• **눈썹은 14px/500 가중치에서 문장 대소문자를 사용합니다. — 모두 대문자 추적이 아닙니다.

글꼴 대체에 대한 참고사항

Saans 없이 구현하는 경우 적합한 대체 항목으로는 **Söhne**(유료), **Inter**(무료, 중량 500) 또는 **Geist Sans**(무료)가 있습니다. 무게 500의 인터는 가장 가까운 자유 대체 선수입니다. SaansMono는 무게 400의 **JetBrains Mono**로 근사화될 수 있습니다.

레이아웃

간격 시스템

• **기본 단위**: 8px.
• **토큰(머리말)**: `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• 카드 내부 패딩: `` 가격/기능 카드의 24px; `` 추천/할인 카드의 경우 32px; `` CTA 배너의 48px.
• 알약 버튼 패딩: 세로 10px · 가로 18px.

그리드 및 컨테이너

• 최대 콘텐츠 너비는 약 1280픽셀입니다.
• 카드 그리드는 데스크톱에서 3업, 태블릿에서 2업, 모바일에서 1업입니다.
• 가격 등급 표는 3개로 구성됩니다. 아래 비교 스트립에는 계층별 체크 표시가 표시됩니다.
• 제품 모형 카드는 전체 콘텐츠 폭을 포괄하며 모든 섹션의 주인공입니다.

공백 철학

크림색 캔버스는 다른 브랜드의 공백을 대신합니다. 충분한 수직 호흡 공간(`` 96px)과 리프트 온투 화이트 카드로 구분된 섹션입니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 0(플랫) | 그림자 없음, 테두리 없음 | 본문 유형, 영웅 텍스트, 바닥글 기본값 |

| 1 (리프트 온 크림) | _`` `` 크림에 흰색 배경 | 가격 카드, 기능 카드, 제품 모형 |

| 2 (헤어라인 리프트) | _`` + 1px `` 테두리 | 추가 정의가 포함된 플로팅 타일 |

| 3(깊은 악센트) | _`` 트루 블랙 | 인용문/평가 콜아웃 스트립 |

Intercom은 그림자를 방지합니다. 크림색 표면의 흰색 변화로 깊이가 전달됩니다.

장식적 깊이

• **제품 UI 모형**은 모든 섹션의 오른쪽 열이나 중앙 밴드를 지배합니다. 이는 일러스트레이션이 아닌 스크린샷입니다.
• **대기 그라데이션 없음, 스포트라이트 카드 없음, 파스텔 섹션 블록 없음.** 크림 + 흰색 시스템은 의도적으로 제한됩니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 4픽셀 | 작은 칩, 배지 |

| _`` | 6픽셀 | 인라인 태그 |

| _`` | 8픽셀 | 모든 버튼, 양식 입력 |

| _`` | 12px | 가격 카드, 기능 카드, FAQ 행 |

| _`` | 16px | 제품 모형 카드 |

| _`` | 24px | 대형 CTA 배너 |

| _`` | 9999px | 탭 토글 |

| _`` | 9999px | 아바타 서클 |

사진 및 일러스트레이션 기하학

• 제품 UI 스크린샷이 마케팅 표면을 지배합니다. `` 16픽셀 타일에 위치합니다.
• 고객 로고 타일은 테두리가 없는 `` 크림에 작은 크기(~24~32픽셀 로고 높이)로 렌더링됩니다.
• 평가 카드의 아바타 원은 40~48픽셀 크기의 ``을(를) 사용합니다.

구성요소

버튼

**`button-primary`** — 차콜 CTA. 모든 페이지의 기본 기본 CTA입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 10px 18px, 반올림 ``.
• 눌린 상태는 `button-primary-pressed`에 있습니다.

**`button-secondary`** — 크림색의 흰색 버튼. 보조 CTA에 사용됩니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 10px 18px, 반올림 ``. 1px `` 테두리.

**`button-tertiary`** — 일반 텍스트 버튼.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 18px.

**`button-fin`** — Fin Orange CTA — Fin AI 제품 CTA용으로 예약되어 있습니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 18px.

가격 탭

**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing`에 대한 알약 토글.

• 기본값: `` 배경, `` 텍스트, 반올림 ``.
• 선택됨: `` 흰색 배경, `` 텍스트 — 선택됨 = 흰색으로 들어올림.

카드 및 용기

**`pricing-card`** — `/pricing`의 각 계층.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.

**`pricing-card-featured`** — 추천/권장 계층 — 목탄으로 전환됩니다.

• 배경 ``, 텍스트 ``, 그 외에는 동일한 구조.

**`feature-card`** — 일반 기능 강조 표시.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.

_**`product-mockup-card`** — 주요 카드 유형 — 고품질 제품 UI 스크린샷 프레임을 만듭니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.

**`testimonial-card`** — 아바타 + 이름 + 회사가 포함된 고객 견적.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px.

**`startup-discount-card`** — '스타트업 90% 할인' 색상 카드.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px.

**`customer-logo-tile`** — 고객 선택 윤곽의 작은 타일.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 16px.

**`cta-banner`** — 페이지 하단 근처에서 CTA 패널을 닫습니다.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 48px.

입력 및 양식

**`text-input`** + **`text-input-focused`** — 연락처 및 검색 오버레이의 양식 필드.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 14px.

FAQ

**`faq-row`** — 가격 FAQ의 확장 가능한 아코디언 행.

• 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px. 1px `` 하단 규칙.

탐색

**`top-nav`** — 왼쪽에 Intercom 워드마크가 있는 끈적한 크림 막대, 탐색 링크가 중앙에, 오른쪽에 로그인 + 가입 쌍이 있습니다.

• 배경 ``, 텍스트 ``, 유형 ``, 높이 56px.

바닥글

**`footer`** — 왼쪽에 Intercom 워드마크가 있는 `` 크림색의 촘촘한 링크 그리드.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 64px 32px.

해야 할 일과 하지 말아야 할 일

하라

• 크림 ``을 시스템의 앵커 표면으로 예약하세요. 절대 흰색으로 교체하지 마세요.
• 계층 구조를 위해 크림색 카드를 흰색(``)으로 들어 올립니다.
• **`button-fin`** Fin AI 제품 CTA 및 Fin 배지에만 Fin Orange를 사용하세요.
• 페어 산스는 체중 500, 신체는 400으로 표시됩니다.
• 제품 UI 스크린샷을 모든 섹션의 주인공으로 사용하세요.
• 카드에는 `` 12픽셀을 사용하고 제품 모형 타일에는 `` 16픽셀을 사용하세요.
• 디스플레이 크기에 비례하여 음수 추적을 적용합니다.

하지 마세요

• 순백색을 캔버스로 사용하지 마세요.
• Fin Orange를 섹션 배경이나 일반적인 기본 CTA로 사용하지 마세요.
• 플로팅 카드에 그림자를 추가하지 마세요.
• 두 번째 디스플레이 제품군을 도입하지 마세요.
• CTA를 단순하게 작성하지 마세요.
• 모두 대문자로 추적된 눈썹을 쓰지 마세요.
• 보고서 팔레트 색상을 브랜드 수준 화면으로 홍보하지 마세요.
• 차콜색 CTA와 Fin Orange CTA를 동일한 뷰포트에 결합하지 마세요.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 데스크탑-XL | 1440px | 기본 데스크탑 레이아웃 |

| 데스크탑 | 1280px | 카드 그리드 3업 유지 |

| 태블릿 | 1024px | 카드 그리드 3업 → 2업 |

| 모바일LG | 768px | 가격 비교가 아코디언이 됩니다. 탐색 햄버거 |

| 모바일 | 480px | 단일 열; display-xl은 72px → ~32px |

크기를 조정합니다.

터치 대상

• CTA는 뷰포트 전체에서 40px 이상의 탭 높이를 유지합니다.
• 가격 탭 알약은 ≥40px 탭 높이를 유지합니다.
• 양식 입력은 터치 시 ≥44px 탭 대상을 유지합니다.

축소 전략

• **상위 탐색**: 링크가 768px 미만에서 햄버거로 축소됩니다. 기본 CTA는 계속 표시됩니다.
• **카드 그리드**: 3-up → 1024px에서 2-up → 768px 미만 1-up.
• **가격 비교**: 768px 이하에서 계층별 아코디언으로 축소됩니다.
• **디스플레이 유형**: `` 72px는 모바일에서 `` 40px로 조정됩니다.

이미지 동작

• 제품 UI 스크린샷은 가로 세로 비율을 유지하며 잘리지 않습니다.
• 선택 윤곽의 고객 로고는 768픽셀 아래에서 6~3위로 축소될 수 있습니다.

반복 가이드

1. 한 번에 하나의 구성 요소에 집중하고 `components:` 토큰 이름으로 참조하세요.

2. 섹션을 소개할 때 먼저 `` 크림(기본값) 위에 놓일지 아니면 `` 흰색 카드 위에 올려놓을지 결정하세요.

3. 기본 본문은 무게 400에서 ``입니다.

4. 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행합니다.

5. 별도의 구성 요소 항목으로 새 변형을 추가합니다.

6. Fin Orange를 제품 액센트로 취급: Fin CTA 및 Fin 배지만 해당.

7. 제품 스크린샷으로 모든 섹션을 안내하세요.

알려진 격차

• **보고서 팔레트**는 마케팅 모형 내부에 렌더링된 제품 분석 대시보드에 있습니다. 완전성을 위해 문서화되었지만 브랜드 표면 색상은 아닙니다.
• 양식 필드 오류 및 유효성 검사 스타일이 검사된 페이지에 표시되지 않습니다.
• 마케팅 사이트에서 어두운 테마를 제공하지 않기 때문에 어두운 모드는 문서화되어 있지 않습니다.
• 헬프 데스크/받은 편지함 제품 표면에는 공식 마케팅 크롬이 아닌 제품 내 UI 상태가 표시됩니다.
• Saans와 SaansMono는 독점적입니다. 오픈 소스 대체품(Inter, Söhne, Geist)이 허용됩니다.

概要

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

表示タイプは **Saans** (Intercom 独自の幾何学的な sans) で、ウェイト 500、測定された負の文字間隔 (72 ピクセルのディスプレイで -2.0 ピクセル) に設定されます。ボディタイプは、重量 400 の同じファミリーです。単一の独自のモノラルは **SaansMono** で、マーケティング画面に埋め込まれたコード スニペットと製品 UI スクリーンショットに控えめに使用されます。

単一の色彩アクセントは **フィン オレンジ** (`` #ff5600) — Intercom の AI 製品のブランド カラーです。それは、Fin 製品の CTA、価格設定の Fin バッジ、およびいくつかのインライン強調部分に現れています。これはシステムプライマリではありません。システムのプライマリはチャコール `` です。 Intercom は、モックアップに表示される製品内分析画面内で使用される小さな **レポート パレット** (``、__CODEBCK_668___、__CODEBCK_669___、__CODEBCK_670___) も保守しています。

ページのリズムは**製品モックアップ**に重点を置いています。各セクションのペイロードは、__CODEBCK_671___ 16ピクセルの角を持つ白いカードで囲まれた、Intercomの製品UIの高忠実度のスクリーンショットです。マーケティング クロムは、製品が主役になるように、意図的に静かになっています。

**主な特徴:**

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

色

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

ブランドとアクセント

• **Charcoal** ({colors.ink}): システムのプライマリ サーフェス。見出し、本文のタイプ、主要な CTA 錠剤の背景 — すべて木炭。
• **白** ({colors.on-primary}): 木炭 CTA 上のテキスト。フローティング カードのキャンバス。
• **フィン オレンジ** ({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 のセカンダリ タイプ — メタ情報、選択解除された価格タブ。
• **インク微妙** ({colors.ink-subtle}): #7b7b78 の 3 番目のタイプ — フッター列、ヘルパー テキスト。
• **インク三次** ({colors.ink-tertiary}): #9c9fa5 の四次タイプ — 無効、脚注。
• **反転インク** ({colors.inverse-ink}): 黒地に白 — 引用ストリップ タイプ。
• **反転インクミュート** ({colors.inverse-ink-muted}): 黒地にライトグレー — 引用ストリップメタ。

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

• **エラー赤** ({colors.semantic-error}): フォーム検証、破壊的な状態。
• **成功グリーン** ({colors.semantic-success}): 肯定的な状態 (__CODEBCK_677___ とも)。
• **レポート青** ({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`。製品モックアップに表示されるコード スニペット内で使用されます。

_同じファミリーが階層全体を保持します。 階層は、家族の変更ではなく、サイズ + 重量 + 追跡によって決まります。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 72ピクセル | 500 | 1.05 | -2.0ピクセル |最大のヒーローの見出し |

| `` | 56ピクセル | 500 | 1.10 | -1.4ピクセル |セクション冒頭の見出し |

| `` | 40ピクセル | 500 | 1.15 | -0.8ピクセル |サブセクションの見出し |

| `` | 28ピクセル | 500 | 1.20 | -0.5ピクセル |価格帯のタイトル、CTA バナー |

| `` | 22ピクセル | 500 | 1.25 | -0.3ピクセル |カード タイトル、機能カード |

| `` | 20ピクセル | 400 | 1.40 | -0.2ピクセル |リード本文、導入段落 |

| `` | 18ピクセル | 400 | 1.50 | -0.1ピクセル |ヒーローの小見出し、先頭段落 |

| `` | 16ピクセル | 400 | 1.50 | 0 |デフォルトの本文 |

| `` | 14ピクセル | 400 | 1.50 | 0 |カード本文、フッター |

| `` | 12ピクセル | 400 | 1.40 | 0 |キャプション、メタ |

| `` | 15ピクセル | 500 | 1.20 | 0 |錠剤 / 四角ボタン ラベル |

| `` | 14ピクセル | 500 | 1.30 | 0 |セクション眉毛（文例） |

| `` | 13ピクセル | 400 | 1.50 | 0 |モックアップ内のコード用の SaansMono |

原則

• **ウェイト 500 は表示されます。** 500 のサーンズ氏は太字なしで自信を持って読み取れます。
• **負の文字間隔はサイズに応じて変化します。** 72 ピクセルで -2.0 ピクセル (サイズの ≈ 3%)、本文では 0 まで下がります。
• **行の高さはディスプレイでは引き締められ、本体では緩められます。** ディスプレイ xl では 1.05、本体では 1.50。
• **Chrome にはモノラルはありません。** SaansMono は製品 UI にあります。マーケティング Chrome は Saans に残ります。
• **眉毛は 14 ピクセル / 500 ウェイトで文例**を使用します。すべて大文字の追跡はありません。

フォントの代替に関する注意

Saan なしで実装する場合、適切な代替手段には **Söhne** (有料)、**Inter** (無料、ウェイト 500)、または **Geist Sans** (無料) が含まれます。 体重500のインテルがフリーの代替選手に最も近い。 SaansMono は、重み 400 の **JetBrains Mono** で近似できます。

レイアウト

間隔システム_

• **ベースユニット**: 8px.
• **トークン (前付)**: `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• カード内部のパディング: `` 価格/機能カードでは 24 ピクセル。 `` 紹介/割引カードでは 32 ピクセル。 `` CTA バナーでは 48 ピクセル。
• ピル ボタンのパディング: 縦 10 ピクセル、横 18 ピクセル。

グリッドとコンテナ

• コンテンツの最大幅は約 1280 ピクセルです。
• カード グリッドはデスクトップでは 3 アップ、タブレットでは 2 アップ、モバイルでは 1 アップです。
• _価格階層グリッドは 3 段階です。以下の比較ストリップには、階層ごとのチェックマークが表示されます。
• 製品モックアップ カードはコンテンツの幅全体に広がっており、各セクションの主役です。

ホワイトスペースの哲学

_クリーム色のキャンバスは、他のブランドの空白部分の役割を果たします。セクションは、十分な垂直方向の呼吸スペース (`` 96 ピクセル) とリフトオントゥホワイト カードによって区切られています。

標高と深さ

|レベル |治療 | |

を使用します

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

| 0 (フラット) |影も境界線もありません |本文タイプ、ヒーロー テキスト、フッターのデフォルト |

| 1 (クリームをリフトアップ) | `` 白い背景に `` クリーム色 |価格カード、機能カード、製品モックアップ |

| 2 (生え際リフト) | `` + 1px `` 境界線 |追加の定義を備えたフローティング タイル |

| 3 (深いアクセント) | `` トゥルーブラック |引用/紹介の吹き出しストリップ |

_インターコムはドロップ シャドウに耐性があります。 クリーム色に白の表面の変化によって奥行きが表現されます。

装飾の深さ_

• **製品 UI モックアップ** は、すべてのセクションの右側の列または中央バンドを占めています。これらはイラストではなくスクリーンショットです。
• **雰囲気のグラデーション、スポットライト カード、パステル セクション ブロックはありません。** クリーム + 白のシステムは意図的に抑制されています。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 4ピクセル |小さなチップ、バッジ |

| `` | 6ピクセル |インライン タグ |

| `` | 8ピクセル |すべてのボタン、フォーム入力 |

| `` | 12ピクセル |価格カード、機能カード、FAQ 行 |

| `` | 16ピクセル |製品モックアップ カード |

| `` | 24ピクセル |特大 CTA バナー |

| `` | 9999ピクセル |タブ切り替え |

| `` | 9999ピクセル |アバター サークル |

写真とイラストの幾何学

• 製品 UI のスクリーンショットがマーケティング面の大半を占めています。 `` 16 ピクセルのタイル内に配置されます。
• お客様のロゴ タイルは、__CODEBCK_719___ クリーム色の境界線なしで小さいサイズ (ロゴの高さ約 24 ～ 32 ピクセル) でレンダリングされます。
• 紹介カードのアバター サークルは、40 ～ 48 ピクセルのサイズで `` を使用します。

コンポーネント

ボタン

**`button-primary`** — チャコール CTA。すべてのページにわたるデフォルトのプライマリ CTA。

• 背景__CODEBCK_722___、テキスト__CODEBCK_723___、入力__CODEBCK_724___、パディング10ピクセル18ピクセル、丸め__CODEBCK_725___.
• 押された状態は__CODEBCK_726___にあります。

_**`button-secondary`** — クリーム色の白いボタン。二次 CTA に使用されます。

• 背景__CODEBCK_728___、テキスト__CODEBCK_729___、入力__CODEBCK_730___、パディング10ピクセル18ピクセル、丸め__CODEBCK_731___。 1 ピクセル `` 境界線.

**`button-tertiary`** — プレーン テキスト ボタン。

• 背景__CODEBCK_734___、テキスト__CODEBCK_735___、入力__CODEBCK_736___、丸め__CODEBCK_737___、パディング10ピクセル18ピクセル。

**`button-fin`** — Fin Orange CTA — Fin AI 製品 CTA 用に予約されています。

• 背景__CODEBCK_739___、テキスト__CODEBCK_740___、入力__CODEBCK_741___、丸め__CODEBCK_742___、パディング10ピクセル18ピクセル。

価格タブ

_**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing`.

のピルトグル

• デフォルト: `` 背景、__CODEBCK_747___ テキスト、角丸__CODEBCK_748___.
• 選択済み: `` 白の背景、__CODEBCK_750___ テキスト - 選択 = 白に持ち上げます。

カードとコンテナ

**`pricing-card`** — `/pricing`.

の各層

• 背景__CODEBCK_753___、テキスト__CODEBCK_754___、入力__CODEBCK_755___、丸め__CODEBCK_756___、パディング24ピクセル

_**`pricing-card-featured`** — 注目/推奨レベル — チャコールに反転します。

• 背景__CODEBCK_758___、テキスト__CODEBCK_759___、それ以外は同一の構造。

**`feature-card`** — 一般的な機能のハイライト。

• 背景__CODEBCK_761___、テキスト__CODEBCK_762___、入力__CODEBCK_763___、丸め__CODEBCK_764___、パディング24ピクセル

**`product-mockup-card`** — 主要なカード タイプ — 高忠実度の製品 UI スクリーンショットをフレーム化します。

• 背景__CODEBCK_766___、テキスト__CODEBCK_767___、入力__CODEBCK_768___、丸め__CODEBCK_769___、パディング24ピクセル

**`testimonial-card`** — アバター + 名前 + 会社を含む顧客の見積もり。

• 背景__CODEBCK_771___、テキスト__CODEBCK_772___、入力__CODEBCK_773___、丸め__CODEBCK_774___、パディング32ピクセル。

**`startup-discount-card`** — 「スタートアップが 90% オフ」の色付きカード。

• 背景__CODEBCK_776___、テキスト__CODEBCK_777___、入力__CODEBCK_778___、丸め__CODEBCK_779___、パディング32ピクセル。

_**`customer-logo-tile`** — 顧客マーキーの小さなタイル。

• 背景__CODEBCK_781___、テキスト__CODEBCK_782___、入力__CODEBCK_783___、丸め__CODEBCK_784___、パディング16ピクセル。

**`cta-banner`** — ページ下部付近の CTA パネルを閉じます。

• 背景__CODEBCK_786___、テキスト__CODEBCK_787___、入力__CODEBCK_788___、丸め__CODEBCK_789___、パディング48ピクセル。

入力とフォーム

_**`text-input`** + **`text-input-focused`** — 連絡先および検索オーバーレイのフォーム フィールド。

• 背景__CODEBCK_792___、テキスト__CODEBCK_793___、入力__CODEBCK_794___、丸め__CODEBCK_795___、パディング10ピクセル14ピクセル。

よくある質問

**`faq-row`** — 価格に関する FAQ の拡張可能なアコーディオン行。

• 背景__CODEBCK_797___、テキスト__CODEBCK_798___、入力__CODEBCK_799___、丸め__CODEBCK_800___、パディング24ピクセル。 1px `` 一番下のルール。

ナビゲーション

**`top-nav`** — 左にインターコムのワードマーク、中央にナビゲーション リンク、右にログインとサインアップのペアが付いたスティッキー クリーム バー。

• 背景__CODEBCK_803___、テキスト__CODEBCK_804___、タイプ__CODEBCK_805___、高さ56ピクセル

フッター

_**`footer`** — `` クリーム色の高密度リンク グリッドとインターコム ワードマークが残っています。

• 背景__CODEBCK_808___、テキスト__CODEBCK_809___、入力__CODEBCK_810___、パディング64ピクセル32ピクセル。

推奨事項と禁止事項

実行

• __CODEBCK_811___ クリーム色をシステムのアンカー サーフェスとして予約します。絶対に純白に置き換えないでください。
• クリーム色のカードを白 (``) に持ち上げて階層を作ります。
• **`button-fin`** Fin Orange は、Fin AI 製品の CTA および Fin バッジでのみ使用してください。
• ペアサーンはウェイト 500、ボディ 400 で表示されます。
• 製品 UI のスクリーンショットを各セクションの主役として使用します。
• カードには `` 12 ピクセル、製品モックアップ タイルには `` 16 ピクセルを使用します。
• 表示サイズに比例してネガティブ トラッキングを適用します。

しないでください

• キャンバスとして真っ白を使用しないでください。
• フィン オレンジをセクションの背景または一般的な主要 CTA として使用しないでください。
• フローティング カードにドロップ シャドウを追加しないでください。
• 2 番目の表示ファミリーを導入しないでください。
• 丸型 CTA を使用しないでください。
• 追跡された眉毛をすべて大文字で書かないでください。
• レポート パレットの色をブランド レベルの表面にプロモートしないでください。
• チャコール CTA とフィン オレンジ CTA を同じビューポート内で組み合わせないでください。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

|デスクトップXL | 1440ピクセル |デフォルトのデスクトップ レイアウト |

|デスクトップ | 1280ピクセル |カード グリッド 3 アップを維持 |

|タブレット | 1024ピクセル |カード グリッド 3 アップ → 2 アップ |

|モバイルLG | 768ピクセル |価格比較はアコーディオンになります。ナビハンバーガー |

|モバイル | 480ピクセル |単一列。 display-xl は 72 ピクセル → ~32 ピクセル |

をスケールします

タッチターゲット

• CTA はビューポート全体で 40 ピクセル以上のタップ高さを保持します。
• 価格タブ錠剤のタップ高さは 40 ピクセル以上を保持します。
• フォーム入力はタッチ時に 44 ピクセル以上のタップ ターゲットを保持します。

戦略の崩壊

• **トップナビゲーション**: リンクは 768 ピクセル以下でハンバーガーに折りたたまれます。プライマリ CTA は表示されたままになります。
• **カード グリッド**: 3 アップ → 1024 ピクセルで 2 アップ → 768 ピクセル未満で 1 アップ。
• **価格比較**: 768 ピクセル未満では階層ごとのアコーディオンに折りたたまれます。
• **表示タイプ**: `` 72 ピクセルは、モバイルでは `` 40 ピクセルに合わせて拡大縮小されます。

画像の動作

• 製品 UI のスクリーンショットはアスペクト比を維持し、トリミングされません。
• マーキー内の顧客のロゴは、768 ピクセル未満で最大 6 から 3 まで折りたたまれる場合があります。

_反復ガイド

1. 一度に 1 つのコンポーネントに注目し、__CODEBCK_818___ トークン名で参照します。

2.セクションを導入するときは、最初に__CODEBCK_819___ クリーム (デフォルト) の上に置くか、__CODEBCK_820___ の白いカードの上に置くかを決定します。

3.デフォルトのボディは__CODEBCK_821___、ウェイト400です。

4.編集後に__CODEBCK_822___を実行します。

5.新しいバリアントを個別のコンポーネント エントリとして追加します。

6. Fin Orange を製品のアクセントとして扱います: Fin CTA と Fin バッジのみ。

7。製品のスクリーンショットを使用して各セクションをリードします。

既知のギャップ

• **レポート パレット**は、マーケティング モックアップ内にレンダリングされた製品分析ダッシュボードに存在します。これらは完全を期すために文書化されていますが、ブランドの表面の色ではありません。
• フォーム フィールド エラーと検証スタイルが検査されたページに表示されません。
• マーケティング サイトにはダーク テーマが同梱されていないため、ダーク モードについては文書化されていません。
• ヘルプデスク/受信トレイの製品画面には、正式なマーケティング クロムではない製品内の UI 状態が表示されます。
• _Saans と SaansMono は独自のものです。オープンソースの代替品 (Inter、Söhne、Geist) を使用できます。

Practical Takeaways for Designers

Studying Intercom's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Intercom applies its tokens at intercom.com.

Practical Takeaways for Designers

Studying Intercom's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Intercom applies its tokens at intercom.com.

Practical Takeaways for Designers

Studying Intercom's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Intercom applies its tokens at intercom.com.

Related Design Systems

Explore similar design languages from the same category:

• Cal Design System
• Clickhouse Design System
• Figma Design System
• Zapier Design System