# Intercom · Design system migration spec

> Source: https://www.intercom.com  ·  Curated by OpenDesign  ·  en

> A premium example of balancing editorial photography with functional SaaS UI, showcasing restraint and clarity.

## 1. Identity DNA

The system's identity is built on the principle of a blank canvas — a surface of absolute calm where every element must earn its presence. It functions like a clean loading screen, where the focus is not on what is shown, but on the discipline of what is withheld.

**One-liner:** The premium AI-native helpdesk that prioritizes clarity, restraint, and elegant functionality.
**Keywords:** helpdesk · AI · customer support · automation · enterprise
**Analogy:** A sophisticated, modern enterprise dashboard that blends high-end editorial photography with clean software UI.

## 2. Color

The palette is strictly monochromatic, built from a foundation of pure white and a single dark gray for text. A muted gray animates the loading state, while a subtle blue in the logo icon provides the sole chromatic accent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f1eee9` | card background |
| `--bg-quiet` | `#d3cec6` | quiet area |
| `--ink` | `#111111` | body text |
| `--ink-soft` | `rgba(17,17,17,0.7)` | secondary text |
| `--muted` | `rgba(17,17,17,0.4)` | placeholder |
| `--accent` | `#0007cb` | single accent |
| `--line` | `rgba(17,17,17,0.4)` | divider |

**Color principle:** A high-contrast monochrome foundation with warm beige neutrals and a single deep blue accent for interactive highlights.

The guiding rule is one of severe restraint, using negative space as the primary compositional tool.

## 3. Typography

Typography is purely functional, employing a clean humanist sans-serif for the brand name. Its role is utilitarian and legible, with no decorative flourishes or expressive scale.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.0 | 400 | -1.6px | Hero headlines |
| h2 | 28px | 1.2 | 400 | -0.96px | Section headings |
| body | 16px | 1.5 | 400 | -0.16px | Body text and paragraphs |
| caption | 14px | 1.4 | 400 | -0.096px | Small text and meta information |

## 4. Spacing

Spacing operates on a rhythm of generous emptiness, centering all focus on a single point.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit with generous vertical spacing for readability.

## 5. Surfaces

Surfaces are defined entirely by absence. There are no visible borders or shadows; depth is implied only through the void of the background.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 0 18px rgba(0,0,0,0.2)
- **Borders:** 1px solid rgba(17,17,17,0.4)

## 6. Layout

The layout skeleton is a single column, fully centered on the page. This structure maximizes negative space to isolate the minimal brand mark as the sole focal point.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width responsive layout with constrained max-widths for content columns.

## 7. Motion & Interaction

Motion philosophy is one of subtle, perpetual suggestion. The only animated element is the loading ring, which rotates with infinite subtlety to imply activity without demanding attention.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on color, background-color, and border-color properties.
  - Subtle background-size animations for hover states.

- **Hover:** Smooth color and background-color transitions.
- **Click:** Immediate response with subtle scale or color change.
- **Transition:** Consistent 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) transition on primary interactive properties.
- **Keyboard:** Focusable elements with visible outlines or rings.

## 8. Voice & Don'ts

The voice is silent, operating through visual presence rather than textual communication. It avoids any clutter, text-heavy layouts, or bright, saturated colors that would break the calm.

- **Tone:** Professional, confident, and forward-thinking.
- **Headline style:** Bold, direct statements about product leadership and AI capabilities.
- **CTA style:** Clear, action-oriented phrases like 'Start free trial' and 'View demo'.
- **Avoid:** Overly casual language / Vague marketing jargon / Aggressive urgency tactics

### Don'ts
- ❌ Don't use a dark background for the primary hero — screenshot shows a clean white background.
- ❌ Don't use heavily decorative or display serif fonts for headlines — screenshot shows clean geometric sans-serif typography.
- ❌ Don't rely on bright, saturated accent colors — screenshot shows a restrained palette with a single deep blue accent.
- ❌ Don't use small, cramped typography — screenshot shows generous line heights and letter spacing.
- ❌ Don't use complex, busy background patterns — screenshot shows solid colors and photographic imagery.
- ❌ Don't use harsh, boxy UI components — screenshot shows rounded buttons and cards.

This system deliberately omits buttons, cards, inputs, and other interactive components to preserve its state as a pure, uncluttered interface.

## System Prompt (paste into AI tool)

```
Intercom's homepage is a masterclass in modern SaaS design, blending high-end editorial aesthetics with clean, functional UI. The core identity is professional and AI-focused, using a restrained color palette anchored by white (#ffffff), warm beige (#d3cec6), and near-black (#111111) text. Typography is predominantly clean geometric and humanist sans-serif, with a striking 54px display size for hero headlines using tight letter spacing. Key interactions feature smooth 0.4s transitions. Critical design rules: prioritize generous whitespace, avoid overly decorative elements, and maintain a monochrome base with subtle warm neutrals to let product imagery and the deep blue (#0007cb) accent stand out.
```
