精選 · 開放 · 免費
Things
一款高質感、極簡的個人任務管理器，強調清晰度與易用性。
productivityapp
01
設計氣質 DNA
極簡功能性清晰高質感
一個冷靜、有條理的工作空間。
02
色彩
#4F91FBAccent
#303336Ink
#F2F5F7BG
#55606EMuted
rgba(0, 15, 36, 0.46)Line
在柔和的中性背景上使用高對比度文字，搭配單一功能性藍色強調色。
03
字型
humanist-sans
- display
56px · 800 - heading
32px · 700 - body-lg
20px · 400 - body
16px · 400 - caption
14px · 400
展示標題使用 800 字重與緊湊的字距。 · 內文使用 400 字重以獲得最佳可讀性。 · 連結使用藍色強調色且無底線。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
80px
寬裕的留白以創造冷靜、舒適的佈局
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0, 15, 36, 0.1)
0 4px 12px rgba(0, 15, 36, 0.08)
06
版面
1200container
12columns
24pxgutter
768 / 1024breakpoints
中央對齊的單欄佈局，搭配寬邊距
07
動效與互動
200msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
流暢的淡入效果 · 細微的 hover 狀態過渡
細微的色彩變化或透明度改變 · 立即的視覺回饋
08
組件
- button 圓潤的藥丸形按鈕，實心藍色背景
- card 白色背景，搭配細微邊框與圓角
- chip 極簡的圓角標籤
- input 簡潔的輸入欄位，搭配細微邊框
- hero 中央圖示、大膽粗體標題、描述性副標題與單一 CTA
09
文案語氣與禁用清單
- 語氣 專業、實用且低調
- 標題風格 直接且具描述性
- 按鈕文案 清晰且著重行動
- 勿使用深色模式 — 截圖顯示為淺灰色背景 (#F2F5F7)。
- 勿使用裝飾性襯線字體 — 截圖顯示所有文字均使用 humanist-sans。
- 勿使用多種鮮豔的強調色 — 截圖顯示僅使用藍色 (#4F91FB) 作為單一功能性強調色。
- 勿使用擁擠、狹窄的間距 — 截圖顯示寬裕的垂直與水平邊距。
- 勿使用厚重的陰影效果 — 截圖顯示柔和、細微的陰影。
- 勿使用銳利、有角度的圓角 — 截圖顯示柔和、圓潤的角落（最大 18px）。
- 避免: 過多的標點符號
- 避免: 全大寫的喊叫式標語
- 避免: 過於隨意的俚語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
The Things 網站採用冷靜、極簡的設計，以柔和的淺灰色背景 (#F2F5F7) 與深木炭色文字 (#303336) 為核心。單一功能性藍色強調色 (#4F91FB) 用於連結與互動元素。字型採用 humanist-sans-serif 系列，主展示標題使用 800 重字重，內文使用標準 400 字重。佈局為單欄且高度舒適，使用寬裕的留白以強調清晰度與專注。關鍵限制：勿使用深色模式；勿引入襯線字型；勿添加多種鮮豔色彩；避免擁擠的佈局；避免強烈的陰影效果；避免銳利、有角度的邊框。
en · zh-CN · zh-TW · ja · ko