精選 · 開放 · 免費

Todoist

全球領先的待辦事項應用程式，專為清晰與簡約而設計。

productivitysaas

Todoist 網站截圖

↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://todoist.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

工作管理組織簡約生產力專業

一本整潔有序的數位筆記本，記錄你的生活

02

色彩

#E44232Accent

#25221EInk

rgba(37,34,30,0.66)Ink soft

#FFFFFFBG

#F9F7F6BG soft

#FEFDFCBG quiet

rgba(37,34,30,0.49)Muted

rgba(37,34,30,0.18)Line

溫潤的中性色調搭配單一高彩度的紅色強調色

03

字型

humanist-sans · geometric-sans

display56px · 500
h236px · 500
body18px · 400
small15px · 400

主要標題與介面文字使用 Inter · 次要內文使用 Graphik · 裝飾性或引言元素使用 Caecilia · 標題採用粗體並搭配緊湊的字距 · 內文使用常规字重並搭配適度的行高

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

一致的 4px 基礎網格，搭配各區塊間寬裕的留白

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(37,34,30,0.18)

0px 1px 0px 0px rgba(37, 34, 30, 0.04) · 0px 14px 19px -9px rgba(37, 34, 30, 0.07) · 0px 10px 48px 0px rgba(37, 34, 30, 0.18)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

12 欄網格搭配寬裕的邊距與置中的內容區塊

07

動效與互動

150msmicro

350mssmall

500msmedium

cubic-bezier(0.2, 0.8, 0.2, 1)easing

基於變形的懸停效果 · 流暢的背景色彩轉場 · 互動元素的微妙縮放動畫

微妙的變形縮放與色彩亮度提升 · 透過彈性緩動縮小

08

組件

button 圓角矩形，搭配漸層背景與微妙陰影，用於主要操作
card 簡潔的白色容器，搭配細微邊框與圓角
chip 藥丸形類別選擇器，搭配柔和背景
input 簡潔的輸入欄位，搭配細微邊框與圓角
hero 雙欄佈局，搭配粗體標題與產品模型

09

文案語氣與禁用清單

語氣友善、親切且自信
標題風格 簡短有力的陳述，強調清晰與簡約
按鈕文案 直接、行動導向的詞句，例如「免費開始使用」

避免使用冷色調的藍色強調色 — 截圖顯示為溫暖的紅色強調色
避免使用深色背景 — 截圖顯示為以白色/淺色為主的背景
避免使用厚重的邊框 — 截圖顯示為細微的 1px 邊框
避免使用銳利的邊角 — 截圖顯示為圓角 (8-15px 半徑)
避免內文使用襯線字體 — 截圖顯示為無襯線字體
避免使用密集的文字區塊 — 截圖顯示為寬裕的留白與簡短的段落
避免使用多種競逐的強調色 — 截圖顯示為單一的紅色強調色
避免: 技術術語或複雜名詞
避免: 具侵略性或高壓的語言
避免: 過於企業化或正式的語調
避免: 主視覺區塊中密集的段落

10

包內真實截圖

Todoist — 桌面首屏（hero） — 桌面首屏（hero）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Todoist — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Todoist 是一款優質的 SaaS 生產力工具，定位為全球領先的待辦事項應用程式。其設計透過溫潤、簡潔的美學風格搭配寬裕的留白，強調清晰度。主要色彩包括白色 (#FFFFFF) 與溫暖的米白色 (#F9F7F6) 背景、深色墨水文字 (#25221E)，以及獨特的紅色強調色 (#E44232)。字體方面，標題與介面使用人文主義無襯線體 (Inter)，內文則使用幾何無襯線體 (Graphik)。介面採用圓角 (8-12px)、微妙陰影與 12 欄網格佈局。關鍵禁止事項：切勿使用冷色調藍色、深色背景、銳利邊角、密集文字區塊或多種強調色。系統維持友善、親切的語調，標題簡短並強調簡約與清晰。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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