Design System Analysis of Intercom

An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans, and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders. The system reads as a careful, product-led publication.

01 — Color Palette

Palette

Brand & Accent
Charcoal (primary)
#111111
System primary — headlines, body type, CTA pill background.
Fin Orange
#ff5600
AI-product accent. Fin CTA, Fin badge only.
Brand Blue
#0007cb
Saturated brand blue — small set of marketing illustrations.
Surface
Canvas (cream)
#f5f1ec
Default page background — soft cream-white, deliberately warm.
Surface 1
#ffffff
Pure white — floating cards (pricing, feature, mockup).
Surface 2
#ebe7e1
Slightly darker cream — startup discount banner, alt rows.
Hairline
#d3cec6
1px borders on cards — soft warm gray.
Inverse Canvas
#000000
Pure black — only on the testimonial / quote callout.
Text
Ink
#111111
Headlines, body type, button labels.
Ink Muted
#626260
Secondary type — meta info, deselected pricing tabs.
Ink Subtle
#7b7b78
Tertiary type — footer columns, helper text.
Report Palette (in-product mockups)
Report Blue
#65b5ff
Analytics chart blue.
Report Green
#0bdf50
Analytics chart green / success.
Report Pink
#ff2067
Analytics chart pink.
Report Lime
#b3e01c
Analytics chart lime.
Report Cyan
#03b2cb
Analytics chart cyan.
02 — Typography Scale

Typography

display-xl72px · 500 · 1.05 · -2.0px · Saans
The only helpdesk designed for AI
display-lg56px · 500 · 1.10 · -1.4px
Get Fin and Intercom for one platform
display-md40px · 500 · 1.15 · -0.8px
Add-ons
headline28px · 500 · 1.20 · -0.5px
Pricing tier title
card-title22px · 500 · 1.25 · -0.3px
Feature card title
subhead20px · 400 · 1.40 · -0.2px
Lead body, intro paragraphs
body-lg18px · 400 · 1.50 · -0.1px
Hero subhead and lead paragraphs.
body16px · 400 · 1.50
Default body — Saans at weight 400 reads as quietly editorial.
body-sm14px · 400 · 1.50
Card body, footer columns.
caption12px · 400 · 1.40
Captions and meta
button15px · 500 · 1.20
Sign up
mono13px · 400 · 1.50 · SaansMono
const fin = new Intercom.Fin();
03 — Button Variants

Buttons

button-primary
button-primary-pressed
button-secondary
button-tertiary
button-fin
pricing-tab-default + pricing-tab-selected
04 — Cards & Containers

Cards

pricing-card · Essential
Essential
$XX
  • Inbox
  • Help Center
  • Reporting
pricing-card-featured · Advanced
Advanced
$XX
  • Multi-brand support
  • Workflows
  • Custom roles
pricing-card · Expert
Expert
$XX
  • SSO & SAML
  • Audit logs
  • SLA management
feature-card
Generic feature card

Used when the section is a feature highlight rather than a pricing tier.

product-mockup-card
// Product UI mockup frame
testimonial-card
"Within six days, Fin is successfully resolving 42% of conversations. It's truly surpassed my expectations."
— Customer, Lessonly
startup-discount-card
Startups get 90% off

Get the AI-first customer service platform that grows with your business.

LESSONLY
SHIPSTATION
LIVING SPACES
EVENTBRITE
UDEMY
AMAZON
cta-banner

Perfect customer experiences, powered by Intercom

Get started with the AI-first customer service platform.

05 — Quote / Inverse Strip

Quote Strip

"Within six days, Fin is successfully resolving 42% of conversations. It's truly surpassed my expectations."
— The deepest dark surface on the page; only used for testimonial callouts.
06 — Form Elements

Forms

07 — FAQ

FAQ

How does Intercom pricing work?
Can I get Fin without buying Intercom?
Will my data be safe?
Can I customize Fin?
08 — Spacing & Radius

Spacing

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px

Radius

xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
xxl · 24px
pill · 9999
09 — Elevation & Depth

Elevation

Level 0 — flat
Level 1 — lift on cream
Level 2 — hairline + soft shadow
Level 3 — deep accent
10 — Responsive Behavior

Responsive

NameWidthKey Changes
Desktop-XL1440pxDefault desktop layout
Desktop1280pxCard grid 3-up maintained
Tablet1024pxCard grid 3-up → 2-up
Mobile-Lg768pxPricing comparison becomes accordion; nav hamburger
Mobile480pxSingle-column; display-xl scales 72px → ~32px
375
768
1024
1280
1440
Touch Targets
  • CTAs hold ≥40px tap height across viewports.
  • Pricing tab pills hold ≥40px tap height.
  • Form inputs hold ≥44px tap target on touch.
Collapsing Strategy
  • Top nav: links collapse to hamburger below 768px.
  • Card grids: 3-up → 2-up at 1024px → 1-up below 768px.
  • Pricing comparison: per-tier accordion below 768px.
  • Display type scales 72px → 40px while preserving negative tracking.