---
title: "Intercom design system"
variant: extended
source: https://www.intercom.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/intercom-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Intercom · Design System

> Editorial calm for human and AI service

**Theme:** light · **Industry:** saas · **Source:** https://www.intercom.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Intercom pairs a restrained black-and-warm-white interface with editorial typography and vivid product imagery. Spacious alternating sections make the helpdesk and AI Agent story feel clear, human, and product-led.

## North star

Keep the interface quiet and editorial, using generous space and product imagery to make the software story tangible.

## Overview

The page is built on a white canvas with recurring warm ivory bands, creating a quiet editorial rhythm rather than a dense software dashboard. Near-black text and primary buttons provide strong contrast; muted gray is reserved for secondary copy, while saturated blue is a small interaction accent. Saans carries navigation, controls, and compact headings, while the lighter serif face gives body copy and selected links a more human, magazine-like voice. Large centered hero typography sits between loosely framed image fragments, then gives way to wide product-interface imagery and alternating feature sections. The layout uses a measured central content width, broad section intervals, and generous internal breathing room. Product screenshots are framed by warm neutral fields; occasional human and illustrative imagery adds character without overwhelming the interface. Cards remain mostly flat, with fine hairlines defining testimonial and content boundaries.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, hero field, and clean sections surrounding product imagery. |
| Warm Canvas | `#faf9f6` | `--color-warm-canvas` | surface | Recurring ivory section bands that alternate with white across the page. |
| Soft Ink | `#111111` | `--color-soft-ink` | brand | Main headings, navigation, body emphasis, and solid primary CTA backgrounds. |
| Mist Gradient | `#c8cbd0` | `--color-mist-gradient` | semantic | Gradient stop in decorative visual effects; not a defining page surface. |
| Oat Surface | `#f1eee9` | `--color-oat-surface` | surface | Warm card, button, and navigation-highlight surface. |
| Quiet Gray | `#585858` | `--color-quiet-gray` | neutral | Muted explanatory copy and secondary text. |
| Charcoal Copy | `#403f3f` | `--color-charcoal-copy` | neutral | Occasional body and link text, softer than the primary ink. |
| True Black | `#000000` | `--color-true-black` | brand | Footer and selected CTA or link text; also appears in text treatments. |
| Fine Rule | `#e7e7e7` | `--color-fine-rule` | semantic | Thin card outlines and quiet structural separators. |
| Stone Divider | `#dedbd6` | `--color-stone-divider` | semantic | Subtle card and navigation boundaries. |
| Pale Button | `#e3e2df` | `--color-pale-button` | semantic | Light button or navigation detailing, not a major brand field. |
| Putty Panel | `#d3cec6` | `--color-putty-panel` | surface | Occasional testimonial or product-card backing surface. |
| Mid Gray | `#888888` | `--color-mid-gray` | neutral | Sparse supporting text and low-emphasis UI copy. |
| Footer Gray | `#666666` | `--color-footer-gray` | neutral | Low-emphasis footer or button text. |
| Caption Gray | `#707070` | `--color-caption-gray` | neutral | Secondary caption text. |
| Signal Blue | `#0007cb` | `--color-signal-blue` | accent | Sparse saturated accent for interaction emphasis and small interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf9f6` (Warm Canvas) · `--color-surface-2` → `#f1eee9` (Oat Surface) · `--color-surface-3` → `#d3cec6` (Putty Panel) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#111111` (Soft Ink) · `--color-text-subtle` → `#585858` (Quiet Gray) · `--color-border` → `#e7e7e7` (Fine Rule) · `--color-accent` → `#0007cb` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#faf9f6` | 19.95:1 | AAA |
| `#000000` | `#f1eee9` | 18.15:1 | AAA |
| `#000000` | `#d3cec6` | 13.41:1 | AAA |
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#faf9f6` | 17.94:1 | AAA |
| `#111111` | `#f1eee9` | 16.32:1 | AAA |
| `#111111` | `#d3cec6` | 12.06:1 | AAA |
| `#585858` | `#ffffff` | 7.11:1 | AAA |
| `#585858` | `#faf9f6` | 6.76:1 | AA |

### Gradients

