精選 · 開放 · 免費
Motion
AI 驅動的生產力平台，自動化排程與任務管理，讓你的產出倍增。
productivitysaas
01
設計氣質 DNA
生產力AI效率自動化工作流程
一個流暢、高效的數位工作空間，結合了日曆、筆記與任務，成為一個 AI 驅動的中樞。
02
色彩
#2c77e7Accent
#101828Ink
#475467Ink soft
#ffffffBG
#f0f4f8BG soft
#f7f8fbBG quiet
#787f86Muted
rgba(71, 84, 103, 0.1)Line
以潔淨的白色背景為主，搭配低調的灰色裝飾與鮮明的藍色主要動作色彩。
03
字型
humanist-sans · monospace
- display
64px · 700 - headline
40px · 700 - body
16px · 400 - small
14px · 400 - label
12px · 600
使用 Inter 作為內文與 UI 元素的字體 · 使用 Albert Sans 作為較大的展示標題字體 · 展示文字的字間距保持緊湊 · 使用半粗體字重作為強調與標籤用途
04
間距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
採用一致的 4px 格線系統，搭配寬敞的留白以提升可讀性
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(71, 84, 103, 0.1)
0 4px 6px -1px rgba(0, 0, 0, 0.05) · 0 2px 4px -2px rgba(0, 0, 0, 0.05) · 0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1) · 0 8px 10px -6px rgba(0, 0, 0, 0.1)
06
版面
1200container
12columns
24pxgutter
768 / 1024 / 1280breakpoints
首頁採用置中的單欄佈局，過渡至多欄功能區塊
07
動效與互動
150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有互動元素的流暢過渡效果 (150ms) · 懸停狀態的色彩過渡 · 縮放與移動的 Transform 過渡 · 陰影的 Box shadow 過渡效果
細微的色彩加深與陰影強化 · 按鈕在點擊時輕微縮放 (0.98)
08
組件
- button 實心藍色 (44, 119, 231) 搭配白色文字，圓角 (8px)，帶有細微陰影與懸停狀態過渡效果
- card 白色背景，搭配低調邊框、圓角 (8-12px) 與柔和陰影
- chip 小型圓角標籤，具備淺色背景與低調邊框
- input 白色輸入框，搭配低調邊框、圓角 (8px) 與佔位文字
- hero 大型置中標題，採用漸層文字作為強調，附有支援性的副標題與醒目的 CTA 按鈕
09
文案語氣與禁用清單
- 語氣 自信、專業且以結果為導向
- 標題風格 粗體、直接的陳述，強調效益與優勢
- 按鈕文案 以行動為導向，並附有明確的價值主張 (例如：「免費試用 Motion」)
- 避免在各處使用鮮豔的漸層——截圖僅在特定文字強調處使用低調的漸層
- 避免使用多重 CTA 造成雜亂——截圖顯示每個區塊僅有一個主要「免費試用 Motion」按鈕
- 避免使用厚重的邊框——截圖顯示使用非常低調、低不透明度的 1px 邊框
- 避免使用過多色彩——截圖顯示以藍色強調色搭配中性灰色調為主
- 避免使用裝飾性字體——截圖顯示使用簡潔、易讀的無襯線字體
- 避免使用過小的文字——截圖維持內文最小 14px 的可讀性
- 避免: 過於技術性的行話
- 避免: 被動語態
- 避免: 缺乏具體細節的模糊承諾
- 避免: 過多的驚嘆號
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 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個名為 Motion 的高級 SaaS 生產力平台，定位為能倍增生產力的 AI 驅動工作空間。關鍵設計元素包括潔淨的白色背景 (#ffffff)，搭配低調的灰色裝飾 (#f0f4f8, #787f86) 與鮮明的藍色主色 (#2c77e7)。字體採用人文無襯線體 (Inter 與 Albert Sans)，包含大型粗體標題 (64px，字重 700) 與簡潔的內文 (16px，字重 400)。關鍵設計限制：避免使用厚重的陰影或邊框、維持寬敞的留白、確保 CTA 醒目但不過度、並確保所有文字具有高對比度。設計強調清晰與專業，並謹慎使用漸層文字效果來強調關鍵效益陳述。
en · zh-CN · zh-TW · ja · ko