精選 · 開放 · 免費

Spark

一個以 AI 驅動的清晰度與平台一致性為核心的現代電子郵件用戶端。

productivityemail
Spark 網站截圖
↓ 下載設計系統包 (36 MB)在 OpenDesign 中開啟

原站: https://sparkmailapp.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

專注生產力智慧AI跨平台

一張雜亂的辦公桌，被清理成一個單一、專注的工作空間。

02

色彩

#205EFFAccent
#111111Ink
#333333Ink soft
#FBFBFDBG
#F5F5F7BG soft
#F8F8FABG quiet
#6E6E6EMuted
rgba(175,175,175,1.0)Line

純淨、通透的白色搭配單一鮮明的藍色動作色，以及高對比度的文字。

03

字型

humanist-sans · system-sans

使用粗體的展示字型搭配緊湊的字距以增加衝擊力 · 使用正常字重的內文字以達到最佳可讀性 · 幾何人文主義風格的主字型，並搭配系統字型作為備選

04

間距

4px
8px
12px
16px
24px
32px
40px
64px

以 8px 為基礎單位，搭配寬裕的章節內距

05

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

sm · 6px
md · 16px
lg · 24px
pill · 999px

1px solid rgba(175,175,175,0.25)

0px 20px 40px 0px rgba(34,41,69,0.12) · 0px 7px 30px 0px rgba(160,165,209,0.2)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

標準的 12 欄置中網格，搭配寬裕的空白間距

07

動效與互動

200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

懸停時有平滑的色彩過渡（0.3 秒） · 狀態改變時有透明度淡出效果 · 互動卡片有細微的上浮效果

平滑的背景色填充，過渡時間 0.3 秒；裝置模型有輕微的縮放效果 · 立即的色彩變化，並伴隨細微的陰影減少

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Spark — 桌面首屏（hero）
桌面首屏（hero）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spark — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Spark 是一個以生產力為核心的電子郵件用戶端，定位為現代專業人士的智慧、專注解決方案。其設計 DNA 具有純淨、通透的美學風格，以主導的白色（#FBFBFD）為背景，並使用單一高飽和度的藍色（#205EFF）作為主要動作的強調色。字型排版採用人文主義無襯線字型（Sofia-Pro）作為展示標題，字距緊湊（-1.5px）且字重為 800，內文則搭配系統字型。佈局運用寬裕的空白（64px 內距）與柔和的圓角（16-24px 圓角半徑）。關鍵的設計禁忌：永遠不要將深色模式作為主要介面，永遠不要在展示字型上使用襯線字型，也永遠不要用多種競爭性的強調色來破壞色彩系統。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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