--- 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 a unified 6px radius. 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: 6px sm: 6px md: 6px lg: 6px xl: 6px xxl: 6px pill: 6px full: 6px 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.md}" padding: 8px 16px pricing-tab-selected: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" 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 --- ## 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 a consistent 6px corner radius. 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. - All component corners use the same 6px radius — never pill-rounded and never intentionally square unless a structural edge requires `rounded-none`. ## Colors > Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox. ### Brand & Accent - **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, and primary CTA 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 | 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. - 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}` | 6px | Small chips, badges | | `{rounded.sm}` | 6px | Inline tags | | `{rounded.md}` | 6px | All buttons, form inputs | | `{rounded.lg}` | 6px | Pricing cards, feature cards, FAQ rows | | `{rounded.xl}` | 6px | Product mockup cards | | `{rounded.xxl}` | 6px | Oversized CTA banners | | `{rounded.pill}` | 6px | Tab toggles (legacy alias) | | `{rounded.full}` | 6px | Avatar containers (legacy alias) | ### Photography & Illustration Geometry - Product UI screenshots dominate the marketing surface; they sit in 6px-radius tiles. - Customer logo tiles render at small sizes (~24–32px logo height) on `{colors.canvas}` cream with no border. - Avatar containers in testimonial cards use the same 6px radius 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`** — Compact tab toggle on `/pricing`. - Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.md}` (6px). - 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 the unified 6px radius for cards, controls, tags, avatars, and 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 introduce radius values other than the unified 6px token (except structural `rounded-none`). - 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 tabs 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.