Skip to content
DesignMunkDesignMunk Submit a site

Intercom

intercom.com
The only helpdesk designed for the AI Agent era
Software Next.js Tailwind Landing Saans Serrif
Share Visit site
intercom.com DESKTOP · 1440
Intercom

AI Breakdown

Design export

---
version: alpha
name: Intercom
description: The only helpdesk designed for the AI Agent era
colors:
  primary: "#111111"
  secondary: "#848484"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-american-silver: "#cecece"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Saans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Saans
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.027em
  headline-sm:
    fontFamily: Saans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.013em
  headline-xs:
    fontFamily: Saans
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: -0.017em
  body-md:
    fontFamily: Serrif
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: -0.01em
rounded:
  sm: 4px
  md: 6px
  lg: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 112px
components:
  button-primary:
    backgroundColor: "#000000"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 8px 10px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 10px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Intercom: Big Saans, Border-Led Layout, Zero Shadows

## Overview

Intercom's UI is stark, modern, and editorial: black text on white surfaces, large light-weight headlines, and generous spacing. It is built for B2B buyers comparing complex tools, so scannability and proof matter more than ornament. The tone is serious but approachable; density increases below the hero through tabs and product screenshots, while type keeps the page feeling spacious.

## Colors

- **primary (#111111):** Core ink for headlines, navigation, and key labels.
- **secondary (#848484):** Supporting text, metadata, and subdued UI states.
- **neutral (#ffffff):** Global canvas for pages and cards.
- **border (#e5e7eb):** Hairline dividers, tab rails, and input strokes in lieu of shadows.
- **brand-american-silver (#cecece):** Secondary chrome and subtle separators where a cooler tone is needed.
- **surface (#ffffff):** Content surfaces and cards; same as neutral.
- **on-surface (#111111):** Default text color when placed on surface.

## Typography

- Saans (custom): Used for all headlines (64/45/32/23) at weight 400 with tight negative tracking. Not freely available; substitute Inter, Manrope, or Work Sans for similar x-height and neutrality.
- Serrif (custom): Primary body at 16px, weight 300–400 for long-form readability and a human note in a technical context. Not freely available; substitute Source Serif 4, Georgia, or Merriweather.
- Noto Color Emoji (Google): Emoji support only; safe to load directly from Google Fonts when needed.
Use headline-lg (64px) in the hero, headline-md (45px) for section leads, headline-sm/xs for subheads, and body-md (16px) for paragraphs and UI copy.

## Layout

Spacing follows an 8px base: xs 8 for micro-gaps, sm 16 for button paddings and inline spacing, md 32 for block gutters, lg 48 for section padding, and xl 112 for hero and major breaks. Layout is border-led: horizontal rules and tab rails use the border token to segment content instead of heavy backgrounds. Keep content widths generous, with clear left alignment to let large headlines wrap naturally.

## Elevation & Depth

All measured shadows are none. Hierarchy relies on contrast (primary on neutral), thin borders (#e5e7eb), and whitespace. Use cards on neutral surfaces with a slightly rounded edge rather than depth effects. Active states and selections lean on bolder text color, underlines, or a simple stroke—not glow or drop shadow.

## Shapes

Corner radii are subtle and functional: sm 4px for compact elements (secondary buttons, chips), md 6px for primary CTAs and inputs, and lg 8px for cards and media. Roundness communicates interactivity without softness; avoid exceeding 8px to keep the industrial feel.

## Components

Buttons
- Primary: 40px height, 8px 10px padding, background #000000, text #ffffff, radius 6px. Use for the main CTA.
- Secondary: 40px height, 8px 10px padding, text #111111, radius 4px. Pair with a 1px stroke using border #e5e7eb when a container is required.
- Link: Text-only with #111111; no radius.

Card
- Background #ffffff, text #111111, padding 16px, radius 8px. Use for screenshots, pricing, and quotes.

### Utility nav bar
Left-aligned brand with right-aligned actions ("Log in," "Contact sales," "View demo," "Start free trial"). Text #111111; primary action uses the black CTA spec. Spacing sm 16 between items.

### Hero with right-rail copy
Headline uses headline-lg (64px) Saans at weight 400; supporting paragraph in Serrif body-md 16px. Two CTAs: primary black and secondary outline using border #e5e7eb. Vertical spacing xl 112.

### Feature tabs (4-item rail)
Labels in Saans headline-xs (23px). Inactive items use secondary #848484; the active item uses primary #111111 with a border-bottom #e5e7eb spanning the rail. Content region sits on a surface card.

### Product screenshot with callout tooltip
Screenshot housed in a card (radius 8px). An overlaid callout uses the card style with concise body-md text to annotate features like CX Score or Topics Explorer.

### Trust bar
A slim row labeled "Trusted by 30,000+ leading brands." Use headline-xs (23px) and secondary #848484 for supporting text or logos.

### Testimonial block
Quote in Serrif body-md 16px; author line in Saans headline-xs 23px with role in secondary #848484. Contained within a card for emphasis.

### Pricing summary card
"Intercom with Fin" uses headline-sm 32px. Price figure ($19) can use headline-md 45px for punch; details in body-md 16px. Card radius 8px, border #e5e7eb as needed.

### Footer mega-menu
Multi-column link lists set in body-md 16px with tight vertical rhythm (xs 8px). Section labels in headline-xs 23px and list dividers in border #e5e7eb.

## Do's and Don'ts

- Do keep text #111111 on #ffffff and let borders (#e5e7eb) carry most of the structure.
- Do use the 64/45/32/23 headline scale and 16px body for predictable hierarchy.
- Do cap radii at 8px; use 6px on primary CTAs and 8px on cards.
- Don't introduce drop shadows; separate regions with whitespace, borders, or tone only.
- Don't add new accent colors; the system is nearly monochrome with a black CTA.
- Don't over-stack CTAs; pair one primary with one secondary at most per section.

## Agent Prompt Guide

Quick color reference
- Text: #111111
- Background: #ffffff
- Border: #e5e7eb
- Accent/CTA: #000000

1) Build a hero
- Canvas #ffffff. Left-aligned H1 set in Saans, 64px, weight 400, letter-spacing -0.03em, line-height 1.2, color #111111.
- Body paragraph in Serrif, 16px, weight 300, color #111111 at 70–80% opacity if needed; no shadows.
- Primary button: background #000000, text #ffffff, height 40px, padding 8px 10px, radius 6px.
- Secondary button: text #111111 with 1px border #e5e7eb, height 40px, padding 8px 10px, radius 4px.
- Vertical spacing top/bottom: 112px.

2) Create a four-tab feature rail
- Tabs on #ffffff with a bottom rule #e5e7eb.
- Tab labels in Saans 23px; inactive color #848484, active color #111111 with underline/border.
- Content region on a card: background #ffffff, padding 16px, radius 8px.

3) Screenshot with tooltip callout
- Place image inside a card (#ffffff, radius 8px, padding 16px, border #e5e7eb optional).
- Overlay a tooltip card using the same 8px radius and 16px padding; copy in Serrif 16px.

4) Testimonial block
- Quote in Serrif 16px, color #111111.
- Author in Saans 23px; role in #848484.
- Wrap in a card (radius 8px, padding 16px) and separate from neighbors with 32–48px spacing.

5) Pricing summary
- Title in Saans 32px; price in Saans 45px.
- Details in Serrif 16px. Card background #ffffff, radius 8px, thin border #e5e7eb. Primary CTA uses the black 40px spec.

## Similar Brands

- Zendesk: Also enterprise helpdesk; uses more color (green) and layered surfaces, whereas Intercom stays monochrome and border-led.
- Front: Clean B2B messaging and big type; Front leans warmer with softer UI chrome.
- HubSpot Service Hub: Broader marketing site with orange accents and denser modules; Intercom is sparser and more editorial.
- Freshdesk: Friendlier green palette and gradients; Intercom is crisper with stricter radii and no shadows.
- Gorgias: Ecommerce-focused helpdesk; similarly minimal but more product-screenshot heavy and less typographically assertive.

More like this

Browse Software →
anabolicinsights.ai
Anabolic Insights Health
Anabolic Insights
Measure everything. Assume nothing.
Landing · 3 days ago
getastra.com
Astra Security Software
Astra Security
Security conscious companies trust Astra for continuous pentests.
Landing · 3 days ago
branditscan.com
BranditScan AI
BranditScan
From scan to takedown—fully automated.
Landing · 3 days ago
viral.app
Viral Analytics
Viral
The operating system for UGC
Landing · 3 days ago