What is Intercom's primary brand color?

Intercom's system primary is charcoal (#111111), not Fin Orange. Charcoal carries every default CTA, headline, and body label across the marketing surface. Fin Orange (#ff5600) is an AI-product accent reserved exclusively for the Fin CTA and the Fin badge inside pricing — it is not a generic primary and never appears as a section background or generic button color.

Why does Intercom use a cream canvas instead of white?

The cream canvas (#f5f1ec) is the brand's defining surface signal — it reads as editorial and calm rather than bright SaaS. White (#ffffff) is reserved for floating cards that lift off the cream ground. The contrast between cream page floor and white card surface is the system's primary depth cue, replacing the drop shadows other systems lean on. There is no pure white canvas anywhere in the public marketing site.

What typography does Intercom use, and what should I use if Saans isn't available?

Intercom runs Saans, its proprietary geometric sans, for the entire hierarchy — display at weight 500, body at weight 400, plus SaansMono for code inside product mockups. Negative letter-spacing scales with size, from -2.0px at 72px display down to 0 at 16px body. Inter at weight 500 is the closest free substitute; Söhne (paid) or Geist Sans also work. For SaansMono, JetBrains Mono at weight 400 is a clean swap.

Does Intercom's design system include a dark mode?

No — the public marketing site does not ship a dark theme. The only true-black surface in the system is the testimonial / quote callout strip, which uses inverse-canvas (#000000) and inverse-surface-1 (#313130) as a deliberate accent band rather than a global mode. The DESIGN.md file documents these inverse tokens but they are scoped to that single component.

When can I use Fin Orange?

Only on Fin AI product surfaces — the `button-fin` CTA on Fin product pages, the Fin badge in pricing tiers, and a small set of inline emphasis moments tied to Fin. Never as a section background, never as a generic primary CTA, and never paired with charcoal CTAs in the same viewport. The system explicitly avoids combining the two button styles to keep the AI product visually distinct from the core marketing CTA.

How do I use this DESIGN.md to build a React project?

Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce the cream-over-white discipline rather than a generic shadcn theme. You can also reference the 32 color tokens, 14 type styles, and 21 components directly: every value is a quoted hex or size you can paste into Tailwind config, CSS variables, or your own component library. Combine the file with shadcn/ui primitives for fastest setup.

Intercom Design System

Intercom's design system as a DESIGN.md file.

About Intercom DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source intercom.com

Communication & Messaging
AI & LLM Platforms

Intercom's marketing system is the rare SaaS canvas that refuses pure white. The page floor is a soft cream (#f5f1ec) and floating tiles step up onto white (#ffffff) cards bounded by warm hairlines (#d3cec6). The brand reads as editorial — closer to a product-led publication than a marketing site. Display type is Saans, Intercom's proprietary geometric sans, set at weight 500 with measured negative tracking; body type is the same family at weight 400. The only chromatic energy is Fin Orange (#ff5600), and it is scoped strictly to Fin AI product CTAs and the Fin badge. The system trusts product screenshots to do the work that bright color does on other SaaS sites.

The DESIGN.md file packages 32 color tokens, 14 typography styles, 8 corner radii, 8 spacing values, and 21 components. Colors split into brand, surface, hairlines, ink, and an in-product report palette (#65b5ff, #0bdf50, #ff2067, #b3e01c) that lives inside analytics dashboards rendered in mockups. The format is the Google Labs DESIGN.md spec — a machine-readable file with token references like `{colors.fin-orange}` and `{typography.display-xl}` that designers and AI agents can both parse.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Intercom's restraint: cream over white, charcoal type, Fin Orange held in reserve. Reference the tokens directly in Tailwind config or CSS variables, or paste the components block into a design audit. The discipline worth studying is the refusal of the single most common SaaS shortcut — gradient hero, pastel section block, drop-shadow card — in favor of one editorial gesture (cream + white) repeated across every section.

What makes it distinct

Cream canvas (#f5f1ec) instead of pure whitethe warm ground is the brand's defining signal
Single accentFin Orange (#ff5600) reserved for AI-product CTAs and the Fin badge, never decorative
Saans proprietary sans carries the entire scale at weight 500 display, 400 bodyno second display family
Negative tracking scales with size-2.0px at 72px display, falling to 0 on body type
Modest radii12px on cards, 16px on product mockups, no pill CTAs anywhere in the system

Live at intercom.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

intercom.com

Explore Intercom

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Intercom design system FAQ

Common questions about Intercom's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Intercom Design

Intercom's design team site — case studies on the Fin AI rebrand and the Saans typeface.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Intercom in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→