Intercom Design System Deep Dive

1. Brand Overview

Intercom’s site design is built for clarity and confidence. It’s a product-first SaaS brand with a strong “enterprise meets friendly” vibe. You’re looking at a UI that says: we know what we’re doing, but we’re not boring. The design language balances deep navy and grays with sharp, modern typography. It’s clearly aimed at teams who care about performance and polish — product managers, customer success leads, and engineers — but want their tools to feel approachable.

The personality comes through in restraint. No gratuitous gradients. No ornamental borders. Instead, they use a tight, consistent 8px base grid, sensible border radii, and a palette that’s heavy on neutral grays and functional blues. This works because Intercom’s product is a communication platform — the design system needs to keep focus on the content, not overwhelm it.

Typography is all anchored on MediumLL, a custom sans-serif, with minimal fallback disruption. The weight jumps between 400 and 600 to control emphasis without resorting to color or size changes. That’s deliberate: it makes the UI predictable and keeps accessibility high.

Buttons are clean rectangles with 6px radii — small enough to feel sharp, rounded enough to avoid looking hostile. Links are underlined only when absolutely necessary; most rely on color change on hover. Shadows are absent — they’re in the “flat but layered” camp, using borders and color contrast for separation.

Navigation and layout are responsive, with breakpoints ranging from 400px up to 896px. This tells you they’ve optimized for mobile-first but still care about mid-size devices (small laptops, tablets). It’s not a sprawl — it’s a system that’s lean and built for speed.

Overall: Intercom’s design system is about trust through consistency. Every element looks like it belongs. You could build an entire product with just these tokens and it would feel on-brand without needing custom flourishes.

2. Color System

2.1 Primary Colors

The main “action” color is #005fcc — a deep, confident blue. This isn’t a neon SaaS blue; it’s slightly muted, which works for enterprise credibility. It’s used on CTAs, links in certain contexts, and interactive states. It pairs well with white text for maximum contrast.

Psychologically, this blue says “professional, reliable.” Compare that to Slack’s more playful purple or Zendesk’s earthy green — Intercom’s blue is more straightforward, less whimsical. In UI terms, it’s a safe but strong choice.

2.2 Complete Palette

2.3 Color Relationships

