Light interfaceMeasured www.intercom.com

Intercom

Sharp, modern customer-service platform with bold black buttons and crisp edges.

This page is styled with Intercom’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#FAF9F6
Cards, panels, menus

Text#111111
Headings and body

Muted text#111111
Secondary info

Line#DEDBD6
Dividers and outlines

Accent#111111
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 18.9:1Muted on background 18.9:1Text on accent 18.9:1

Every colour found on their site

#111111#FFFFFF#000000#121212#FAF9F6#0007CB#FF5600#D3CEC6#DEDBD6

Typography

Headings use Saans (company-only; shown here with the free look-alike Inter). Body text uses Saans (company-only; shown with Inter).

h1	Saans · 80px · 400 · -2.4px	A complete system for
h2	Saans · 24px · 400 · -0.48px	Two products, one seamless experience
h3	Saans · 20px · 400 · -0.2px	Maximize productivity with an AI-enhanced inbox
p	Serrif · 16px · 300 · -0.16px	Intercom is the only helpdesk with a natively integrated AI
li	Saans · 16px · 400	Product

Corners & shadows

Corner sizes used

6px

4px

50px

Shadows

Shadow 1

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Intercom’s live website. Click to enlarge.

Buttons · 4

Intercom button: Start free trial — #111111 · corners 4px · 40px

Intercom button: Fin AI Agent — No fill · corners 4px · 40px

Intercom button: Intercom helpdesk — #FAF9F6 · corners 0px · 58px

Navigation bar · 1

Intercom Navigation bar: Join Pioneer on October 7th to explore h — fill #FFFFFF · square · Saans 16px

Buttons · 4

Intercom Buttons: Start free trial — fill #111111 · corners 4px · Saans 14px

Intercom Buttons: Fin AI Agent — no fill · corners 4px · Saans 14px

Intercom Buttons: View demo — no fill · corners 4px · Saans 16px

Icons

4 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Intercom product screen: 768 × 390 — 768 × 390

Intercom product screen: 474 × 200 — 474 × 200

Intercom product screen: 2840 × 2520 — 2840 × 2520

Intercom product screen: 2560 × 1269 — 2560 × 1269

Intercom product screen: 474 × 321 — 474 × 321

Intercom product screen: 2560 × 1198 — 2560 × 1198

Intercom product screen: 1688 × 856 — 1688 × 856

Intercom product screen: 1280 × 720 — 1280 × 720

Intercom product screen: 2048 × 1496 — 2048 × 1496

Intercom product screen: 1480 × 987 — 1480 × 987

Do & don’t

What makes it Intercom

Near-black buttons and text instead of a bright brand colour
Very large, tightly spaced headline type
Small, sharp corner radius on buttons and cards, almost square

Use black as the primary action colour for a confident, serious feel
Keep button corners sharp, not rounded
Use big bold headline type with tight spacing

Don’t

Don't rely on bright colour for the primary button
Don't round every corner heavily
Don't use small, timid headline type

For AltLeads: Borrow the black-on-white primary button and sharp corners for a serious, enterprise-grade feel in the CRM.

Copy the tokens

Paste into any project to try this look.

/* Intercom · values measured from https://www.intercom.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #FAF9F6;
  --text: #111111;
  --muted: #111111;
  --line: #DEDBD6;
  --accent: #111111;
  --on-accent: #FFFFFF;
  --radius-button: 4px;
  --radius-card: 50px;
  --radius-small: 4px;
  --button-height: 40px;
  --font-heading: "Saans", "Inter", system-ui, sans-serif;
  --font-body: "Saans", "Inter", system-ui, sans-serif;
  --shadow: rgba(9, 14, 21, 0.16) 0px 5px 40px 0px;
}