Design tokens (YAML front matter)

name: Intercom
colors:
  off-black: '#111111'
  white: '#ffffff'
  canvas: '#faf9f6'
  fin-orange: '#ff5600'
  report-orange: '#fe4c02'
  report-blue: '#65b5ff'
  report-green: '#0bdf50'
  report-red: '#c41c1c'
  report-pink: '#ff2067'
  black-80: '#313130'
  black-60: '#626260'
  muted: '#7b7b78'
  tertiary: '#9c9fa5'
  border: '#dedbd6'
  warm-sand: '#d3cec6'
typography:
  display-hero:
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: '-2.4px'
    use: Display hero, ultra-compressed
  section:
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: '-1.6px'
    use: Section heading
  feature:
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: '-0.48px'
    use: Feature title
  body:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    use: Standard reading text
  nav:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1
    use: Nav / UI
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  full: 9999px
spacing:
  xs: 4
  sm: 8
  md: 12
  base: 16
  lg: 24
  xl: 32
  xxl: 48
  section: 64
components:
  button-primary:
    type: button
    backgroundColor: '#111111'
    textColor: '#ffffff'
    rounded: 4px
    padding: 0px 14px
    use: Primary dark button, scale(1.1) hover
  button-outlined:
    type: button
    backgroundColor: '#faf9f6'
    textColor: '#111111'
    rounded: 4px
    use: Outlined button, 1px off-black border
  button-warm:
    type: button
    backgroundColor: '#faf9f6'
    textColor: '#111111'
    padding: 16px
    use: Warm card button
  card:
    type: card
    backgroundColor: '#faf9f6'
    rounded: 8px
    use: Warm cream card, oat border, no shadow
  nav-link:
    type: tab
    textColor: '#111111'
    typography: 16px Saans
    use: Nav link, off-black on white
fonts:
  roles:
    sans: Saans
    serif: Serrif
    mono: SaansMono

Design System Inspiration of Intercom

Overview

Visual Theme & Atmosphere