Intercom’s palette is built around neutral dominance — grays and off-whites cover most surfaces, with blue used for emphasis. The dark mode/nav colors are semitransparent in places (e.g., #17100ecc), which allows layering without harsh edges.

Contrast ratios:

• #005fcc (Primary Blue) on white — passes WCAG AA and AAA easily.
• #17100e (Text Dark) on white — very high contrast.
• White on #005fcc — also high contrast, safe for buttons.

Dark mode uses navy (#020917) and dark grays (Gray 900) as base, with white text — safe contrast but less eye strain than pure black.

2.4 Usage Guide

• Primary actions: #005fcc background with white text.
• Secondary actions: white background with dark text (#17100e), bordered in white if on dark surfaces.
• Background layering: Use Gray 100/200 for light surfaces, Navy/Dark for dark surfaces.
• Avoid: Using accent blue (#000ce1) for CTAs — it’s too strong and breaks harmony.
• Error states: Red 500 for text/icons, Red 600 for hover/focus.
• Success states: Green (#00da00) sparingly — not part of main palette.

3. Typography

3.1 Font Families

All typography is set in MediumLL, a custom sans-serif. Fallbacks: MediumLL Fallback, ui-sans-serif, system-ui. No Google Fonts or Adobe Fonts — it’s a proprietary asset.

This is a clean, modern font with good weight contrast. 400 for normal text, 600 for emphasis. No italics in the extracted data — emphasis seems to be purely weight-based.

3.2 Type Scale

3.3 Hierarchy

Intercom uses size minimalism — only two large sizes (48px, 34px) for big headings, then everything collapses to 16px. This creates a tight hierarchy: big hero headings, section headings, then uniform body size. The 14px caption is only for fine print.

Spacing in headings is slightly negative to tighten letterforms. This makes large headings feel more compact and assertive. Line heights vary: headings are tight (1.00–1.03), body is airy (1.50). This works because it keeps big type blocks impactful, while letting smaller text breathe.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

This is a disciplined scale. Very few “off-grid” values (9px) — likely for visual alignment in specific components.

4.2 Layout

Breakpoints:

• 400px
• 425px
• 426px
• 530px
• 550px
• 600px
• 640px
• 896px

They’re clearly optimizing for fine control — note the tiny jump between 425px and 426px. This suggests specific component or nav adjustments at those widths.

5. Visual Elements

• Border radius: Single value, 6px. Used universally on buttons, links, spans. This keeps shapes consistent across components.
• Shadow system: None. This is flat design. All depth comes from color contrast and borders.
• Borders: Common combo — 1px solid white (#ffffff) on buttons. This works on dark backgrounds to separate the button shape without heavy outlines.

6. Components

6.1 Buttons

Primary (light background):

• Default: background #ffffff, text #17100e, padding 10px 16px, radius 6px, border 1px solid #ffffff.
• Font: MediumLL, 600 weight, 16px size.
• Hover/active/focus: Not explicitly defined in extracted data — likely color shifts.

Secondary (transparent background):

• Default: background transparent, text #ffffff, padding 10px 16px, radius 6px, border 1px solid #ffffff.
• Font: MediumLL, 600 weight, 16px size.
• Works well on dark backgrounds.

6.2 Links

Three styles:

1. White text, 600 weight, no underline; hover: #565656 color.
2. Dark text (#17100e), 600 weight; hover: #565656.
3. Light gray (oklab.../0.6), 400 weight; hover: #565656.

Underline is absent — color change drives interaction feedback.

6.3 Forms

No text input styles extracted — possibly styled within app, not marketing site.

6.4 Cards

Not explicitly extracted — given no shadows, likely use light background (#f4f3ec or Gray 100) with 6px radius and internal spacing from scale.

7. Design Tokens

:root {
  /* Colors */
  --color-navy: #020917;
  --color-dark: #080e1c;
  --color-gray-900: oklch(21% .034 264.665);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-black: #000000;
  --color-text-dark: #17100e;
  --color-white: #ffffff;
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-primary-blue: #005fcc;
  --color-accent-blue: #000ce1;
  --color-green: #00da00;
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-nav-tray-light: #f3f3f3;
  --color-nav-light: #fffc;
  --color-nav-dark: #17100ecc;
  --color-border-nav-dark: #fff3;
  --color-border-nav-light: #17100e1a;
  --color-bento-bg: #f4f3ec;

  /* Typography */
  --font-family-sans: "MediumLL", "MediumLL Fallback", ui-sans-serif, system-ui;
  --font-size-h1-lg: 3.00rem;
  --font-size-h1-md: 2.13rem;
  --font-size-body: 1.00rem;
  --font-size-caption: 0.88rem;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Spacing */
  --space-6: 0.38rem;
  --space-8: 0.50rem;
  --space-9: 0.56rem;
  --space-10: 0.63rem;
  --space-12: 0.75rem;
  --space-64: 4.00rem;
  --space-70: 4.38rem;

  /* Border Radius */
  --radius-md: 6px;

  /* Borders */
  --border-1-white: 1px solid #ffffff;
}

8. AI Coding Assistant Prompt

# Intercom Design System Specification

You are an Intercom design expert. Build UIs matching their visual language exactly.

## Brand Context
Intercom's design is professional, minimal, and product-focused. It uses a neutral-heavy palette with functional blues, a strict 8px grid, and flat design (no shadows). Typography is clean and modern with weight-based hierarchy.

## Color Palette
- Navy: #020917 — Deep backgrounds, hero sections
- Dark: #080e1c — Dark UI elements
- Gray 900: oklch(21% .034 264.665) — Dark text backgrounds
- Gray 800: oklch(27.8% .033 256.848) — Secondary text
- Gray 700: oklch(37.3% .034 259.733) — Body text
- Gray 600: oklch(44.6% .03 256.802) — Secondary labels
- Gray 500: oklch(55.1% .027 264.364) — Disabled text/icons
- Gray 300: oklch(87.2% .01 258.338) — Borders, dividers
- Gray 200: oklch(92.8% .006 264.531) — Light surfaces
- Gray 100: oklch(96.7% .003 264.542) — Page backgrounds
- Black: #000000 — High contrast text
- Text Dark: #17100e — Primary text
- White: #ffffff — Text on dark backgrounds, light surfaces
- Primary Blue: #005fcc — CTAs, links
- Accent Blue: #000ce1 — Highlights
- Green: #00da00 — Success states
- Red 500: oklch(63.7% .237 25.331) — Errors
- Red 600: oklch(57.7% .245 27.325) — Error hover/focus
- Nav Tray Light: #f3f3f3 — Light nav background
- Nav Light: #fffc — Light nav bg
- Nav Dark: #17100ecc — Dark nav bg
- Border Nav Dark: #fff3 — Divider in dark nav
- Border Nav Light: #17100e1a — Divider in light nav
- Bento BG: #f4f3ec — Special section background

## Typography
Font: "MediumLL", "MediumLL Fallback", ui-sans-serif, system-ui
| Level         | Size      | Weight | Line Height | Use For |
|---------------|-----------|--------|-------------|---------|
| H1 Large      | 48px      | 600    | 1.00        | Hero titles |
| H1 Medium     | 34px      | 600    | 1.03        | Section headings |
| Body          | 16px      | 400    | 1.50        | Paragraphs |
| Link Bold     | 16px      | 600    | 1.50        | Navigation |
| Button Bold   | 16px      | 600    | 1.00        | Primary buttons |
| Caption       | 14px      | 400    | 1.43        | Fine print |

## Spacing & Grid
Base: 8px
Scale: 6px, 8px, 9px, 10px, 12px, 64px, 70px
Use multiples of base grid for all spacing.

## Border Radius
- md: 6px — Buttons, cards, links

## Shadows & Depth
Flat design — use borders and color contrast for separation.

## Component Specifications

### Primary Button
Default: bg #ffffff, text #17100e, padding 10px 16px, radius 6px, border 1px solid #ffffff, font 600/16px MediumLL
Hover/Focus: adjust background or border color subtly (not defined in extracted data)
Disabled: opacity 0.5, cursor not-allowed

### Secondary Button
Default: bg transparent, text #ffffff, padding 10px 16px, radius 6px, border 1px solid #ffffff

### Navigation Links
Style 1: text #ffffff, weight 600, hover #565656
Style 2: text #17100e, weight 600, hover #565656
Style 3: text oklab(.../0.6), weight 400, hover #565656

### Input Fields
Not defined in extracted data — follow border radius 6px, base spacing, palette.

### Cards
bg Gray 100 or Bento BG, radius 6px, internal padding 12px–64px depending on context

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 640px, 896px
Mobile-first scaling, adjust nav and component widths at breakpoints.

## Interaction Rules
Transitions: 150ms ease for state changes
Focus: visible outline matching primary color or white depending on bg

## DO
- Use only colors from palette
- Keep spacing to multiples of 8px (except rare 9px cases)
- Maintain 6px radius across all interactive elements
- Use MediumLL for all text
- Keep hover states subtle

## DON'T
- Add shadows
- Mix rounded and sharp corners
- Invent new colors
- Overuse accent blue
- Use underline on links unless necessary

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #17100e;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid #ffffff;
  font-family: "MediumLL", ui-sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #f3f3f3; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid #ffffff;
  font-weight: 600;
}
.btn-secondary:hover { color: #565656; }
```

### Card
```css
.card {
  background: oklch(96.7% .003 264.542);
  border-radius: 6px;
  padding: 12px;
}
```

9. Summary

TL;DR — Intercom’s design system is minimal, functional, and built for clarity. It runs on a neutral-heavy palette with one confident blue, a strict 8px grid, and flat design principles. Typography is consistent and weight-driven, with a single 6px radius everywhere.

Brand Keywords:

• trust-through-consistency
• neutral-functional
• enterprise-friendly
• flat-precision