精選 · 開放 · 免費
Intercom
以清晰、克制與優雅功能為優先的頂級 AI 原生客服中心。
SaaSCleanProductivityCalmRefined
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
- display
54px · 400 - h2
28px · 400 - body
16px · 400 - caption
14px · 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
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Intercom 的首頁是現代 SaaS 設計的典範,融合了高端編輯美學與簡潔、功能性 UI。其核心識別專業且聚焦 AI,採用以白色 (#ffffff)、溫暖米色 (#d3cec6) 和近黑 (#111111) 文字為基礎的克制配色。字體主要採用簡潔的幾何與人文無襯線體,首頁標題使用 54px 的醒目展示尺寸,並搭配緊湊的字距。關鍵互動採用平滑的 0.4s 過渡。核心設計原則:優先使用寬裕的留白,避免過度裝飾元素,並保持單色調基礎搭配細微的溫暖中性色調,讓產品影像與深藍色 (#0007cb) 強調色得以突顯。
en · zh-CN · zh-TW · ja · ko