Skip to content

Intercom Design System

Soft cream ground, charcoal Saans headlines, hairline white cards and Fin Orange saved for the Fin AI brand. Intercom's DESIGN.md for React and AI tools.

Get ProDownload DESIGN.md
Primary color
#111111
Typeface
Saans
Shape
Mixed
Base radius
8px
Colors
25
Type tokens
13
Components
20
Spacing values
8

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

5 highlights

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

Live at intercom.com

Intercom in production, as captured. Scroll the window to see the whole page.

Visit intercom.com (opens in a new tab)
Intercom's website at intercom.com

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

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

Radii and spacing

8 corner radii and 8 spacing values. Shape language: mixed, on a 8px base radius.

Radii8

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl24px
  • pill9999px
  • full9999px

Spacing8

  • xxs4px
  • xs8px
  • sm12px
  • md16px
  • lg24px
  • xl32px
  • xxl48px
  • section96px

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

The system, in use

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

Marketing heroThe homepage: its nav, a headline and the main call to action.
Intercom
Sign up

Stay close to the people who matter

Share moments, start conversations and find your communities, on any device.

Join nowGet the app
Intercom
MMayaonline
Are we still on for Saturday?9:40Yes. 10am at the park?9:41Perfect, I'll bring coffee9:42
Message

Intercom design system FAQ

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

Related reading

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

Use Intercom in your project

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

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Intercom.

  2. 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.

  3. 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.

More systems like this

Discord, Loom, Resend and 11 more in Communication & Messaging: each brand's colors, type and components in one file your AI agent builds from.

All 15 in Communication & Messaging

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.

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
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

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
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

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
  • Cancel anytime
  • Keep what you've shipped