Electric Violet
#0007cbBrand accent — used sparingly for emphasis moments, selected icon strokes, and tag punctuation; the only saturated color in the system creates instant focus when it appears against the warm neutral canvas
Intercom
intercom.comWebsite preview
The design language
Intercom's design language reads like an editorial magazine printed on warm cream paper: an off-white canvas (#faf9f6) replaces the cold SaaS gray, all body and display type sits at weight 300 for a whisper-light confidence, and a single vivid violet (#0007cb) does nearly all the chromatic work in small, deliberate doses. Sharp 4px corners on every control reject the rounded-softness trend in favor of architectural precision, and SaansMono at wide tracking acts as a labeling system — the way captions and tags function in print. Serrif at 300 weight appears inside body copy as a quiet editorial counterpoint, the one concession to typographic richness in an otherwise austere system. Components feel weightless: thin hairline borders in warm stone (#dedbd6), no decorative shadows, black-filled primary buttons that anchor without weight.
Color palette
brand
neutral
Pure White
#ffffffCard surfaces, product screenshot backgrounds, inverted button text
Canvas Cream
#faf9f6Primary page canvas — the warm off-white that defines the entire surface temperature; every screen lives on this tone
Linen
#f1eee9Secondary surface for sectioned blocks, elevated cards, and alternating content bands — one step warmer than canvas
Stone
#d3cec6Decorative texture wash, large background fields, subtle warmth blocks
Hairline
#dedbd6Hairline borders, dividers, input outlines, nav separators — the warm border tone that never feels cold
Ink
#111111Primary text, headings, body copy — slightly softer than pure black for comfortable reading on cream
Carbon
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Iron
#414141Secondary text, supporting copy, muted descriptions
Graphite
#585858Tertiary text, helper copy, less-prominent body
Smoke
#888888Disabled state text, placeholder copy, very muted labels
Ash
#a0a0a0Muted headings in secondary contexts, low-emphasis text
Silver
#b8b8b8Icon strokes in resting state, low-emphasis glyphs
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-lg
80px · 400 · 0.95 · -2.4px trackingThe quick brown fox jumps
display
54px · 400 · 1 · -1.62px trackingThe quick brown fox jumps
heading-lg
40px · 400 · 1.25 · -1.2px trackingThe quick brown fox jumps
heading
32px · 400 · 1.43 · -0.64px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.4 · -0.48px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.25 · -0.2px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
body-sm
14px · 300 · 1.4 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Saans
- Weights
- 300, 400
- Sizes
- 14px, 16px, 20px, 24px, 32px, 40px, 54px, 80px
- Line height
- 0.95–1.50
- Letter spacing
- -2.4px at 80px, -1.62px at 54px, -1.2px at 40px, -0.64px at 32px, -0.48px at 24px, -0.2px at 20px, -0.16px at 16px
- Fallback
- Inter, Söhne, Untitled Sans
- Features
- "ss01" on, "tnum" on
Primary typeface for everything — display headlines at weight 300 (80px/54px/40px), headings at 300 (32px/24px), body at 400 (16px/20px). The 300-weight display is the signature: most brands shout at 700–800, Intercom whispers at 300 and achieves authority through restraint. Use weight 400 only for body and supporting text where readability is paramount.
Additional typeface
SaansMono
- Weights
- 300, 400, 500
- Sizes
- 12px, 14px
- Line height
- 1.00–1.40
- Letter spacing
- 0.7px at 14px, 1.2px at 12px
- Fallback
- JetBrains Mono, IBM Plex Mono, Geist Mono
Monospace labeling system — nav micro-labels, tab labels, tag chips, section metadata. Always paired with wide positive tracking to function as typographic badges. The 100em spacing on 12px is a 'shout' weight for the smallest text, making it readable as a label rather than body copy.
Additional typeface
Serrif
- Weights
- 300
- Sizes
- 16px
- Line height
- 1.40
- Letter spacing
- -0.0100em
- Fallback
- Source Serif Pro, Newsreader, Tiempos Text
Editorial counterpoint — appears in select body paragraphs and pull quotes at 16px/300 to add a humanist, almost literary quality. The contrast of serif at 300 against Saans display at 300 creates the magazine-spread rhythm that defines Intercom's voice.
Additional typeface
MediumLL
- Weights
- 400
- Sizes
- 14px, 16px
- Line height
- 0.94–1.29
- Letter spacing
- -0.0250em, -0.0060em, 0.0350em
- Fallback
- Inter, Söhne
Secondary utility face for small UI labels and nav micro-copy where a condensed, tight feel is needed. Used sparingly — only 15 occurrences.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-96px
- Card padding
- 24-32px
- Element gap
- 8-16px
Border radius
nav
4pxtags
4pxcards
4pxinputs
4pxbuttons
4pxSpacing scale
4px8px10px12px14px16px20px21px24px26px27px32px40px48px64px80px96px112px146px171px216pxGuidelines
Do
- Set all display headlines at weight 300, not 400 or 700 — the whisper-weight is the brand's most recognizable choice
- Use warm cream (#faf9f6) as the default page background, not pure white or cool gray — the warmth is non-negotiable
- Apply SaansMono at 12px with 1.2px letter-spacing for any tag, label, or micro-copy element
- Use black (#000000) for filled primary buttons — never the brand violet, never a tinted neutral
- Apply 4px border-radius universally — buttons, nav, cards, inputs, tags all share the same sharp radius
- Allow display headlines to reach 80px with line-height 0.95 and letter-spacing -2.4px — extreme size at light weight needs the tight tracking to remain readable
- Pair Saans display with Serrif 300 in body copy to create editorial contrast within the same weight register
- Use the vivid violet (#0007cb) sparingly — maximum once or twice per screen, in small functional doses (icons, emphasis links, tag accents)
- Set section vertical gaps at 64–96px to create the slow, editorial page rhythm
- Render all third-party customer logos in grayscale (#b8b8b8 or #888888) to maintain system color discipline
Don’t
- Never set display type at weight 700 or above — the 300-weight whisper is the entire identity
- Never use pure white (#ffffff) as the primary page canvas — always use warm cream (#faf9f6)
- Never apply border-radius above 4px — no 8px, no 12px, no 9999px pills
- Never use cool grays (blue-tinted) for neutrals — all grays must have a warm undertone to live in the cream system
- Never use the brand violet as a button fill — it is an accent, not an action color
- Never use shadows or drop-shadows on cards, buttons, or panels — depth comes from background tone shifts, not elevation
- Never render customer logos in their native brand colors — grayscale only to prevent color pollution
- Never add a hard divider line between sections — let background tone and spacing create separation
- Never set body copy above 20px or below 14px — the editorial scale is tight
- Never use a gradient — the entire system is flat, warm, and untextured except for the surface tone progression
Components
Filled Primary Button
Primary action trigger (e.g., 'Start free trial')Background #000000, text #ffffff, 4px border-radius, padding 14px 16px, Saans 14px/400. No shadow, no gradient — just a solid black block that anchors visually against the warm cream canvas. The starkness of the black-on-cream pairing is the signature.
Ghost Text Button
Secondary action (e.g., 'View demo', 'Contact sales')No background, text #111111, 4px optional border, padding 14px 16px, Saans 14px/400. Renders as plain text or with a thin outline; never filled. Sits beside the filled primary without competing for weight.
Outlined CTA Button
High-emphasis secondary action (e.g., 'Fin AI Agent')White background #ffffff, 1px solid #111111 border, 4px radius, padding 14px 16px, Saans 14px/400 with #111111 text. Used for product-feature CTAs that need to stand apart from the standard filled/ghost pair.
Announcement Banner
Top-of-page promotional stripFull-width band, light neutral background (#f1eee9 or #faf9f6), Saans 12–14px body text in #111111 with an inline link underlined. Dismissible with × icon at right. No background color — sits as a quiet info layer.
Top Navigation Bar
Primary site navigationWhite or transparent over canvas, 4px radius on interactive elements. Left: logo mark + 4 nav items (Product, Customers, Resources, Pricing) with dropdown carets. Right: icon, 'Contact sales', 'View demo', filled black 'Start free trial', outlined 'Fin AI Agent →'. Saans 14px/400, 16px horizontal padding in nav items.
Hero Display Headline
Primary page-level headlineSaans weight 300, 80px on desktop, 54px tablet, line-height 0.95, letter-spacing -2.4px at 80px, color #111111. Multi-line, left-aligned, fills roughly 60% of viewport width. The whisper-weight at extreme size is the defining Intercom signature — no other SaaS brand uses 300 at this scale.
Hero Subtext Block
Supporting description beside the headlineSaans 16px/1.5 or Serrif 16px/1.4 weight 300, color #414141 or #585858, max-width 380–420px. Sits to the right of the headline or below it, constrained to a narrow column to preserve the editorial feel.
Image Grid Strip
Decorative/brand imagery showcase6–7 image tiles in a single horizontal row, each ~120–160px square, full-bleed, no gap or 4px gap. Mix of photography, illustration, and abstract art. Serves as visual texture and social proof of the brand's human side.
Tab Navigation
Section-level content switcherHorizontal row of 4 tab labels, Saans 14–16px/400, active tab has a black underline bar (2px) beneath. Inactive tabs in #888888. No background change — the underline is the only state indicator.
Product Screenshot Panel
In-context product UI showcaseLarge rounded container (4px radius) holding a product screenshot on a warm background (#f1eee9 or textured). Screenshot itself has subtle internal 4px radius. The warm surround makes the product UI feel embedded, not floating.
Customer Logo Grid
Social proof and brand association6-column grid of customer wordmarks, each rendered in #b8b8b8 or #888888 (monochrome gray), no color logos. Saans 16–20px display weight. The grayscale treatment is intentional — it prevents competing brand colors from polluting the warm cream system.
Two-Column Feature Section
Text + image editorial block50/50 split. Left column: Saans 300 display headline (40–54px) + body copy (Serrif 16px/300 or Saans 400) + button pair. Right column: editorial illustration or product visual on warm background. Generous 64–96px vertical padding above and below.
Nav Dropdown Caret
Dropdown indicator on nav itemsTiny downward chevron icon, 8px, stroke 1.5px, color #111111. No background, no border — just the glyph appended to nav labels with 6px spacing.
Section Divider
Visual break between content blocksInvisible — no lines, no gradients. Sections are separated purely by warm background tone shifts (#faf9f6 → #f1eee9 → #d3cec6) and vertical spacing (64–96px). The absence of hard dividers reinforces the editorial flow.
Surfaces & elevation
Level 0
Canvas
#faf9f6Primary page background — warm off-white that defines the system's temperature
Level 1
Section Warm
#f1eee9Alternating section background — one step warmer, creates slow visual rhythm down the page
Level 2
Textured Stone
#d3cec6Accent block background — used for large warm fields, decorative texture, and feature surrounds
Level 3
Card White
#ffffffInverted surface for product screenshots, cards on cream backgrounds, and embedded media
Intercom deliberately avoids shadows. Depth and separation are achieved through warm background tone progression (#faf9f6 → #f1eee9 → #d3cec6) and generous whitespace, not through box-shadow elevation. This flat-warm approach is an explicit rejection of the Material/elevation trend and reinforces the editorial paper-on-paper metaphor.
Layout & imagery
Layout
Intercom uses a max-width 1200px centered container with generous side padding (48–80px). The page rhythm is: thin announcement bar → transparent nav bar → 80px display headline hero (left-aligned, 60% width) with subtext column to the right → horizontal image strip → tabbed product section → 6-column customer logo grid → alternating 2-column editorial feature blocks (text+image, 50/50 split). Section vertical spacing is 64–96px, creating slow, measured scrolling. No full-bleed sections — everything sits within the contained column. Navigation is a single top bar (not sticky in the data shown), with no sidebar or mega-menu complexity. The layout philosophy is editorial-magazine: every section is a 'spread' with clear top and bottom margins, and content alternates which column carries the image.
Imagery
Intercom's visual language mixes editorial photography, hand-drawn illustration, and product screenshots with equal weight. Photography tends toward warm, lifestyle-framed human shots (portraits, sunsets, candid scenes) with natural color grading — never stock-clinical. Illustrations are loose, organic, often black-and-white ink-style (sketched figures, abstract line art) that echo the serif typography's humanist warmth. Product screenshots are always presented on warm cream backgrounds, never floating on white, to keep them embedded in the system's tone. The customer logo grid is treated as a quiet social-proof band in muted gray rather than as a visual centerpiece. Overall density is text-dominant — imagery serves as punctuation and atmosphere, not as the hero. Icons throughout are thin-stroke, 1.5px, monochromatic in #111111 or #b8b8b8.
Design notes
Agent Guide
**Quick Color Reference** - text primary: #111111 - background canvas: #faf9f6 - border hairline: #dedbd6 - accent: #0007cb - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. Create a hero section: canvas background #faf9f6. Display headline at 80px Saans weight 300, color #111111, letter-spacing -2.4px, line-height 0.95. Subtext in a 400px column to the right at 16px Saans weight 400, color #414141. Below: filled black button (bg #000000, text #ffffff, 4px radius, padding 14px 16px) + ghost text button (no bg, text #111111) side by side with 8px gap. 2. Create a customer logo grid: 6-column layout, each cell centered, logos rendered at 16px in #b8b8b8 (no native brand colors). 32px row gap, 24px column gap. Section sits on #faf9f6 canvas with 64px padding above and below. 3. Create a tab navigation row: 4 tab labels in Saans 14px/400, active tab has a 2px solid #111111 underline bar, inactive tabs in #888888. Tabs separated by 32px horizontal gap. On a #faf9f6 background, no container border. 4. Create a product screenshot panel: container with 4px border-radius, background #f1eee9 (warm stone), padding 32px. Inside: a product UI screenshot at full container width, internal 4px radius, no shadow. Add a section label above in SaansMono 12px/1.2px tracking, color #585858. 5. Create a two-column editorial feature block: left column (50%) with Saans 54px/300 headline (#111111, letter-spacing -1.62px) + Serrif 16px/300 body copy (#414141) + filled black button. Right column (50%) with an illustration on #f1eee9 background, 4px radius. 96px vertical padding around the entire block.
Typographic Voice
Intercom's typographic system is defined by what it does NOT do: it never sets display type at weight 700. The entire identity rests on the counterintuitive choice of weight 300 at 80px — a whisper where competitors shout. This creates authority through restraint, not volume. The secondary signature is the SaansMono labeling system: monospace at 12px with 1.2px (100em) letter-spacing creates typographic badges that function like print magazine captions. The Serrif 300 body copy is the third voice — a humanist, almost literary counterpoint that prevents the system from feeling purely corporate. Never mix more than two of these voices on a single screen.
Similar brands
Linear
Same whisper-weight display typography (300 at large sizes) and sharp 4px-radius controls, though Linear operates in dark mode
Vercel
Monochrome restraint with minimal color use, sharp corners, and editorial-feeling display headlines
Stripe
Editorial white-paper aesthetic with warm-neutral backgrounds, restrained color palette, and generous section spacing
Notion
Flat surfaces, no shadows, warm off-white canvas, and typographic confidence at large display sizes
Arc browser
Editorial typography choices, warm canvas tones, and willingness to use weight 300 as a brand signature
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
