精選 · 開放 · 免費

Umami

Umami 是一款簡約、以隱私為核心的開源網路分析工具，作為 Google Analytics 的替代方案。

01

設計氣質 DNA

一個乾淨、極簡的網站數據分析儀表板。

02

色彩

採用乾淨、高對比的調色板，以中性白色背景搭配單一藍色強調色，用於主要操作。

03

字型

humanist-sans · monospace

• display63px · 800
• heading42px · 700
• body14px · 400
• small11px · 400

標題字體採用粗體 humanist sans-serif，字距緊湊。 · 內文字體使用一般粗細的 humanist sans-serif，確保可讀性。 · 文件中的程式碼片段使用等寬字體。

04

間距

間距系統基於 7px 基礎單位。

05

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

1px solid rgba(0, 0, 0, 0.05)

rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 1px 2px -1px · rgba(0, 0, 0, 0.1) 0px 8px 10px -6px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px · rgba(0, 0, 0, 0.15) 0px 10px 40px 0px

06

版面

主視覺區採用單欄佈局，功能與內容區塊則過渡至多欄網格。

07

動效與互動

hover 與 focus 時，顏色與背景色平滑轉場。 · 動態內容（如圖表）採用 opacity 淡入效果。

互動元素（如按鈕與連結）在 hover 時，顏色與背景色會變化。 · 點擊時有細微的背景色變化。

08

組件

• button 藍色圓角矩形按鈕，白色文字，用於主要操作。
• card 白色卡片，帶有細微邊框與淺色陰影，用於展示 UI 模型。
• chip 小型圓角徽章，用於顯示數據的百分比變化。
• input 標準文字輸入框，帶有細微邊框。
• hero 寬大的置中主視覺區，包含粗體大標題、副標題與主要行動號召按鈕，後方接續一個 UI 模型。

09

文案語氣與禁用清單

• 語氣 直接、自信且 helpful，強調簡約與隱私。
• 標題風格 粗體、大型且簡潔的陳述，突顯核心價值主張。
• 按鈕文案 清晰且以行動為導向，使用如「免費開始」之類的詞語。

• 勿使用深色背景——截圖顯示主要為白色 (#ffffff) 背景。
• 勿使用多種強調色——截圖顯示僅有單一藍色 (#3366FF) 強調色。
• 勿使用圓角半徑大於 9.45px 的圓角——截圖顯示為保守的圓角設計。
• 勿在所有元素上使用陰影——截圖僅在特定元件（如卡片）上顯示陰影。
• 勿使用襯線字體作為標題——截圖顯示所有標題均使用 humanist sans-serif。
• 勿使用擁擠狹窄的佈局——截圖顯示寬裕的留白與內距。
• 勿使用資訊過載的主視覺區——截圖顯示清晰、聚焦的大標題與單一行動號召。
• 勿使用深色模式主題——截圖顯示為淺色主題。
• 避免: 使用複雜術語或過度技術性的語言。
• 避免: 過度推銷或使用誇飾詞彙。
• 避免: 使用俏皮或過於隨意的語氣。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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