Intercom

Overview

Intercom is a unified customer service platform that seamlessly integrates human agents with AI-powered automation, designed for enterprise SaaS and mid-market teams. The design system embodies 'Architectural Minimalism'—a philosophy that prioritizes structural clarity, functional precision, and deliberate restraint. Every visual element serves a purpose: the warm cream background (#f4f3ec) provides a sophisticated, approachable canvas; the deep charcoal primary (#111111) conveys authority and trustworthiness; and the vibrant orange accent (#ff5600, the Fin AI agent brand color) punctuates moments of innovation and forward momentum. The UI evokes a sense of calm professionalism—users feel in control, never overwhelmed. The brand voice is direct, confident, and human-centered: conversational without being casual, technical without jargon. Example: 'Every conversation teaches Fin. Your customers get smarter service, faster.'

Colors

The color palette is anchored in a neutral, warm foundation with strategic accent deployment. Primary (#111111) is the workhorse—used for text, button fills, and structural elements—paired with on-primary white (#ffffff) for maximum contrast and accessibility (WCAG AAA compliant at 21:1 ratio). The surface stack ranges from the warm cream base (#f4f3ec) through progressively cooler container layers (surface-container-highest #d3cec6) to create subtle depth without relying on shadows alone. Secondary (#ff5600, Intercom's Fin AI brand orange) is reserved for highlights, badges, and accent elements that signal AI-powered features or premium capabilities; it appears sparingly to maintain visual hierarchy. Tertiary (#000ce1, a vivid electric blue) serves as the focus color for interactive state

Typography

The type system is built on Saans (a custom sans-serif with geometric precision) at weights 400 (regular) and 500 (medium), creating a restrained but expressive hierarchy. Display (80px, -0.04em tracking) is reserved for hero headlines and major announcements; headline-lg (56px) and headline-md (40px) structure section breaks with tight line-heights (1.1–1.25) and negative letter-spacing to convey density and importance. Body-lg (18px, 1.55 line-height) and body-md (16px, 1.5 line-height) handle primary content with generous line-height for readability on screens. Label-md (14px, 0.01em tracking) and label-sm (12px, 0.02em tracking) are used for UI labels, button text, and metadata. All type uses the system font stack fallback (ui-sans-serif, system-ui, sans-serif) for reliability. On smal

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Sections are separated by lg spacing (40px) on desktop, reducing to md spacing (24px) on tablet and sm spacing (12px) on mobile, creating a responsive rhythm that feels spacious without excess. The gutter (24px) is applied consistently to left/right margins, ensuring content never touches the viewport edge. Container elements (cards, modals, input groups) use md padding (24px) internally, with sm padding (12px) for compact components like badges or small inputs. White-space is treated as a first-class design element: negative space around headlines and CTAs makes them breathe and command attention. The cream background (#f4f3ec) is never pure white, reducing eye strain and creating a subtle,

Elevation & Depth

Depth is conveyed through subtle, layered shadows rather than dramatic drop-shadows or glassmorphism. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for micro-interactions like hover states on small components; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and floating elements; and lg (0 4px 24px rgba(0, 0, 0, 0.15)) for modals, popovers, and elevated surfaces. Shadows are always soft and diffuse, never hard-edged, to maintain the minimalist aesthetic. Cards and containers use a 1px border in outline-variant (#c1c1c1) in addition to shadows, creating a defin

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are minimal and functional, never decorative. The rounded scale progresses from sm (2px) for subtle softening of inputs and small UI elements, through DEFAULT (4px) for buttons and standard cards, to lg (8px) for larger containers and modals. The xl (10px) and full (9999px, for pills and badges) radii are used sparingly. Buttons use DEFAULT (4px) to feel modern without appearing soft or playful; inputs use DEFAULT (4px) for consistency. Cards and containers use lg (8px) to create a slightly more refined, elevated appearance. This re

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary background (#111111) with white text, 12px vertical and 24px horizontal padding, and a 4px border-radius. On hover, the background darkens imperceptibly (to #000000) with a 150ms transition; no shadow is added, maintaining flatness. The button-secondary variant uses a transparent background with a 1px primary border and primary text; on hover, it gains a subtle surface-container-low background (#f1eee9) without changing the border. Button-tertiary uses the tertiary color (#000ce1) for links and secondary actions. All buttons use label-md typography (14px, 400 weight) and maintain a minimum 44px height for touch targets. Focus states add a 3px outline in tertiary with 4px offset, vis

Do's and Don'ts

**Do**

• Do use primary (#111111) for all body text, buttons, and structural elements to maintain visual hierarchy and accessibility.
• Do reserve secondary (#ff5600) and tertiary (#000ce1) for accents and interactive states; never use them for body copy.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to create breathing room.
• Do use the Saans typeface at 400 weight for all text; reserve 500 weight only for small labels or emphasis within body text.
• Do add md elevation shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and floating elements; never use drop-shadows without a border.
• Do transition all interactive states (hover, focus, active) over 150ms with cubic-bezier(0.4, 0, 0.2, 1) easing for consistency.
• Do maintain the warm cream background (#f4f3ec) as the page base; never use pure white (#ffffff) for page backgrounds.

**Don't**

• Don't use secondary (#ff5600) or tertiary (#000ce1) for body text or large text areas; they are accent colors only.
• Don't apply shadows to buttons in their default state; reserve shadows for hover and elevated containers.
• Don't use border-radius values larger than xl (10px) except for full-width pills and badges; excessive rounding dilutes the minimalist aesthetic.
• Don't mix typefaces; Saans is the only font family used across the system, including fallbacks to system sans-serif.
• Don't use gradients or background images on cards or containers; maintain flat, solid backgrounds for clarity.
• Don't apply letter-spacing greater than 0.1em or less than -0.04em; maintain the type system's defined tracking values.
• Don't use color alone to convey meaning; always pair color changes with text labels, icons, or other visual cues for accessibility.