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 25 colors tokens, 14 type styles, and 20 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. Fin Orange #ff5600, Saans, cream canvas #f5f1ec, 20 components. For React, Next.js, and AI tools.

Get Pro Download DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP

Primary: #111111
Typeface: Saans
Shape: Mixed
Base radius: 8px
Colors: 25
Type tokens: 13
Components: 20
Spacing values: 8

About

About Intercom DESIGN.md

Curated by Dov Azencot · Updated May 12, 2026 · Source intercom.com (opens in a new tab)

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 25 colors tokens, 14 typography styles, 8 corner radii, 8 spacing values, and 20 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

intercom.com

Live at intercom.com

A snapshot of the brand in production. Scroll the frame to see the whole page.

Visit intercom.com

Colors

25 colors

Intercom's system anchors on #111111 (primary) as its primary color. Type is set in Saans across 13 tokens from 12px to 72px, weights 400–500. Shape language is mixed across 20 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 2

Surface

Page and card backgrounds · 3

Text

Headlines, body, captions · 8

Borders & Hairlines

Dividers, outlines, rules · 2

Semantic

Status, errors, success, links · 2

Other

Specialty colors · 8

Typography

13 type tokens

Set in Saans across 13 tokens, from 12px to 72px, weights 400–500. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

display-xl72px · weight 500 · lh 1.05 · tracking -2.0pxThe quick brown fox jumps over the lazy dog
display-lg56px · weight 500 · lh 1.1 · tracking -1.4pxThe quick brown fox jumps over the lazy dog
display-md40px · weight 500 · lh 1.15 · tracking -0.8pxThe quick brown fox jumps over the lazy dog
headline28px · weight 500 · lh 1.2 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
card-title22px · weight 500 · lh 1.25 · tracking -0.3pxThe quick brown fox jumps over the lazy dog
subhead20px · weight 400 · lh 1.4 · tracking -0.2pxThe quick brown fox jumps over the lazy dog
body-lg18px · weight 400 · lh 1.5 · tracking -0.1pxThe quick brown fox jumps over the lazy dog
body16px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
caption12px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
button15px · weight 500 · lh 1.2The quick brown fox jumps over the lazy dog
eyebrow14px · weight 500 · lh 1.3The quick brown fox jumps over the lazy dog
mono13px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog

Layout

Radii and spacing

8 corner radii and 8 spacing values. Shape language: mixed.

Radii

xs4px
sm6px
md8px
lg12px
xl16px
xxl24px
pill9999px
full9999px

Spacing

xxs4px
xs8px
sm12px
md16px
lg24px
xl32px
xxl48px
section96px

Components

20 components

Each rendered from its tokens (color, type, radius, padding) on Intercom's own canvas.

Button Primary
button-primaryButton Primary
Button Primary Pressed
button-primary-pressedButton Primary Pressed
Button Secondary
button-secondaryButton Secondary
Button Tertiary
button-tertiaryButton Tertiary
Button Fin
button-finButton Fin
Pricing Card
pricing-cardPricing Card
Pricing Card Featured
pricing-card-featuredPricing Card Featured
Feature Card
feature-cardFeature Card
Product Mockup Card
product-mockup-cardProduct Mockup Card
Testimonial Card
testimonial-cardTestimonial Card
Customer Logo Tile
customer-logo-tileCustomer Logo Tile
Type here…
text-inputText Input
Type here…
text-input-focusedText Input Focused
Pricing Tab Default
pricing-tab-defaultPricing Tab Default
Pricing Tab Selected
pricing-tab-selectedPricing Tab Selected
Faq Row
faq-rowFaq Row
Cta Banner
cta-bannerCta Banner
Startup Discount Card
startup-discount-cardStartup Discount Card
Top Nav
top-navTop Nav
Footer
footerFooter

In use

The system, in use

Intercom's tokens on the kind of product it builds.

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more

Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.

FAQ

Intercom design system FAQ

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

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

