Intercom Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

12type steps

6radius steps

4pxspacing base

Intercom, in one page

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.

Do's and don'ts

Do

Reserve {colors.canvas} cream as the system's anchor surface — never replace with pure white.
Lift cards from cream onto white ({colors.surface-1}) for hierarchy.
Use button-fin Fin Orange ONLY on Fin AI product CTAs and Fin badges.
Pair Saans display at weight 500 with body at 400.
Use product UI screenshots as the protagonist of every section.
Use {rounded.lg} 12px for cards and {rounded.xl} 16px for product mockup tiles.
Apply negative tracking proportionally to display sizes.

Don't

Don't use pure white as the canvas.
Don't use Fin Orange as a section background or as a generic primary CTA.
Don't add drop shadows to floating cards.
Don't introduce a second display family.
Don't pill-round CTAs.
Don't write all-caps tracked eyebrows.
Don't promote the report palette colors to brand-level surfaces.
Don't combine charcoal CTAs and Fin Orange CTAs in the same viewport.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Intercom design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #111111
- on-primary: #ffffff
- ink: #111111
- ink-muted: #626260
- ink-subtle: #7b7b78
- ink-tertiary: #9c9fa5
- canvas: #f5f1ec
- surface-1: #ffffff
- surface-2: #ebe7e1
- inverse-canvas: #000000

Type:
- families: Saans, SaansMono, Söhne, Inter
- scale: 12, 13, 14, 15, 16, 18, 20, 22, 28
- weights: 400, 500

Shape:
- radius: 4, 6, 8, 12, 16, 24

Spacing: 4, 8, 10, 12, 16, 24, 32, 48, 64, 96

Rules:
- Reserve `{colors.canvas}` cream as the system's anchor surface — never replace with pure white.
- Lift cards from cream onto white (`{colors.surface-1}`) for hierarchy.
- Use `button-fin` Fin Orange ONLY on Fin AI product CTAs and Fin badges.
- Pair Saans display at weight 500 with body at 400.
- Use product UI screenshots as the protagonist of every section.
- Use `{rounded.lg}` 12px for cards and `{rounded.xl}` 16px for product mockup tiles.

Avoid:
- Don't use pure white as the canvas.
- Don't use Fin Orange as a section background or as a generic primary CTA.
- Don't add drop shadows to floating cards.
- Don't introduce a second display family.
- Don't pill-round CTAs.
- Don't write all-caps tracked eyebrows.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox.

Brand & Accent

