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

display54px · 400
h228px · 400
body16px · 400
caption14px · 400

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

button Solid black or outlined pill-shaped buttons with clean sans-serif typography.
card Clean cards with minimal borders or subtle shadows, often containing product UI screenshots.
chip Simple text tags with subtle background or borders.
input Clean text inputs with subtle borders and rounded corners.
hero Large, expressive typography paired with a side-by-side layout of text and product imagery or photography.

09

Voice & Don'ts

Tone Professional, confident, and forward-thinking.
Headlines Bold, direct statements about product leadership and AI capabilities.
CTAs Clear, action-oriented phrases like 'Start free trial' and 'View demo'.

Don't use a dark background for the primary hero — screenshot shows a clean white background.
Don't use heavily decorative or display serif fonts for headlines — screenshot shows clean geometric sans-serif typography.
Don't rely on bright, saturated accent colors — screenshot shows a restrained palette with a single deep blue accent.
Don't use small, cramped typography — screenshot shows generous line heights and letter spacing.
Don't use complex, busy background patterns — screenshot shows solid colors and photographic imagery.
Don't use harsh, boxy UI components — screenshot shows rounded buttons and cards.
Avoid: Overly casual language
Avoid: Vague marketing jargon
Avoid: Aggressive urgency tactics

10

Inside the pack — real screenshots

Intercom — 桌面首屏（hero） — 桌面首屏（hero）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Intercom — 移动首屏 — 移动首屏

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