CURATED · OPEN · FREE

Intercom

The premium AI-native helpdesk that prioritizes clarity, restraint, and elegant functionality.

SaaSCleanProductivityCalmRefined
Intercom screenshot
↓ Download design system (25 MB)Open in OpenDesign

Visit: https://www.intercom.com

📦 Browse pack contents →

01

Identity DNA

helpdeskAIcustomer supportautomationenterprise

A sophisticated, modern enterprise dashboard that blends high-end editorial photography with clean software UI.

02

Color

#0007cbAccent
#111111Ink
rgba(17,17,17,0.7)Ink soft
#ffffffBG
#f1eee9BG soft
#d3cec6BG quiet
rgba(17,17,17,0.4)Muted

A high-contrast monochrome foundation with warm beige neutrals and a single deep blue accent for interactive highlights.

03

Typography

geometric-sans · humanist-sans · monospace

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

4px base unit with generous vertical spacing for readability.

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(17,17,17,0.4)

0 0 18px rgba(0,0,0,0.2)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Full-width responsive layout with constrained max-widths for content columns.

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on color, background-color, and border-color properties. · Subtle background-size animations for hover states.

Smooth color and background-color transitions. · Immediate response with subtle scale or color change.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

Intercom's homepage is a masterclass in modern SaaS design, blending high-end editorial aesthetics with clean, functional UI. The core identity is professional and AI-focused, using a restrained color palette anchored by white (#ffffff), warm beige (#d3cec6), and near-black (#111111) text. Typography is predominantly clean geometric and humanist sans-serif, with a striking 54px display size for hero headlines using tight letter spacing. Key interactions feature smooth 0.4s transitions. Critical design rules: prioritize generous whitespace, avoid overly decorative elements, and maintain a monochrome base with subtle warm neutrals to let product imagery and the deep blue (#0007cb) accent stand out.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko