# Intercom — Design System
> The AI-native helpdesk platform for customer support teams.
- **Canonical:** https://uiuxskills.com/library/intercom
- **Source:** https://www.intercom.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:05.842Z

---

---
version: alpha
name: Intercom
description: The AI-native helpdesk platform for customer support teams.
tone: >-
  Authoritative, clear, and innovation-focused. The tone is direct, professional, and emphasizes
  efficiency and seamless collaboration between humans and AI.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  surface-bright: "#FAFAFA"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#E5E5E5"
  error: "#D93025"
  success: "#1E8E3E"
  info: "#007AFF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
    fontWeight: 700
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
    fontWeight: 700
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
    fontWeight: 600
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
    fontWeight: 600
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 20px
    fontWeight: 600
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
    fontWeight: 400
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.info}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "#0056b3"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Intercom’s visual language is defined by a clean, professional, and enterprise-ready aesthetic that prioritizes clarity and product-led growth. The design balances technical authority with a human-centric approach, using a high-contrast palette and structured layouts to emphasize efficiency and the seamless integration of AI into customer support workflows.

## Colors

The color strategy relies on a stark, monochromatic foundation punctuated by functional semantic colors to guide user interaction and highlight status.

*   Primary (#000000): The core brand color used for primary CTAs, headings, and high-emphasis UI elements.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   Surface-container (inferred) (#F4F4F4): A neutral light gray used for section backgrounds and card containers.
*   Surface-bright (inferred) (#FAFAFA): A subtle highlight color for secondary containers.
*   On-surface (#1A1A1A): The primary text color, optimized for high readability against light surfaces.
*   On-primary (inferred) (#FFFFFF): The text color for buttons and primary interactive elements.
*   Outline (#E5E5E5): The standard border color for structural dividers, cards, and input fields.
*   Error (inferred) (#D93025): Semantic color reserved for destructive actions or critical error states.
*   Success (inferred) (#1E8E3E): Semantic color for positive feedback and completion states.
*   Info (#007AFF): The primary action color for links and informational UI elements.

## Typography

Typography is set in the Inter typeface, emphasizing legibility and a modern, technical feel through a clear hierarchy of weights and sizes.

*   Display-lg (inferred): Used for hero headlines to establish immediate impact.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for sub-headers to organize complex content.
*   Headline-md (inferred): Used for feature titles.
*   Headline-sm (inferred): Used for card titles and sub-sections.
*   Body-md: The standard font level for all paragraph content and long-form text.
*   Label-sm (inferred): Used for UI labels, metadata, and button text.

## Layout

The layout follows a responsive, mobile-first grid system centered within a max-width container. It utilizes a 4px base spacing unit to ensure consistent rhythm across all components.

*   Section order: nav, hero, features, social-proof, testimonials, footer.
*   Hero pattern: A centered composition featuring a headline and subhead, paired with dual primary/secondary CTAs and a large product UI showcase.
*   Spacing: Uses the {spacing} scale (xs: 4px to 2xl: 48px) to maintain consistent gutters and margins.
*   Responsive behaviour: Navigation collapses into a hamburger menu on smaller viewports to prioritize content density.

## Elevation & Depth

Elevation is used sparingly to maintain a flat, modern aesthetic, relying on subtle, single-layer shadows to denote interactivity.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for standard card components and interactive elements.
*   Elevation.lg: Used for modal overlays or high-priority drawers.
*   Note: All values were inferred based on the brand's clean, flat design language.

## Shapes

The brand employs a moderate border-radius strategy to balance professional structure with a friendly, approachable feel. 

Components like cards and buttons utilize {rounded.md} (8px) or {rounded.lg} (16px) to soften edges without appearing overly rounded. This consistency is maintained across the UI to ensure a cohesive look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for primary actions and transparent backgrounds with {colors.primary} borders for secondary actions. They are designed for clarity, using {typography.label-sm} and {rounded.md} to maintain a professional, clickable appearance.

### Card
Cards are the primary container for features and testimonials, utilizing {colors.surface} or {colors.surface-bright} backgrounds. They must always use {rounded.md} and {colors.outline} to maintain the brand's structured, minimal aesthetic.

### Input Field
Input fields prioritize accessibility and focus states, featuring an {colors.outline} border by default. Upon interaction, the border must transition to {colors.info} to provide clear visual feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Do not use {colors.error} for non-destructive actions. |
| Apply {typography.body-md} for all standard paragraph content. | Avoid using {typography.display-lg} for body text. |
| Use {rounded.md} for all card components. | Do not mix sharp corners with {rounded.md} components. |
| Ensure all input fields have a {colors.info} border on focus. | Never use low-contrast text on {colors.surface-container}. |
| Use {spacing.md} as the default gutter between grid items. | Do not exceed {elevation.lg} for any UI element. |
| Apply {colors.outline} for all structural dividers. | Avoid inconsistent padding; stick to the {spacing} scale. |
| Use {typography.label-sm} for button labels. | Do not use {colors.info} for primary action buttons. |
| Use {colors.surface-bright} for subtle background highlights. | Do not use high-elevation shadows for standard cards. |

## Content Style

CTA labels are written using imperative verbs in sentence case, kept concise to drive immediate action (e.g., "Start free trial").

Headings are benefit-driven and direct, focusing on the value the AI-native helpdesk provides to the user.

Copy density is managed to be scannable, favoring short, punchy paragraphs and frequent use of lists to maintain a high-efficiency reading rhythm.

## Imagery & Icons

The imagery style is mixed, combining high-quality product UI screenshots with abstract background illustrations and professional photography. Product UI should be displayed clearly, often layered over decorative backgrounds to provide context. Iconography should remain minimal and functional, adhering to the brand's clean, enterprise-focused visual identity.