精選 · 開放 · 免費
Segment
一個簡化複雜資料管道的專業客戶資料平台。
saasdata
01
設計氣質 DNA
資料平台整合管道統一
客戶資料的可靠基礎設施管道
02
色彩
#1866EEAccent
#FFFFFFInk
#CADCD8Ink soft
#000D25BG
#151F36BG soft
#F3F4F7BG quiet
rgba(202, 205, 216, 1.0)Line
高對比深色模式，營造技術感與高級感，使用藍色作為主要操作色。
03
字型
humanist-sans · monospace
- display
56px · 700 - headline
40px · 700 - body
16px · 400
大型展示文字採用緊湊的字距，以維持視覺密度。 · 內文使用 1.75 的標準行高，確保可讀性。 · 字重保持保守，主要使用 400 與 700。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
章節之間留有充足的垂直間距，營造平靜、無雜亂的佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 10px
pill · 50px
邊框使用極少，主要為按鈕與底線的 1px 或 2px 邊框。
0px 10px 37.5px 0px rgba(18, 28, 45, 0.15) · inset 0px 0px 0px 2px rgb(24, 102, 238) · inset 0px 0px 0px 2px rgb(255, 255, 255)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
簡潔、上方較重的佈局，包含一個突出的主視覺區域，後接多欄位的功能網格。
07
動效與互動
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素的背景色與顏色流暢過渡。 · 按鈕與連結在 hover 時有細微的變形效果。
透過背景色或透明度的細微變化來表示互動性。 · 透過顏色變化提供即時視覺反饋。
08
組件
- button 圓形膠囊按鈕，主要操作使用實心藍色填充，次要操作使用描邊。
- card 簡潔的深色卡片，透過細微邊框或背景變化來區隔內容區域。
- chip 小型膠囊狀標籤，使用淺色背景與深色文字，用於分類。
- input 標準表單欄位，具有清晰邊框與圓角。
- hero 全寬深色區塊，包含大型標題、輔助文字與顯眼的插圖。
09
文案語氣與禁用清單
- 語氣 專業、 helpful、直接。
- 標題風格 清晰直接，常使用第一人稱複數以建立信任。
- 按鈕文案 以行動為導向且具體，引導使用者進行下一步操作。
- 不要使用雜亂、多色的漸層——截圖顯示的是純色的深海軍藍背景。
- 不要使用尖銳、方形的角——截圖顯示所有元件均使用圓角（4px、8px、50px）。
- 不要將長段落文字置中對齊——截圖顯示內文採用左對齊以利閱讀。
- 不要使用纖細、精緻的字體——截圖顯示粗體、清晰的標題與易讀的內文。
- 不要使用雜亂的導覽列——截圖顯示簡潔、頂端對齊的導覽列，僅含少量項目。
- 不要使用厚重的陰影來營造深度——截圖顯示細微、柔和的陰影，符合扁平化設計美學。
- 避免: 過於隨意的俚語
- 避免: 激進的銷售用語
- 避免: 不必要複雜的行話
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個專業的 B2B SaaS 落地頁，用於客戶資料平台。設計以深海軍藍（#000D25）為背景、清晰的白色（#FFFFFF）文字，以及主要藍色（#1866EE）強調色為特色。字體採用人文主義無襯線字族（Whitney SSm），標題使用緊湊字距，內文則留有充足間距。佈局簡潔寬敞，使用 12 欄網格與充足的垂直節奏。關鍵互動包括按鈕與連結的流暢 0.3 秒過渡效果。重要設計規則包括：按鈕不要使用方角、長文不要置中對齊、不要引入多種高對比強調色。
en · zh-CN · zh-TW · ja · ko