` with `cite` when applicable ### Reduced Motion - Honored across the site - Looping agent / product animations and card hover lift: disabled - Scroll-triggered reveals: opacity-only - Hover state changes preserve color, drop motion ## 10. Responsive Behavior ### Breakpoints | Tier | Min-width | Use | |---|---|---| | mobile | 0–639px | Single-column, stacked product cards | | tablet | 640–1023px | 2-column feature grid | | desktop | 1024–1279px | Full 12-column with 3-up product grid | | wide | 1280px+ | Container caps at 1280, generous gutters | ### Touch Targets Minimum 44×44px on mobile. Primary CTA scales padding from `10px 16px` (desktop) to `14px 20px` (mobile) for a 48px+ tap area — the jet-black button stays decisive at touch sizes. Inputs grow to 48px height on mobile. ### Collapsing Strategy - **Hero display**: 80px → 56px → 44px → 36px down the cascade — Saans scales aggressively - **Product card grid**: 3-col → 2-col → 1-col - **Top nav**: full mega-dropdown → hamburger drawer at <1024px (drawer keeps the jet-black CTA pinned) - **Section vertical rhythm**: 128px → 96px → 64px - **Dark inversion bands**: preserved on mobile — they are brand-load-bearing, not decoration ### Image Behavior - Illustrations: SVG-based with the multi-accent palette; scale infinitely - Product UI mockups: aspect-ratio 16:10, `object-fit: contain`, lazy-loaded - Avatars: 48×48 circular for testimonial cards, 32×32 for bylines - Customer logos: monochrome warm-grey, height-locked at 28–36px in social-proof rows ### Container Queries Product cards use container queries — when a card narrows below 280px, the per-product icon shifts from top-left to inline with the title and the body copy truncates to 2 lines. ## 11. Content & Voice ### Tone **Confident, modern, AI-forward — the future of customer service, said plainly.** Intercom talks to support leaders, founders, and CX teams who want AI to actually resolve tickets, not just deflect them. The voice is direct and bold ("the only helpdesk designed for the AI Agent era"), never hedged or enterprise-cautious. Fin — the AI agent — is the protagonist of most copy; the brand sells outcomes ("resolve issues instantly") over features. ### Microcopy Patterns - **Button verbs**: "Start free trial", "Get a demo", "Talk to sales", "See Fin in action" - **Empty states**: "No conversations yet — Fin is ready when your customers are." - **Errors**: "Something went wrong. Try again in a moment." (Plain, non-blaming.) - **Success**: "Done." / "Sent." (Past tense, confident.) - **Loading**: "Resolving…" (Verb in progress — on-brand for an AI support tool.) - **Confirmations**: "You're all set." (Brief, warm.) ### CTA Verb Conventions The dominant primary CTA is **"Start free trial"** across hero, pricing, and footer; **"Get a demo"** for higher-touch paths; **"Talk to sales"** for enterprise. Product surfaces use **"See Fin in action"**, **"Explore the helpdesk"**, **"Watch the demo"**. The jet-black button + "Start free trial" pairing is the most-repeated unit on the site. ### Empty States Empty states stay on-brand for an AI product — they frame the agent as ready and waiting rather than apologizing for the blank screen ("Fin is ready when your customers are"). They teach the next action without enterprise stiffness. ## 12. Dark Mode & Theming Intercom's marketing site is **cream-light by default** — there is no global dark toggle. But dark is a first-class *band* device: navy `#020917` (`--color-navy`) and dark `#080e1c` (`--color-dark`) provide high-impact inversion for testimonial walls, AI demos, and the footer, and the nav ships a dark scrim variant (`#17100ecc` with `#ffffff33` border). The token swap inside any dark band: ```yaml colors-inverted: bg: '#080e1c' # deepest dark surface: '#020917' # navy card surface text: '#faf9f6' # cream-white, preserves the warmth text-muted: '#cbc7bf' # warm muted on dark brand: '#7a7eef' # brand-light cobalt — the full #000ce1 is too dark on near-black border: '#ffffff33' # white at 20% on-brand: '#020917' ``` On dark bands the full electric-cobalt `#000ce1` is too dark to read against near-black, so the inversion uses **brand-light `#7a7eef`** for accents and links while keeping the cream-white text. A full dark *marketing canvas* would lose the editorial-paper warmth that is the whole point of the 2024 rebrand — so dark stays a punctuation device, never the default. ## 13. Lineage & Influences Intercom's 2024 rebrand is one of the most decisive design moves in recent B2B SaaS. The old Intercom — and nearly every helpdesk product — lived in cool white and helpful blue-grey, the safe "reliable tool" register. The new Intercom walked away from all of it: a **warm cream canvas** (`#faf9f6` / `#f4f3ec`), a **warm near-black `#17100e` Saans display** set large and surprisingly light, **jet-black CTAs**, and a single **electric-cobalt `#000ce1`** snap color. The result reads as editorial-magazine more than dashboard — premium paper, big confident type, hard decisive buttons — and it was built specifically to make the AI agent (Fin) and the platform feel like the future of customer service rather than another support inbox. The warm-paper canvas places Intercom inside the modern brand-design wave that abandoned cool B2B white: **Stripe** set the bar for premium, type-led marketing on warm off-white grounds, and the broadsheet / editorial revival in startup branding (the **Pentagram** magazine tradition) supplied the big-canvas, large-display, multi-accent language. **Linear** proved that confident near-black type, disciplined light/dark inversion, and a single snap accent could make product software feel like the future — a discipline Intercom's cobalt-and-cream system clearly studied. And **HubSpot** is the closest customer-platform peer: both abandoned cool helpdesk white for a warm canvas, but where HubSpot warms with coral, Intercom warms with cream plus an electric-cobalt edge. What's purely Intercom is the **per-product color system** — Fin orange, helpdesk cobalt, operator violet, sales steel, ecom forest, voice green — layered on top of a fully warmed neutral ramp (cream → chalk → canvas → linen → clay). That combination lets each surface own a color while the cream-and-cobalt spine keeps the whole brand recognizable, and it is the part of the system that reads most distinctly as "AI-era support platform" rather than "another SaaS that warmed up its palette." **Named Influences** - **Stripe** ([stripe.com](https://stripe.com)) — Set the bar for premium type-led B2B marketing and the warm off-white canvas direction Intercom's cream system extends - **Linear** ([linear.app](https://linear.app)) — Proved confident near-black type, light/dark discipline, and a single snap accent could feel like the future of product software - **HubSpot** ([hubspot.com](https://www.hubspot.com)) — Adjacent customer-platform peer; both abandoned cool B2B white for a warm canvas (coral vs. cream + cobalt) - **Pentagram** ([pentagram.com](https://www.pentagram.com)) — The editorial / magazine design tradition behind the big-cream-canvas, large-display, multi-accent rebrand language ## 14. Do's and Don'ts ### Do - Hold the canvas at cream `#faf9f6` / `#f4f3ec` — the warm paper is the entire 2024 rebrand - Set body and display text in warm near-black `#17100e`, never pure `#000` — cold black breaks the paper warmth - Keep the hero Saans large and light (80px / weight 400) — the poised lightness is the signature, not a bug - Reserve electric-cobalt `#000ce1` as the snap color — links, focus rings, accent CTAs, the "future" moments - Use jet-black `#000000` (6px) or warm near-black `#17100e` (4px) for primary CTAs — decisive, hard-edged - Apply the per-product color system — Fin orange, helpdesk cobalt, operator violet, sales steel, ecom forest, voice green - Keep every neutral warm — chalk → canvas → linen → clay; no cool greys anywhere - Pair hard CTAs (4–6px) with soft cards (12–16px) — the radius contrast is intentional confidence - Put dark text on yellow `#f6f431` and orange — these accents fail with white on top - Use the `2px solid #000ce1` cobalt focus outline everywhere — it doubles as the a11y signal - Lean on the warm paper ramp + 1px hairline for separation before reaching for shadows - Use dark navy `#020917` / `#080e1c` bands as dramatic punctuation, not as the default ground ### Don't - Substitute cool helpdesk white `#ffffff` for the cream canvas — that's the old Intercom the rebrand left behind - Apply pure `#000` to body text; warm near-black `#17100e` is the protected pair - Bump the hero to weight 700 "to make it pop" — the large-and-light Saans is the brand voice - Use electric-cobalt as a full background band — it's a snap accent, not a canvas - Put white text on yellow or orange accents — both fail contrast; yellow especially needs dark text - Use cobalt `#000ce1` for body text on dark bands — swap to brand-light `#7a7eef` on near-black - Give every element the same radius — the hard-CTA / soft-card split is part of the system - Reach for cool grey neutrals — every neutral in the system is warmed - Flatten the per-product colors into one accent; the color-per-product system is brand-load-bearing - Drop the dark inversion bands on mobile — they carry the dramatic rhythm, not decoration - Use heavy drop shadows for default separation — Intercom prefers the warm ramp + hairline - Default the marketing canvas to dark mode — it loses the editorial-paper warmth entirely ## 15. Agent Prompt Guide ### Quick Color Reference ``` bg: #faf9f6 (warm off-white canvas) bg-cream: #f4f3ec (signature cream band) surface: #ffffff (white card surface) text: #17100e (warm near-black — never pure #000) text-muted: #4a443f (warm grey caption) brand: #000ce1 (electric cobalt — the snap color + focus ring) cta-black: #000000 (jet-black primary CTA, 6px radius) cta-near-black: #17100e (warm near-black CTA, 4px radius) accent-pink: #ff00af | accent-orange: #ff5600 (Fin) accent-yellow: #f6f431 (dark text only) | accent-teal: #00edc8 border: #17100e1a (warm near-black at 10% — hairline) ``` ### Example Component Prompts 1. *"Create an Intercom-style editorial hero: warm cream `#faf9f6` background, Saans 80px at weight 400 (large but light) near-black `#17100e` headline reading 'The only helpdesk built for the AI agent era.' tracked at -0.03em, ui-sans 22px lead subhead in warm grey below, jet-black `#000000` CTA with white Saans 500 16px label 'Start free trial' at 6px radius. Generous 120px vertical air."* 2. *"Design an Intercom product card: white bg, 16px radius, 1px `#17100e1a` warm hairline, 32px padding. Top-left a Fin orange `#ff5600` icon, Saans 600 24px near-black title, ui-sans 16px body, orange 'Learn more →' link at bottom. Card lifts on hover with translate-y -2px + `0 8px 24px rgba(23,16,14,0.10)` warm shadow."* 3. *"Build an Intercom dark inversion band: deepest dark `#080e1c` full-bleed background, cream-white `#faf9f6` Saans 40px headline, warm-muted `#cbc7bf` body, brand-light cobalt `#7a7eef` accent link (not the full #000ce1 — too dark on near-black), white-at-20% `#ffffff33` borders. Use for an AI-demo or testimonial wall."* 4. *"Compose an Intercom cream callout band: cream `#f4f3ec` background, 96px vertical padding, near-black `#17100e` Saans 500 40px headline, ui-sans 18px body, jet-black CTA 'Get a demo'. Eyebrow above in ui-sans 600 12px / 0.08em ALL CAPS warm grey reading 'AI AGENT'."* 5. *"Create an Intercom inline trial capture: horizontal layout, white input on left with 1px `#17100e1a` warm hairline at 8px radius, jet-black `#000000` submit button on right at 6px radius saying 'Start free trial', placeholder 'you@company.com' in `#9a938c`. Focus: input border goes near-black with a 2px `#000ce1` cobalt outline."* 6. *"Design an Intercom ghost / secondary button: transparent bg, near-black `#17100e` text, 1px `#17100e1a` border, 6px radius, Saans 500 16px label 'View pricing', 10px×16px padding. Hover fills to warm wash `rgba(23,16,14,0.08)`."* ### Iteration Guide 1. **Warm the canvas first.** If the background is cool white `#ffffff`, swap to cream `#faf9f6`. The warm paper is the single most important move — without it the design reverts to old-Intercom helpdesk white. 2. **Warm the black.** If text or CTAs use pure `#000`, swap to `#17100e`. Pure black on cream reads cold and breaks the paper warmth. 3. **Lighten the hero, don't heavy it.** If the headline is rendering at weight 700, drop to 400–500 at large size. The poised large-and-light Saans is the brand voice; heavy reads generic. 4. **Add the cobalt snap.** If the page is all cream + black with no accent, introduce electric-cobalt `#000ce1` on links, the focus ring, or one accent CTA. The snap color is what makes it feel current. 5. **Color the products.** If product cards all share one accent, apply the per-product system — Fin orange, helpdesk cobalt, operator violet, sales steel, ecom forest, voice green. 6. **Split the radii.** If everything shares one radius, sharpen the CTAs to 4–6px and soften the cards to 12–16px. The hard-button / soft-card contrast is intentional. 7. **Warm the neutrals.** If any grey reads cool, walk it onto the warm ramp (chalk `#f1eee9` → canvas `#e7e3db` → linen `#dedbd6` → clay `#d3cec6`). 8. **Add a dark punctuation band.** If the page is uniformly light, drop in one navy `#020917` / dark `#080e1c` inversion band for an AI demo or testimonial wall — and remember to switch accents to brand-light `#7a7eef` there. --- *Theme-toggle audit: score=0, signals=[none]*