精選 · 開放 · 免費
Airtable
統一的工作空間，透過 AI 驅動的數據管理，串聯團隊工作流程。
CleanProductivitySaaSToolingReference
01
設計氣質 DNA
工作流程企業級數據互聯互通無代碼
數位試算表結合專案管理工具
02
色彩
#181D26Ink
#444444Ink soft
#FFFFFFBG
#F8FAFCBG soft
#6E6E6EMuted
rgba(24,29,38,0.12)Line
簡潔、高對比的白底黑字，輔以極少量的強調色。
03
字型
humanist-sans
- display
48px · 500 - heading
32px · 500 - body
20px · 400
大型展示標題使用 Haas Grot。 · 內文與 UI 元素使用 Haas。 · 行高隨字號增大而收緊。 · 內文的字距略微加寬。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
垂直間距以 4px 為基準單位，採用標準增量。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用主色調、低透明度的 1px 細微邊框。
rgba(15, 48, 106, 0.05) 0px 0px 20px 0px · rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的置中內容區塊，桌面版具有寬廣的邊距。
07
動效與互動
150msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 時的顏色與背景細微過渡。 · 元素可見性的平滑變化。
hover 時，按鈕顏色略微加深或填充色改變。 · 細微的縮放或顏色反饋。
08
組件
- button 主要按鈕為實心黑色配白色文字，次要按鈕為白色配黑色邊框。提供膠囊形與矩形兩種變體。
- card 淺灰色背景卡片，帶有細微的圓角。
- chip 截圖中未使用。
- input 標準的文字輸入框，配有細微邊框。
- hero 置中的標題與副標題，搭配雙個行動呼籲按鈕，下方是信賴企業的標誌牆。
09
文案語氣與禁用清單
- 語氣 專業、清晰，著重企業級應用。
- 標題風格 簡潔、強調效益的陳述，著重於互聯互通與效率。
- 按鈕文案 直接且以行動為導向（例如：免費開始使用、預約產品演示）。
- 勿使用明亮、飽和的強調色 — 截圖顯示以黑白為主的單色調色盤。
- 勿使用裝飾性或書寫體字型 — 截圖顯示乾淨、現代的無襯線字型。
- 勿使用厚重、複雜的陰影 — 截圖顯示細微、近乎平面化的設計，高度感極低。
- 勿使版面過於擁擠 — 截圖顯示寬鬆的留白與聚焦的內容區塊。
- 勿將深色模式設為預設 — 截圖顯示以乾淨的白色背景作為主要畫布。
- 勿使用不規則或過度活潑的圓角 — 截圖顯示一致、主要為矩形或細微圓角的設計。
- 避免: 術語
- 避免: 過於口語化的語言
- 避免: 誇張的行銷用語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Airtable 的設計是一種簡潔、聚焦企業級的 SaaS 美學，核心在於清晰與專業。色彩盤採用單色調，使用深色墨水 (#181D26) 搭配純白背景 (#FFFFFF)，次要介面則使用柔和的灰色 (#F8FAFC)。沒有主導的強調色；透過強烈對比與按鈕樣式來達成視覺重點。字型為現代人文主義無襯線家族，以清晰的層級區分展示文字與內文。版面佈局寬敞，留白充足，內容區塊置中。關鍵限制：避免使用飽和的強調色，僅使用乾淨的無襯線字型，並維持文字與背景間的高對比度。標準 UI 元素中不使用厚重陰影或複雜漸層。
en · zh-CN · zh-TW · ja · ko