Design System

The AI-first
customer
platform,
reimagined.

A friendly messenger with warm neutrals, vibrant blue accents, and an approachable layout built for meaningful conversations.

14 color tokens 20+ type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a vibrant blue accent for interactive elements. 14 tokens across surfaces, text, interaction, and semantic states.

Snow White
#ffffff
Primary page background
Cloud Gray
#f7f8fa
Secondary sections, sidebars
Whisper Gray
#f0f2f5
Cards, input fields
Border Mist
#e0e4e8
Borders, dividers
Steel
#c4c9d0
Inactive states, disabled
Slate
#6b7280
Secondary text, helpers
Graphite
#374151
Body text, paragraphs
Obsidian
#000000
Headings, primary text
Messenger Blue
#1F8BFF
Primary brand, CTAs
Blue Hover
#0a7aed
Hover state for blue
Blue Light
#e8f4ff
Selected, active surfaces
Teal Accent
#00b894
Success, positive states
Coral Accent
#ff6b6b
Error, destructive actions
Amber Accent
#fbbf24
Warning, caution states
Typography

Type Scale

Inter as primary typeface. Clean geometry with friendly proportions, clear hierarchy, and comfortable reading at every size.

Display-lg Talk to customers 48px / 1.25 / -0.02em
Display Build relationships 40px / 1.25 / -0.02em
Heading-lg Grow faster 32px / 1.25 / -0.02em
Heading Section heading 24px / 1.4 / 0
Heading-sm Subsection heading 20px / 1.4 / 0
Body Default body text for readable content 16px / 1.6 / 0
Body-sm Dense data, helper text, metadata 13px / 1.5 / 0
Caption Timestamps · Labels · Status 12px / 1.5 / 0

Fonts

Primary Inter 400-700 · 12-18px
Mono JetBrains Mono 400-700 · Code only
Layout

Spacing & Shapes

Base unit 4px. Friendly density with generous breathing room. 12-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
md 8px
lg 12px
xl 16px
pill 9999px

Shadows

Subtle 1px border
Soft cards, dropdowns
Medium modals, popovers
Elevated tooltips, toasts
Elevation

Surfaces

Subtle color differentiation over shadows. Four distinct surface levels for clear visual hierarchy.

Snow White #ffffff
Cloud Gray #f7f8fa
Whisper Gray #f0f2f5
Blue Light #e8f4ff
Conversation

Chat Interface

The heart of Intercom — a friendly, approachable conversation experience with clear message distinction.

AC
Acme Corp
Online
Hi there! How can I help you today?
2:30 PM
I have a question about integrating the Messenger widget into my React app.
2:31 PM
Great question! Let me walk you through the setup. You'll want to start by installing the @intercom/messenger-js-sdk package.
2:32 PM
That sounds straightforward. What's the next step?
2:33 PM
Components

Button Variants

Primary (Messenger Blue), secondary, and ghost button variants for clear interaction hierarchy.

Primary Button
Main call to action — highest visual weight
.btn-primary
Messenger Blue (#1F8BFF) background, Snow White text, 8px radius. Use exclusively for the single most important action.
Secondary Button
Alternative actions, navigation
.btn-secondary
Graphite text, Snow White background, Border Mist border. For less prominent actions that still need visual presence.
Ghost Button
Tertiary actions, inline links
.btn-ghost
Messenger Blue text, no border, transparent background. For subtle interactive elements that don't compete with primary actions.
Badge
Status indicators, notification counts
.badge
3 unread Online Offline Pending
Pill-shaped badges with semantic color coding. Coral for unread, Teal for online, Amber for pending, neutral for offline.
Input Field
User text input
input
Snow White background, Border Mist border, 8px radius. Focus state uses Messenger Blue border with subtle blue glow.
Guidelines

Do's & Don'ts

Do — Embrace
  • Snow White (#ffffff) as primary canvas background
  • Messenger Blue (#1F8BFF) for CTAs and interactive elements
  • Obsidian (#000000) for headings and primary text
  • 8px radius for buttons and inputs, 12px for cards
  • 9999px radius for pills and badges
  • 4px-based spacing with generous breathing room
  • Surface color hierarchy over heavy shadows
  • Semantic colors (teal, coral, amber) for status only
Don't — Avoid
  • Messenger Blue for large background fills
  • Hard, sharp corners on any element
  • Multiple accent colors in a single view
  • Heavy drop shadows or deep elevation
  • Dense packing without breathing room
  • Obsidian for small decorative text
  • Mixing semantic colors for the same state
  • Generic gray borders without purpose