Design System Inspiration of Intercom

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

mono13px · 400 · 1.50 · SaansMono

const fin = new Intercom.Fin();

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

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.

10 — Responsive Behavior

Responsive

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

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.

Palette

Typography

Buttons

Cards

Perfect customer experiences, powered by Intercom

Quote Strip

Forms

FAQ

Spacing

Radius

Elevation

Responsive