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.