Download the DESIGN.md
One machine-readable file: every color, type, radius, spacing, and component token of Intercom.
Feed it to your AI tool
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Intercom's visual language.
Reference the tokens directly
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md: overview, rationale, do’s and don’ts

Overview

Intercom's marketing canvas is a soft cream-white ground ({colors.canvas} ≈ #f5f1ec) — not pure white. The warmth is the brand's signal: this is editorial, calm, and product-focused, not bright SaaS. On top of the cream canvas sit white floating cards ({colors.surface-1}), thin hairline dividers ({colors.hairline}), and charcoal type ({colors.ink} #111111).

Display type is Saans — Intercom's proprietary geometric sans — set at weight 500 with measured negative letter-spacing (-2.0px on 72px display). Body type is the same family at weight 400. The single proprietary mono is SaansMono, used sparingly for code snippets and product UI screenshots embedded in the marketing surface.

The single chromatic accent is Fin Orange ({colors.fin-orange} #ff5600) — Intercom's AI-product brand color. It surfaces on the Fin product CTA, the Fin badge in pricing, and a few inline emphasis moments. It is NOT a system primary; the system primary is charcoal {colors.ink}. Intercom also maintains a small report palette ({colors.report-blue}, {colors.report-green}, {colors.report-pink}, {colors.report-lime}) used inside in-product analytics surfaces shown in mockups.

The page rhythm is heavy on product mockups: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with {rounded.xl} 16px corners. The marketing chrome is intentionally quiet so the product can be the protagonist.

Key Characteristics:

Cream canvas ({colors.canvas} #f5f1ec) is the brand's defining surface — neither white nor gray, deliberately warm.
Product-screenshot-led page rhythm: every section centers a product mockup card, marketing chrome stays minimal.
Saans proprietary sans-serif carries the entire hierarchy; SaansMono for code-only contexts.
Charcoal {colors.ink} (#111111) is the system primary — buttons, headlines, body type all sit on charcoal.
Fin Orange ({colors.fin-orange} #ff5600) is the AI product color — used on the Fin CTA and Fin badge, never decoratively.
Display tracking pulls aggressively negative (-2.0px on 72px); body stays at 0.
Card corners stay modest at {rounded.lg} 12px and {rounded.xl} 16px — never pill-rounded; never square.

Known Gaps

The report palette lives in product analytics dashboards rendered inside marketing mockups; they are documented for completeness but are not brand surface colors.
Form-field error and validation styling is not visible on the inspected pages.
Dark mode is not documented because the marketing site does not ship a dark theme.
The helpdesk / inbox product surfaces show in-product UI states that aren't formal marketing chrome.
Saans and SaansMono are proprietary; an open-source substitute (Inter, Söhne, Geist) is acceptable.

Communication & Messaging

More systems like this

More DESIGN.md files in Communication & Messaging.

All 15 in Communication & Messaging

Pricing

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

How many people can use the license.
Client work, SaaS products and anything you charge for.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
Complete multi-page sites you can ship as they are.Templates: All 14 templates
React icons from every major library, installable with one command.React icons: 294k+ icons
Presets that restyle every block, in light and dark.Themes: All 59 themes
Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats
Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro

Intercom Design System

About Intercom DESIGN.md

What makes it distinct

Live at intercom.com

25 colors

Brand & Accent

Surface

Text

Borders & Hairlines

Semantic

Other

13 type tokens

Radii and spacing

Radii

Spacing

20 components

The system, in use

Intercom design system FAQ

What is Intercom's primary brand color?

Why does Intercom use a cream canvas instead of white?

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

Does Intercom's design system include a dark mode?

When can I use Fin Orange?

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

Related reading

Use Intercom in your project

Download the DESIGN.md

Feed it to your AI tool

Reference the tokens directly

Overview

Known Gaps

More systems like this

Build it with Pro

Individual

Team

Organization

Individual

Team

Organization

Your system, built for you