# Intercom — Marketing Site Design Spec

> Source: intercom.com (live DOM, computed styles + color census), 2026-07-06; motion/effects/responsive pass 2026-07-07.
> Coverage: marketing site + Messenger/Fin product motifs. Full dashboard: `needs-dashboard` (login required).

## 1. Visual Theme & Atmosphere

Warm editorial, bold, and modern: a sand/cream canvas carries near-black text, huge light-weight headlines, and crisp small-radius black buttons. One loud cobalt-blue accent does the brand work (Messenger header, highlights, links), with an orange secondary used sparingly for punch. Elevation is mostly flat and magazine-like — warm-neutral color blocks, hairline borders, generous whitespace, big type paired with product imagery. The whole voice is a single even weight (400), which reads editorial and calm despite the scale; it deliberately avoids bold type and blue buttons. Confident and grown-up — a helpdesk that reads like a design magazine. Feels: warm, assured, contemporary.

## 2. Color Palette & Roles

### Warm neutrals
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#111111` | Primary text, dark buttons |
| black | `#000000` | Pure-black buttons / marks |
| sand | `#d3cec6` | Signature warm sand section bg |
| cream-100 | `#f1eee9` | Warm off-white panel |
| cream-50 | `#faf9f6` | Lightest warm surface |
| white | `#ffffff` | White surfaces |
| border | `rgba(17,17,17,.1)` | Hairline borders and dividers |
| text-muted | `rgba(17,17,17,.6)` | Secondary text, placeholders |

### Accents
| Token | Hex | Role / usage |
|---|---|---|
| cobalt | `#0007cb` | Bold brand blue — highlights, illustrations, Messenger, links |
| orange | `#ff5600` | Secondary accent / energy |

Rule: the canvas is warm sand + near-black text; cobalt `#0007cb` is the single loud accent (Messenger header, key highlights, graphics), with orange used sparingly for punch. Buttons stay black, not blue.

## 3. Typography Rules

- Font stack: Intercom's grotesque, captured as `ui-sans-serif, system-ui, sans-serif` fallback (brand face not exposed to the DOM).
- Body: 16px / 24 / 400 / `#111111`.
- **One even light weight (400)** across the whole scale — size and tight tracking do the work.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 80 / 80 | 400 | -2.4px (-3%) |
| Display (h2) | 54 | 400 | -1.6px |
| Subhead (h3) | 24 | 400 | -0.48px |
| Body | 16 / 24 | 400 | 0 |
| UI / button | 16 | 400 | 0 |
| Caption | 14 | 400 | 0 |

Pattern: enormous light-weight headlines with aggressive negative tracking; body a plain 16/400. No bold — the whole voice is a single even weight, which reads editorial and calm despite the scale.

## 4. Component Stylings

### Buttons
- **Primary**: bg black `#000` / `#111`, white text, radius 6 (some 4), h40–42, 16px/400, padding `12px 16px`. Hover: subtle lighten.
- **Secondary**: cream `#faf9f6` fill, ink text, 1px `rgba(17,17,17,.1)` border, small radius.
- **Ghost / link**: transparent ink text, radius 6; "View demo"-style links.

### Inputs
- White/cream bg, 1px hairline, radius 6, ink text, muted placeholder. Focus: cobalt border.

### Cards / panels
- Two modes: **editorial** — sharp (radius 0) sand/cream blocks with a hairline, big type and product imagery; **soft** — rounded 24 cards for product/UI mockups.

### Messenger widget (the signature)
- Floating rounded card (radius ~20), white body with a cobalt `#0007cb` header/brand bar, agent + user chat bubbles (radius ~18, agent light-gray, user cobalt-tinted), a composer input, and the Fin AI answer block. This is Intercom's most recognizable UI.

### Fin AI answer
- White card, cobalt accent, concise answer text with source chips; a "Resolved by Fin" badge.

### Nav
- Warm/transparent, wordmark left, center links (16px ink), right: ghost "View demo" + black "Start free trial".

## 5. Layout Principles

- Nav: ~68px, warm.
- Hero: 80px/400 near-black headline on sand → subhead → dual CTA (black primary + ghost demo), with a Messenger/product mockup and cobalt-blue graphics.
- Body: alternating sand `#d3cec6` and cream `#faf9f6` full-bleed blocks; big editorial type paired with product imagery; occasional cobalt/orange graphic accents; logo wall.
- Wide magazine columns, generous rhythm.
- Spacing: 4px grid; generous magazine-like whitespace and large blocks.

## 6. Depth & Elevation

- Radii: buttons/inputs `4–6px` (crisp), cards vary `0` (editorial blocks) to `24px` (Messenger/soft cards), Messenger bubbles `18–20px`, avatars full.
- Control heights: primary button `40–42px`. Button padding: `12px 16px`.
- Elevation: mostly flat, editorial; warm-neutral color blocks and 1px `rgba(17,17,17,.1)` hairlines. The Messenger widget floats with a soft drop shadow.

