精選 · 開放 · 免費
Spark
一個以 AI 驅動的清晰度與平台一致性為核心的現代電子郵件用戶端。
productivityemail
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
- display
56px · 800 - headline
32px · 700 - body
20px · 400 - small
14px · 400
使用粗體的展示字型搭配緊湊的字距以增加衝擊力 · 使用正常字重的內文字以達到最佳可讀性 · 幾何人文主義風格的主字型,並搭配系統字型作為備選
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
組件
- button 高對比度的實色主要按鈕,採用膠囊形圓角;次要按鈕為外框式幽靈按鈕
- card 柔和圓角的卡片,帶有細微的陰影深度,背景為白色
- chip 膠囊形狀態徽章,帶有背景漸層(例如:AI 標籤)
- input 邊框清晰的輸入框,帶有細微的內部陰影
- hero 分割式佈局,左側為大字型排版,右側為懸浮的裝置模型,背景為藍色放射狀漸層
09
文案語氣與禁用清單
- 語氣 專業、自信且以專注為導向
- 標題風格 簡短、有力的陳述句,並帶有句點
- 按鈕文案 以動作導向的動詞(購買、下載、查看)搭配高對比度按鈕
- 請勿使用深色模式佈局——截圖顯示為以淺色(#FBFBFD)為主的背景
- 請勿使用襯線字型作為標題——截圖顯示為人文主義無襯線字型(Sofia-Pro)
- 請勿使用多種競爭性的強調色——截圖顯示為單一主導的藍色(#205EFF)
- 請勿建立密集的資訊架構——截圖顯示為寬裕的空白與大量內距(64px)
- 請勿在卡片上使用銳利的方形圓角——截圖顯示為圓潤的圓角(16px 至 24px)
- 請勿使用纖細的淺色字重來作為強調——截圖顯示標題使用粗體(800)
- 避免: 過於技術性的術語
- 避免: 激進的銷售語言
- 避免: 視覺上的雜亂
- 避免: 低對比度的文字
- 避免: 複雜的嵌套式選單
- 避免: 密集的文字區塊
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Spark 是一個以生產力為核心的電子郵件用戶端,定位為現代專業人士的智慧、專注解決方案。其設計 DNA 具有純淨、通透的美學風格,以主導的白色(#FBFBFD)為背景,並使用單一高飽和度的藍色(#205EFF)作為主要動作的強調色。字型排版採用人文主義無襯線字型(Sofia-Pro)作為展示標題,字距緊湊(-1.5px)且字重為 800,內文則搭配系統字型。佈局運用寬裕的空白(64px 內距)與柔和的圓角(16-24px 圓角半徑)。關鍵的設計禁忌:永遠不要將深色模式作為主要介面,永遠不要在展示字型上使用襯線字型,也永遠不要用多種競爭性的強調色來破壞色彩系統。
en · zh-CN · zh-TW · ja · ko