Charcoal ({colors.ink}): The system primary surface. Headlines, body type, primary CTA pill background — all charcoal.
White ({colors.on-primary}): Text on charcoal CTAs; canvas of floating cards.
Fin Orange ({colors.fin-orange}): The AI-product accent. Used on the Fin CTA, Fin badge, and a small set of inline emphasis moments.
Report Orange ({colors.report-orange}): A slightly different orange used inside the report / analytics palette for in-product mockups.
Brand Blue ({colors.brand-blue}): Saturated brand blue (#0007cb) — used on a small set of marketing illustrations.

Surface

Canvas ({colors.canvas}): Default page background — soft cream-white #f5f1ec.
Surface 1 ({colors.surface-1}): Pure white — used for floating cards (pricing, feature, product-mockup).
Surface 2 ({colors.surface-2}): Slightly darker cream — startup-discount banner, alt-row stripes.
Hairline ({colors.hairline}): 1px borders on cards — soft warm gray (#d3cec6).
Hairline Soft ({colors.hairline-soft}): Even softer dividers between FAQ rows and footer columns.
Inverse Canvas ({colors.inverse-canvas}): Pure black — only on the testimonial / quote callout strip.
Inverse Surface 1 ({colors.inverse-surface-1}): One step lighter — hovered footer items in dark contexts.

Text

Ink ({colors.ink}): All headlines, body type, button labels — charcoal #111111.
Ink Muted ({colors.ink-muted}): Secondary type at #626260 — meta info, deselected pricing tabs.
Ink Subtle ({colors.ink-subtle}): Tertiary type at #7b7b78 — footer columns, helper text.
Ink Tertiary ({colors.ink-tertiary}): Quaternary type at #9c9fa5 — disabled, footnotes.
Inverse Ink ({colors.inverse-ink}): White on black — quote-strip type.
Inverse Ink Muted ({colors.inverse-ink-muted}): Light gray on black — quote-strip meta.

Semantic & Report Palette (in-product mockups)

Error Red ({colors.semantic-error}): Form validation, destructive states.
Success Green ({colors.semantic-success}): Positive states (also {colors.report-green}).
Report Blue ({colors.report-blue}): Analytics chart blue.
Report Pink ({colors.report-pink}): Analytics chart pink.
Report Lime ({colors.report-lime}): Analytics chart lime.
Report Cyan ({colors.report-cyan}): Phone country selector accent.

The report palette appears INSIDE product UI mockups — these are Intercom's in-product chart colors, not marketing surface colors.

Type scaleRead the full spec

Font Family

Saans — Intercom's proprietary geometric sans, fallback Saans Fallback, ui-sans-serif, system-ui. Carries display, body, eyebrow, and button.
SaansMono — Proprietary mono, fallback SaansMono Fallback, ui-monospace. Used inside code snippets shown in product mockups.

The same family carries the entire hierarchy. Hierarchy is carried by size + weight + tracking, not by family change.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	72px	500	1.05	-2.0px	Largest hero headline
`{typography.display-lg}`	56px	500	1.10	-1.4px	Section opener headlines
`{typography.display-md}`	40px	500	1.15	-0.8px	Sub-section headlines
`{typography.headline}`	28px	500	1.20	-0.5px	Pricing tier titles, CTA banner
`{typography.card-title}`	22px	500	1.25	-0.3px	Card title, feature card
`{typography.subhead}`	20px	400	1.40	-0.2px	Lead body, intro paragraphs
`{typography.body-lg}`	18px	400	1.50	-0.1px	Hero subhead, lead paragraphs
`{typography.body}`	16px	400	1.50	0	Default body
`{typography.body-sm}`	14px	400	1.50	0	Card body, footer
`{typography.caption}`	12px	400	1.40	0	Captions, meta
`{typography.button}`	15px	500	1.20	0	Pill / square button labels
`{typography.eyebrow}`	14px	500	1.30	0	Section eyebrow (sentence case)
`{typography.mono}`	13px	400	1.50	0	SaansMono for code in mockups

Principles

Weight 500 carries display. Saans at 500 reads as confident without bold.
Negative letter-spacing scales with size. -2.0px at 72px (≈3% of size), down to 0 on body.
Line-heights tighten on display, relax on body. 1.05 at display-xl, 1.50 at body.
No mono on chrome. SaansMono lives in product UI; marketing chrome stays in Saans.
Eyebrow uses sentence case at 14px / 500 weight — no all-caps tracking.

Note on Font Substitutes

If implementing without Saans, suitable substitutes include Söhne (paid), Inter (free, weight 500), or Geist Sans (free). Inter at weight 500 is the closest free substitute; SaansMono can be approximated with JetBrains Mono at weight 400.

Components and layoutRead the full spec

Buttons

button-primary — Charcoal CTA. The default primary CTA across all pages.

Background {colors.ink}, text {colors.on-primary}, type {typography.button}, padding 10px 18px, rounded {rounded.md}.
Pressed state lives in button-primary-pressed.

button-secondary — White button on cream. Used for secondary CTAs.

Background {colors.surface-1}, text {colors.ink}, type {typography.button}, padding 10px 18px, rounded {rounded.md}. 1px {colors.hairline} border.

button-tertiary — Plain text button.

Background {colors.canvas}, text {colors.ink}, type {typography.button}, rounded {rounded.md}, padding 10px 18px.

button-fin — Fin Orange CTA — reserved for Fin AI product CTAs.

Background {colors.fin-orange}, text {colors.on-primary}, type {typography.button}, rounded {rounded.md}, padding 10px 18px.

Pricing Tabs

pricing-tab-default + pricing-tab-selected — Pill-toggle on /pricing.

Default: {colors.canvas} background, {colors.ink-muted} text, rounded {rounded.pill}.
Selected: {colors.surface-1} white background, {colors.ink} text — selected = lift onto white.

Cards & Containers

pricing-card — Each tier on /pricing.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px.

pricing-card-featured — Featured / recommended tier — inverts to charcoal.

Background {colors.ink}, text {colors.on-primary}, otherwise identical structure.

feature-card — Generic feature highlight.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px.

product-mockup-card — The dominant card type — frames a high-fidelity product UI screenshot.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.xl}, padding 24px.

testimonial-card — Customer quote with avatar + name + company.

Background {colors.surface-1}, text {colors.ink}, type {typography.body-lg}, rounded {rounded.lg}, padding 32px.

startup-discount-card — The "Startups get 90% off" tinted card.

Background {colors.surface-2}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 32px.

customer-logo-tile — Small tile in the customer marquee.

Background {colors.canvas}, text {colors.ink-muted}, type {typography.caption}, rounded {rounded.xs}, padding 16px.

cta-banner — Closing CTA panel near page bottom.

Background {colors.surface-1}, text {colors.ink}, type {typography.headline}, rounded {rounded.lg}, padding 48px.

Inputs & Forms

text-input + text-input-focused — Form fields on contact and search overlays.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 10px 14px.

FAQ

faq-row — Expandable accordion row in the pricing FAQ.

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 24px. 1px {colors.hairline-soft} bottom rule.

Navigation

top-nav — Sticky cream bar with the Intercom wordmark left, nav links centered, log-in + sign-up pair right.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, height 56px.

Footer

footer — Dense link grid on {colors.canvas} cream with the Intercom wordmark left.

Background {colors.canvas}, text {colors.ink-muted}, type {typography.caption}, padding 64px 32px.

Responsive behaviourRead the full spec

Breakpoints

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

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; primary CTA stays visible.
Card grids: 3-up → 2-up at 1024px → 1-up below 768px.
Pricing comparison: collapses into per-tier accordion below 768px.
Display type: {typography.display-xl} 72px scales toward {typography.display-md} 40px on mobile.

Image Behavior

Product UI screenshots maintain aspect ratio and never crop.
Customer logos in the marquee may collapse from 6-up to 3-up below 768px.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-intercom {--page-bg: #f5f1ec;
  --page-bg-gradient: none;
  --text-color: #111111;
  --heading-color: #111111;
  --link-color: #111111;
  --link-hover-color: #000000;
  --border-color: #ccc9c5;
  --card-bg: #f5f1ec;
  --card-shadow: 0 1px 2px rgba(17,17,17,0.06);
  --card-hover-shadow: 0 6px 18px rgba(17,17,17,0.12);
  --header-bg: #111111;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f5f1ec;
  --footer-text-color: #615f5e;
  --button-bg: #111111;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #e7e4df;
  --button-secondary-text-color: #111111;
  --button-secondary-hover-bg: #dad6d2;
  --button-secondary-border: 1px solid #ccc9c5;
  --prompt-bg: #eae6e1;
  --prompt-text-color: #111111;
  --base-font: var(--font-mono);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

expo 81.7%
clay 81.4%
elevenlabs 80.6%
cursor 79.2%
cal 78.3%

Where this came from

Source document: volt/design-md/intercom/DESIGN.md · 22.6 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.