Intercom Design System

---

version: alpha

name: Intercom-design-analysis

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

colors:

primary: "#111111"

on-primary: "#ffffff"

ink: "#111111"

ink-muted: "#626260"

ink-subtle: "#7b7b78"

ink-tertiary: "#9c9fa5"

canvas: "#f5f1ec"

surface-1: "#ffffff"

surface-2: "#ebe7e1"

inverse-canvas: "#000000"

inverse-surface-1: "#313130"

inverse-ink: "#ffffff"

inverse-ink-muted: "#9c9fa5"

hairline: "#d3cec6"

hairline-soft: "#ebe7e1"

fin-orange: "#ff5600"

report-orange: "#fe4c02"

report-blue: "#65b5ff"

report-green: "#0bdf50"

report-pink: "#ff2067"

report-lime: "#b3e01c"

report-cyan: "#03b2cb"

brand-blue: "#0007cb"

semantic-error: "#c41c1c"

semantic-success: "#0bdf50"

typography:

display-xl:

fontFamily: Saans

fontSize: 72px

fontWeight: 500

lineHeight: 1.05

letterSpacing: -2.0px

display-lg:

fontFamily: Saans

fontSize: 56px

fontWeight: 500

lineHeight: 1.10

letterSpacing: -1.4px

display-md:

fontFamily: Saans

fontSize: 40px

fontWeight: 500

lineHeight: 1.15

letterSpacing: -0.8px

headline:

fontFamily: Saans

fontSize: 28px

fontWeight: 500

lineHeight: 1.20

letterSpacing: -0.5px

card-title:

fontFamily: Saans

fontSize: 22px

fontWeight: 500

lineHeight: 1.25

letterSpacing: -0.3px

subhead:

fontFamily: Saans

fontSize: 20px

fontWeight: 400

lineHeight: 1.40

letterSpacing: -0.2px

body-lg:

fontFamily: Saans

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

letterSpacing: -0.1px

body:

fontFamily: Saans

fontSize: 16px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0

body-sm:

fontFamily: Saans

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0

caption:

fontFamily: Saans

fontSize: 12px

fontWeight: 400

lineHeight: 1.40

letterSpacing: 0

button:

fontFamily: Saans

fontSize: 15px

fontWeight: 500

lineHeight: 1.20

letterSpacing: 0

eyebrow:

fontFamily: Saans

fontSize: 14px

fontWeight: 500

lineHeight: 1.30

letterSpacing: 0

mono:

fontFamily: SaansMono

fontSize: 13px

fontWeight: 400

lineHeight: 1.50

letterSpacing: 0

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 24px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-primary-pressed:

backgroundColor: "{colors.inverse-canvas}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-tertiary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-fin:

backgroundColor: "{colors.fin-orange}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

pricing-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

pricing-card-featured:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

feature-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

product-mockup-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.xl}"

padding: 24px

testimonial-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body-lg}"

rounded: "{rounded.lg}"

padding: 32px

customer-logo-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 16px

text-input:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 10px 14px

text-input-focused:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 10px 14px

pricing-tab-default:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 8px 16px

pricing-tab-selected:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.pill}"

padding: 8px 16px

faq-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 24px

cta-banner:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.headline}"

rounded: "{rounded.lg}"

padding: 48px

startup-discount-card:

backgroundColor: "{colors.surface-2}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 32px

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

height: 56px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 64px 32px

---

Intercom'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:**

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

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

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

| 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 |

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.

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.

| 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.

| 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 |

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

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

**`button-tertiary`** — Plain text button.

**`button-fin`** — Fin Orange CTA — reserved for Fin AI product CTAs.

**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`.

**`pricing-card`** — Each tier on `/pricing`.

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

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

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

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

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

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

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

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

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

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

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

| 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 |

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.