精選 · 開放 · 免費

Fathom

一個簡潔、隱私優先的 Google Analytics 替代方案。

01

設計氣質 DNA

一個專注於隱私而非複雜性的，冷靜、極簡風格的網路分析儀表板。

02

色彩

中性、高對比色調，搭配單一鮮明紫色作為主要操作的強調色。

03

字型

humanist-sans · monospace

• display56px · 500
• heading40px · 500
• body18px · 400
• caption14px · 400

使用 -webkit-font-smoothing: antialiased 以實現清晰的文字渲染。 · 將行長限制在約 680px 以獲得最佳可讀性。 · 對程式碼片段或資料表格使用等寬字體。

04

間距

以 4px 為基礎網格，搭配寬裕的留白以強調簡潔性。

05

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

None: None

06

版面

單欄置中佈局，主視覺下方設有雙欄功能網格。

07

動效與互動

內容進入可視區域時，使用細微的淡入效果。 · 互動元素上，使用平滑的顏色與背景過渡效果。

按鈕與連結上的顏色變化或細微背景位移。 · 輕微的縮放或顏色變化以指示作用中狀態。

08

組件

• button 實心圓角按鈕，具高對比度，主要按鈕使用強調色，次要按鈕使用深色中性色。
• card 邊框極簡或帶有細微陰影的乾淨卡片，用於功能亮點與資料表格。
• chip 小型圓角標籤，淺色背景搭配深色文字，用於 'New' 等標籤。
• input 具備乾淨邊框與細微聚焦狀態的簡潔文字輸入框。
• hero 左側為大型粗體排版，右側搭配資料視覺化或模型示意圖。

09

文案語氣與禁用清單

• 語氣 清晰、直接且令人安心。
• 標題風格 強調簡潔與隱私的粗體、效益導向表述。
• 按鈕文案 採用 'Start free trial' 等行動導向的短語，搭配閃電圖示。

• 不要使用複雜的漸層或厚重的紋理 —— 截圖顯示的是乾淨的純色背景。
• 不要使用鮮豔、多色彩的色盤 —— 截圖僅使用單一紫色強調色。
• 不要使用裝飾性、草書或過度風格化的字體 —— 截圖使用的是簡潔的無襯線字體。
• 不要讓 UI 過度擁擠 —— 截圖優先考量留白與清晰度。
• 不要將深色模式設為預設 —— 截圖顯示的是淺色主題介面。
• 不要對所有元素都使用圓角 —— 截圖中部分 UI 元素採用直角。
• 避免: 技術術語或複雜的行銷用語。
• 避免: 具侵略性或高壓的銷售語言。
• 避免: 模糊或過於抽象的效益描述。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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