- `linear-gradient(in oklab, rgb(200, 203, 208) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right in oklab, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(to right, oklab(0.177637 0.00000810623 0.00000356138 / 0.8) 0%, oklab(0.177637 0.00000810623 0.00000356138 / 0.8) 100%)`
- `linear-gradient(to right, oklab(0 0 0 / 0.7) 0%, oklab(0 0 0 / 0.7) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Saans | `--font-display` | webfont | 400 | Navigation, headings, buttons, and interface labels | Inter |
| Serrif | `--font-body` | webfont | 300 | Body copy and selected text links | Lora |
| SaansMono | `--font-mono` | webfont | 400, 500 | Eyebrows and code-like labels | IBM Plex Mono |

- **Saans:** Clean sans-serif; measured regular weight, with compact tracking on display and headline styles.
- **Serrif:** Light serif adds an editorial, human counterpoint; body copy uses close tracking and relaxed leading.
- **SaansMono:** Monospaced uppercase labels with expanded tracking; used sparingly for section markers.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | -0.03em | — | Saans | Oversized centered hero headline. |
| h1 | 54px | 400 | 1 | -0.03em | — | Saans | Primary page and feature-section headings. |
| h2 | 40px | 300 | 1 | -0.03em | — | Serrif | Editorial serif section headings. |
| h3 | 28px | 400 | 1 | -0.034em | — | Saans | Feature titles and supporting section headings. |
| h4 | 24px | 400 | 1 | -0.02em | — | Saans | Smaller card and subsection headings. |
| body | 16px | 300 | 1.4 | -0.01em | — | Serrif | Explanatory copy, often in the light serif face. |
| caption | 14px | 400 | 1.25 | 0 | — | Saans | Image captions and compact supporting labels. |
| button | 16px | 400 | 1.5 | 0 | — | Saans | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1.1 | 0 | — | Saans | Main navigation and announcement text. |
| link | 16px | 300 | 1.4 | -0.01em | — | Serrif | Inline explanatory and editorial links. |
| eyebrow | 12px | 400 | 1 | 0.05em | uppercase | SaansMono | Uppercase mono section labels. |
| code | 12px | 400 | 1 | 0.05em | uppercase | SaansMono | Compact mono labels and technical-style annotations. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 14, 16, 20, 24, 32, 48, 64, 80, 96, 112 px.
- Section rhythm 80px · element gap 8px · card padding 32px · max content width 1171px.

Use a centered content frame with a measured maximum width of 1171px and comfortable density. The hero is centered and spacious, with cropped image fragments positioned asymmetrically around its text. Below it, alternate white and warm ivory section bands, mixing split feature introductions with wide product screenshots, card rows, logo grids, testimonials, and pricing. Keep headings and copy aligned to clear columns, and preserve large section intervals rather than compressing content. The footer changes to a dense multi-column link layout.

## Shape & elevation

- Radius: button `4px` · nav `6px` · xs `4px` · sm `6px`
- Shadow `xl` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.75) 0px 9.841px 82.665px 0px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

The design is predominantly flat: white and warm ivory bands do most of the grouping, with fine gray hairlines defining select cards. Avoid routine drop shadows and elevated UI panels. Layer product screenshots and collage imagery for depth, keeping borders square and restrained. A strong shadow appears only as an isolated decorative treatment, not as a general card system.

## Imagery

Use product-interface screenshots as the main evidence of the offering, displayed large and often layered over warm neutral backdrops. Mix in cropped photographic fragments, customer portraits, and sparse hand-drawn or cutout illustrations for a human editorial feel. Keep images integrated into open compositions rather than enclosing every visual in a heavy card. The announcement strip can use a vivid abstract image treatment.

## Components

### Announcement strip

Slim top message area with a short release announcement and a text link, set over an image-led abstract strip.

### Primary CTA

Solid #111111 button with white Saans text and a small measured corner radius; hover can use the measured Signal Blue #0007cb.

### Secondary CTA

Transparent button with a #111111 outline and matching dark label, paired beside the primary action.

### Product showcase

Wide product screenshot composition with overlapping UI imagery and a warm neutral backing surface.

### Feature cards

Editorial feature row with concise headings, serif supporting copy, and minimal borders or panel fills.

### Testimonial

Quote-led customer proof block with a fine #e7e7e7 border, generous padding, and portrait imagery.

### Footer link columns

Compact multi-column navigation group with small uppercase category labels and dense, understated links.

### Measured component styles

- **Primary button** (“Start free trial”): background #111111 · text #ffffff · radius 4px · padding 0px 14px · 400 16px Saans
- **Secondary button** (“View demo”): transparent background · text #111111 · border 1px solid #111111 · radius 4px · padding 0px 14px · 400 16px Saans
- **Link** (“Fin”): transparent background · text #111111 · radius 0px · padding 0px · 300 16px Serrif
- **Card** (““We’ve been seeing around 560,000 resolu”): transparent background · text #111111 · border 1px solid #e7e7e7 · radius 0px · padding 32px · 400 16px Saans
- **Navigation item** (“Introducing Fin 4. A major step toward a”): transparent background · text #111111 · radius 0px · padding 0px · 400 14px Saans

## Do

- Alternate pure white with warm ivory section backgrounds.
- Use Saans for controls and clear interface hierarchy.
- Reserve the serif face for editorial copy and selected links.
- Let product screenshots occupy broad, uncluttered areas.
- Pair primary and outlined secondary CTAs.
- Use blue only as a restrained interaction accent.

## Don't

- Do not turn every section into a boxed card grid.
- Do not replace the warm neutral bands with saturated backgrounds.
- Do not use heavy shadows as the default separation method.
- Do not crowd the hero with dense explanatory text.
- Do not make every heading serif or every paragraph sans-serif.
- Do not let decorative imagery overpower product evidence.

## Agent prompt

Build a new Intercom-style SaaS page with a calm editorial hierarchy and generous whitespace. Use Gallery White (#ffffff) as the main canvas, alternating with Warm Canvas (#faf9f6) for broad section bands. Set core headings, navigation, and controls in a clean Saans-like sans-serif; use a light editorial serif for selected body copy. Use Soft Ink (#111111) for high-contrast text and solid primary CTAs, with white labels; outline secondary actions in the same ink. Keep Signal Blue (#0007cb) rare and interaction-led. Organize content in a centered frame, mixing split feature sections, wide product screenshots, compact proof cards, testimonials, and a restrained footer. Prefer hairlines over shadows, and use human photography or sparse illustration as supporting accents rather than the main story.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and CTAs with asymmetrically cropped image fragments at the sides. | announcement link, primary and secondary CTA, trial reassurance | large sans headline, centered copy, floating image fragments |
| 2 | product-showcase | Warm ivory band with a wide overlapping interface showcase. | product comparison labels, visual product preview | large product screenshot, warm neutral backdrop |
| 3 | logo-cloud | Centered heading above a multi-row grid of customer logos. | social proof | monochrome logo grid, open white space |
| 4 | feature-split | Warm band with text and CTA on one side, illustration opposite, then a broad screenshot and feature cards. | feature explanation, learn-more links | split introduction, wide product image, three feature cards |
| 5 | feature-split | White feature band with split introduction and a broad content area below. | product CTA, capability explanation | large heading, decorative cutout art, feature list |
| 6 | feature-grid | Warm ivory section with a split heading, then three visual feature columns. | cross-product story, feature discovery | three-column image cards, editorial copy |
| 7 | testimonials | Centered testimonial card within a spacious white section. | customer proof, quote emphasis | outlined quote card, customer portrait, brand tabs |
| 8 | integrations | White split layout with copy and CTAs beside a compact logo grid. | integration discovery, product CTA | partner logo tiles, two-column composition |
| 9 | pricing | Warm ivory band with centered title and a centered pricing panel. | pricing overview, trial and sales actions | single pricing card, subtle decorative texture |
| 10 | cta | Centered closing message with paired CTAs and surrounding collage imagery. | final conversion prompt, paired CTA | centered headline, decorative image collage |
| 11 | footer | Dense five-column navigation followed by a compact legal and privacy row. | deep-link navigation, legal and privacy links | multi-column link lists, small category labels |

## Source CSS custom properties (selected)

```css
--color-nav-content-primary: #000;
--color-nav-content-secondary: color-mix(in oklab, #000 80%, transparent);
--color-nav-content-tertiary: color-mix(in oklab, #000 60%, transparent);
--color-nav-control: #fff;
--color-nav-hover: color-mix(in oklab, #000 10%, transparent);
--color-nav-background: #fff;
--color-nav-background-highlight: #f1eee9;
--color-nav-border: color-mix(in oklab, #000 50%, transparent);
--color-nav-button-hover: color-mix(in oklab, #000 80%, transparent);
--font-fallback-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP";
--font-fallback-jp-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP";
--button-radius: .25rem;
--button-primary-background: #111;
--button-primary-foreground: #fff;
--button-primary-hover-background: #0007cb;
--button-primary-hover-border: color-mix(in oklab, #000 80%, transparent);
--button-primary-hover-foreground: #fff;
--button-primary-active-background: color-mix(in oklab, #0007cb 85%, transparent);
--button-primary-active-foreground: #fff;
--button-primary-disabled-background: color-mix(in oklab, #000 30%, transparent);
--button-primary-disabled-foreground: #fff;
--button-secondary-background: transparent;
--button-secondary-foreground: #111;
--button-secondary-border: #111;
--button-secondary-hover-background: transparent;
--button-secondary-hover-border: color-mix(in oklab, #111 75%, transparent);
--button-secondary-hover-foreground: color-mix(in oklab, #111 75%, transparent);
--button-secondary-active-background: color-mix(in oklab, #111 2%, transparent);
--button-secondary-disabled-background: transparent;
--button-secondary-disabled-foreground: color-mix(in oklab, #000 30%, transparent);
--button-secondary-disabled-border: color-mix(in oklab, #000 30%, transparent);
--button-secondary-active-foreground: #000;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/intercom-com