精選 · 開放 · 免費

Intercom

以清晰、克制與優雅功能為優先的頂級 AI 原生客服中心。

SaaSCleanProductivityCalmRefined

Intercom 網站截圖

↓ 下載設計系統包 (25 MB)在 OpenDesign 中開啟

原站: https://www.intercom.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

客服中心AI客戶支援自動化企業

一個精緻、現代化的企業儀表板，融合了高端編輯攝影與簡潔的軟體 UI。

02

色彩

#0007cbAccent

#111111Ink

rgba(17,17,17,0.7)Ink soft

#ffffffBG

#f1eee9BG soft

#d3cec6BG quiet

rgba(17,17,17,0.4)Muted

以高對比單色調為基礎，搭配溫暖的米色中性色調，並以單一深藍色作為互動高亮強調。

03

字型

geometric-sans · humanist-sans · monospace

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

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

以 4px 為基礎單位，並提供寬裕的垂直間距以提升可讀性。

05

表面 (圓角 / 陰影 / 邊線)

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

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

全寬響應式佈局，內容欄位設有受限的最大寬度。

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

在 color、background-color 和 border-color 屬性上套用平滑過渡。 · 為 hover 狀態套用細微的 background-size 動畫。

平滑的 color 與 background-color 過渡效果。 · 立即回應，帶有細微的 scale 或 color 變化。

08

組件

button 實心黑色或描邊的藥丸形按鈕，搭配簡潔的無襯線字體。
card 簡潔的卡片，邊框極簡或帶有細微陰影，通常包含產品 UI 截圖。
chip 簡單的文字標籤，帶有細微背景或邊框。
input 簡潔的文字輸入框，帶有細微邊框與圓角。
hero 大膽、具表現力的字體，搭配文字與產品影像或攝影圖片的並排佈局。

09

文案語氣與禁用清單

語氣專業、自信且前瞻性。
標題風格 關於產品領導力與 AI 能力的大膽直接陳述。
按鈕文案 清晰、以行動為導向的短語，如「開始免費試用」與「查看演示」。

勿為首頁英雄區使用深色背景——截圖顯示為純淨白色背景。
勿為標題使用過度裝飾或展示型的襯線字體——截圖顯示為簡潔的幾何無襯線字體。
勿依賴明亮、飽和的強調色——截圖顯示為克制的配色，僅使用單一深藍色作為強調。
勿使用小而擁擠的字體——截圖顯示為寬裕的行高與字距。
勿使用複雜、繁瑣的背景圖案——截圖顯示為純色與攝影影像。
勿使用生硬、方塊感的 UI 元件——截圖顯示為圓角按鈕與卡片。
避免: 過於隨意的語言
避免: 模糊的行銷術語
避免: 激進的緊迫性策略

10

包內真實截圖

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 — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Intercom 的首頁是現代 SaaS 設計的典範，融合了高端編輯美學與簡潔、功能性 UI。其核心識別專業且聚焦 AI，採用以白色 (#ffffff)、溫暖米色 (#d3cec6) 和近黑 (#111111) 文字為基礎的克制配色。字體主要採用簡潔的幾何與人文無襯線體，首頁標題使用 54px 的醒目展示尺寸，並搭配緊湊的字距。關鍵互動採用平滑的 0.4s 過渡。核心設計原則：優先使用寬裕的留白，避免過度裝飾元素，並保持單色調基礎搭配細微的溫暖中性色調，讓產品影像與深藍色 (#0007cb) 強調色得以突顯。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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