## 7. Motion

- Signature hover: the growing underline on links — underline drawn as a background-image that expands via `background-size 0.2s ease-out` (site-wide, ~71 elements at capture).
- Micro-transitions restrained, 150–400ms: `transform/translate/scale/rotate 0.15s cubic-bezier(0.4,…)`; `color/background/border 0.2–0.4s`. Almost nothing animates at rest.
- Keyframe animations: logo marquee (`marquee-left`/`marquee-right`, 17.1s infinite), carousel autoplay, cookie-banner fade. One WAAPI animation observed.
- No GSAP/Three.js/Lottie detected; no video elements on the homepage at capture.
- Set pieces stay composed: Messenger bubbles animate in sequence to mimic a live chat; Fin "thinking" then answering; color blocks and imagery fade/slide on scroll. Never busy.

## 8. Backgrounds, Effects & WebGL

- No canvas or WebGL — nearly flat editorial surfaces.
- Gradients are functional only: a sand fade `rgb(241,238,233) → transparent` as a section-edge scrim; a soft radial ink halo `rgba(29,39,54,.16) → transparent` as an illustration backdrop; otherwise flat black fills.
- Glass: `backdrop-filter: blur(8px)` on the nav.
- No box-shadows on wide elements — elevation is essentially flat; structure comes from color blocks, not depth effects.

## 9. Do's and Don'ts

### Do
- Keep the canvas warm: sand `#d3cec6` and cream `#f1eee9`/`#faf9f6` blocks with near-black ink `#111111` text.
- Use cobalt `#0007cb` as the single loud accent — Messenger header, key highlights, links, graphics.
- Use orange `#ff5600` sparingly, for punch only.
- Keep buttons black (`#000`/`#111`, white text, radius 4–6, 40–42px, padding 12px 16px).
- Keep the entire type scale at one even weight (400); let size and aggressive negative tracking (-3% on the 80px hero) do the work.
- Separate surfaces with 1px `rgba(17,17,17,.1)` hairlines and flat color blocks; reserve the soft drop shadow for the floating Messenger widget.
- Use the two card modes deliberately: sharp radius-0 editorial blocks vs rounded-24 soft product cards (bubbles ~18).
- Use the growing-underline hover for links (`background-size 0.2s ease-out`).
- Focus inputs with a cobalt border.
- Keep spacing on a 4px grid with generous, magazine-like whitespace.
- Keep motion restrained at 150–400ms ease, composed; sequence Messenger bubbles to mimic live chat.

### Don't
- Don't make buttons blue — buttons stay black, not blue.
- Don't use bold — no weight above the single even 400 anywhere in the scale.
- Don't add shadows to sections or cards — elevation is flat; structure comes from color blocks.
- Don't make motion busy — almost nothing animates at rest.

## 10. Responsive Behavior

- Breakpoints (rem-based, Tailwind-style): 40rem/640px, 48rem/768px, 64rem/1024px, 80rem/1280px, 96rem/1536px, 120rem/1920px.
- Specific adaptations (mobile nav pattern, type scale-down): not captured.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#d3cec6` · Text `#111111` · Muted `rgba(17,17,17,.6)` · Border `rgba(17,17,17,.1)` · Accent `#0007cb`
- Font: `ui-sans-serif, system-ui, sans-serif` (brand grotesque not exposed) · Body: 16px · Radius: 4–6px controls / 0 editorial – 24px soft cards · Control height: 40–42px
- Focus: cobalt `#0007cb` border (inputs) · Link hover: growing underline via `background-size 0.2s ease-out`

<intercom_design_language>
Use the Intercom design language: warm sand canvas #d3cec6 with cream surfaces #f1eee9 / #faf9f6 and white, near-black ink #111111 for text, 1px rgba(17,17,17,.1) hairlines. One bold cobalt-blue accent #0007cb (Messenger header, highlights, links) plus a sparing orange #ff5600; buttons stay BLACK, not blue. Type is a single even light weight (400) — huge headlines (80px hero, -3% tracking) stay weight 400, body plain 16/24. Buttons: solid black #000/#111 white text, radius 4-6, 40-42px, padding 12px 16px; secondary is cream with a hairline. Editorial blocks are sharp (radius 0); product/Messenger cards are soft (radius 24, bubbles ~18). Signature component: the floating Messenger widget — white card, cobalt header, sequenced chat bubbles, Fin AI answer. Elevation is flat and editorial — color blocks, no shadows. Links hover with a growing underline (background-size 0.2s ease-out); motion 150-400ms, restrained, almost nothing at rest. Feels: warm, bold, editorial, assured. Avoid: blue buttons, bold type weights, shadows, and busy motion.
</intercom_design_language>