Intercom’s website is a warm, confident customer service platform that communicates “AI-first helpdesk” through a clean, editorial design language. The page operates on a warm off-white canvas (#faf9f6) with off-black (#111111) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (#ff5600) — named after Intercom’s AI agent — serves as the singular vibrant accent against the warm neutral palette.

The typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.

What distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use scale(1.1) expansion, creating a physical “growing” interaction. The border system uses warm oat tones (#dedbd6) and oklab-based opacity values for sophisticated color management.

Key Characteristics:

Warm off-white canvas (#faf9f6) with oat-toned borders (#dedbd6)
Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height
Fin Orange (#ff5600) as singular brand accent
Sharp 4px border-radius — near-rectangular buttons and elements
Scale(1.1) hover with scale(0.85) active — physical button interaction
SaansMono uppercase labels with wide tracking (0.6px–1.2px)
Rich multi-color report palette (blue, green, red, pink, lime, orange)
oklab color values for sophisticated opacity management

Primary tasks

Answer customer messages as conversations rather than tickets
Configure the AI agent to deflect tier-one questions
Check how many conversations the AI agent resolved
Send an outbound campaign to existing product users
Work through the inbox with keyboard shortcuts and macros
Book a demo or try the AI agent first

Brand Narrative

Intercom was founded 2011 in California by four Irish designers and engineers — Eoghan McCabe (Chairman, ex-CEO), Des Traynor, Ciaran Lee, and David Barrett (Intercom — Wikipedia, Eoghan McCabe — Crunchbase). The four had previously run a Dublin design consultancy named Contrast and built the bug-tracking tool Exceptional, which they sold to Rackspace 2011 — those proceeds funded Intercom. Initially employed 30 people in Dublin before the founders relocated HQ to San Francisco. Funding/lineage: 2012 angel from Twitter co-founder Biz Stone, then seed from David Sacks, Andy McLoughlin (Huddle), Dan Martell, 500 Global, Digital Garage → Series A $6M March 2013 led by Social Capital (Irish Times — Four Irishmen on a billion-dollar mission) → $250M debt financing 2025 alongside €87M / $94M extra AI investment 2024 (Irish Times — €87M AI investment, Silicon Republic — $250M debt). Originally positioned as “the customer messaging platform” (challenging Zendesk’s ticketing model with conversation-first UX). 2023 launch of Fin — AI chatbot powered by GPT-4 — became the central product story; in 2025 the AI Agent now ships on fin.ai as a discrete product surface alongside intercom.com helpdesk chrome.

Principles

Conversations over tickets. UI implication: main inbox is conversation-shaped, not row-shaped.
Fin is the agent layer. UI implication: Fin Resolutions metric has main-nav placement; AI agent isn’t a sub-feature.
Saans is the type voice. UI implication: warm cream + Saans 80px hero is the brand register.
Hover scale signals interactive. Buttons grow on hover (scale 1.1). UI implication: preserve hover scale; don’t replace with color-only transition.
Cream over white. Default canvas #faf9f6. UI implication: don’t use pure white — the cream is intentional warmth.

Personas

Personas are fictional archetypes informed by Intercom user segments (support team leads, RevOps, AI/Fin admins), not individual people.

Aisha Patel, 33, Dublin. Support team lead at SaaS startup. Configures Fin to deflect 60% of tier-1 tickets.

Marcus Webb, 41, San Francisco. RevOps at B2B SaaS. Uses Intercom outbound for product-led growth campaigns.

Priya Krishnan, 28, Bengaluru. Frontline support agent. Cares about Inbox keyboard shortcuts + macros.

Colors

Primary

Off Black (#111111): --color-off-black, primary text, button backgrounds
Pure White (#ffffff): --wsc-color-content-primary, primary surface
Warm Cream (#faf9f6): Button backgrounds, card surfaces
Fin Orange (#ff5600): --color-fin, primary brand accent
Report Orange (#fe4c02): --color-report-orange, data visualization

Report Palette

Report Blue (#65b5ff): --color-report-blue
Report Green (#0bdf50): --color-report-green
Report Red (#c41c1c): --color-report-red
Report Pink (#ff2067): --color-report-pink
Report Lime (#b3e01c): --color-report-lime-300
Green (#00da00): --color-green
Deep Blue (#0007cb): Deep blue accent

Neutral Scale (Warm)

Black 80 (#313130): --wsc-color-black-80, dark neutral
Black 60 (#626260): --wsc-color-black-60, mid neutral
Black 50 (#7b7b78): --wsc-color-black-50, muted text
Content Tertiary (#9c9fa5): --wsc-color-content-tertiary
Oat Border (#dedbd6): Warm border color
Warm Sand (#d3cec6): Light warm neutral

Typography

Font Families

Primary: Saans, fallbacks: Saans Fallback, ui-sans-serif, system-ui
Serif: Serrif, fallbacks: Serrif Fallback, ui-serif, Georgia
Monospace: SaansMono, fallbacks: SaansMono Fallback, ui-monospace
UI: MediumLL / LLMedium, fallbacks: system-ui, -apple-system

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing
Display Hero	Saans	80px	400	1.00 (tight)	-2.4px
Section Heading	Saans	54px	400	1.00	-1.6px
Sub-heading	Saans	40px	400	1.00	-1.2px
Card Title	Saans	32px	400	1.00	-0.96px
Feature Title	Saans	24px	400	1.00	-0.48px
Body Emphasis	Saans	20px	400	0.95	-0.2px
Nav / UI	Saans	18px	400	1.00	normal
Body	Saans	16px	400	1.50	normal
Body Light	Saans	14px	300	1.40	normal
Button	Saans	16px / 14px	400	1.50 / 1.43	normal
Button Bold	LLMedium	16px	700	1.20	0.16px
Serif Body	Serrif	16px	300	1.40	-0.16px
Mono Label	SaansMono	12px	400–500	1.00–1.30	0.6px–1.2px uppercase

Layout

Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px

Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)

Responsive Behavior

Breakpoints: 425px, 530px, 600px, 640px, 768px, 896px

Elevation & Depth

Minimal shadows. Depth through warm border colors and surface tints.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

shadow.flat: none

Motion & Easing

No motion duration or easing token is promoted. The capture bundle for this reference records no transition or animation property, and no official source consulted publishes a motion scale. The behaviour described below was observed; treat any exact duration or curve as a local extension until a component-level official source verifies it.

Standard cubic-bezier; hover scale 1.1 is signature. prefers-reduced-motion: reduce disables hover scale (color shift only).

Components

Buttons

Primary Dark

Background: #111111
Text: #ffffff
Padding: 0px 14px
Radius: 4px
Hover: white background, dark text, scale(1.1)
Active: green background (#2c6415), scale(0.85)

Outlined

Background: transparent
Text: #111111
Border: 1px solid #111111
Radius: 4px
Same scale hover/active behavior

Warm Card Button

Background: #faf9f6
Text: #111111
Padding: 16px
Border: 1px solid oklab(... / 0.1)

Cards & Containers

Background: #faf9f6 (warm cream)
Border: 1px solid #dedbd6 (warm oat)
Radius: 8px
No visible shadows

Navigation

Saans 16px for links
Off-black text on white
Small 4px–6px radius buttons
Orange Fin accent for AI features

States

State	Treatment
Empty (no conversations)	“Welcome to your Inbox” + onboarding tour
Empty (Fin disabled)	“Enable Fin to deflect tickets” with single CTA
Loading (conversation history)	Skeleton message bubbles in cream tones
Loading (Fin response)	Typing indicator with Fin avatar
Error (sync)	Banner top-of-inbox with retry
Error (Fin failed)	Inline below message + escalate-to-human option
Success (assigned)	Subtle bg shift on conversation row
Success (Fin resolved)	Resolution badge appears on conversation
Skeleton (inbox)	Cream rows with subtle shimmer
Disabled (no permission)	0.5 opacity + tooltip permission level
Loading (long Fin run)	Per-step “Searching knowledge base…” trace

Do’s and Don’ts

Do

Use Saans with 1.00 line-height and negative tracking on all headings
Apply 4px radius on buttons — sharp geometry is the identity
Use Fin Orange (#ff5600) for AI/brand accent only
Apply scale(1.1) hover on buttons
Use warm neutrals (#faf9f6, #dedbd6)

Don’t

Don’t round buttons beyond 4px
Don’t use Fin Orange decoratively
Don’t use cool gray borders — always warm oat tones
Don’t skip the negative tracking on headings

Voice & Tone

Intercom’s voice is support-team-first and product-agentic — speaks as a customer messaging platform that’s positioned itself for the AI agent era (“the only helpdesk designed for the AI Agent era”). Marketing copy emphasizes the support team workflow + AI agent integration.

Context	Tone
CTA	Verb. “Get started”, “Try Fin”, “Book a demo”
Marketing	AI-agent-positioned. Fin (their AI agent) is first-class brand element
Documentation	Practical, integration-heavy
Error	Specific. “Conversation not synced. Refresh to retry.”

Voice samples

Marketing tagline: “The only helpdesk designed for the AI Agent era”

Forbidden phrases. “Revolutionary support”, “AI-powered” without specifics.

Agent Prompt Guide

Quick Color Reference

Text: Off Black (#111111)
Background: Warm Cream (#faf9f6)
Accent: Fin Orange (#ff5600)
Border: Oat (#dedbd6)
Muted: #7b7b78

Example Component Prompts

“Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg.”

Palette

At a glance

Design System · Intercom