Todoist：17 年的溫暖極簡主義與極致克制

7 分鐘閱讀 • 219 字
Todoist：17 年的溫暖極簡主義與極致克制 screenshot

「Clarity, finally.」— Todoist

Todoist 在超過 17 年間始終堅持一個核心理念：最好的任務管理工具，就是你真正會使用的那一個。由 Amir Salihefendic 於 2007 年創立，Todoist 歷經了每一波生產力趨勢——GTD、子彈筆記、第二大腦、AI 代理——卻始終拒絕追逐複雜性。其背後的全遠端且獲利穩健的公司 Doist，以一套建立在一致性與克制之上（而非新奇感）的設計哲學，服務超過 5,000 萬專業人士。沒有增長駭客手法、沒有暗黑模式、沒有在核心功能上設置「升級解鎖」的門檻。最終成果是一款讓人感覺理所當然的產品，彷彿任務管理工具本來就該是這個樣子。

重點摘要

  1. 一個品牌色就足夠 - Todoist 僅將紅色（#E34432）用於主要行動呼籲按鈕和標誌，其他地方一概不用。這種極致的克制讓每個紅色元素都顯得重要。
  2. 基於透明度的文字層級創造毫不費力的和諧感 - 所有文字均源自同一個暖調深棕色（rgb(37,34,30)），以不同透明度（100%、66%、49%、18%、7%）呈現，無需使用多種灰色值。
  3. 溫暖的米白色不是白色 - #FEFDFB 的背景色（幾乎難以察覺的奶油色調）決定了介面是冰冷還是溫馨，而大多數使用者永遠不會有意識地注意到它。
  4. 陰影幾乎永遠不是答案 - Todoist 完全透過色彩和間距實現視覺層級。設計中幾乎看不到任何陰影。
  5. 17 年的精煉勝過 17 個功能 - 設計中沒有任何元素看起來是新潮或趕時髦的。一切都像是經過近二十年的測試、打磨和驗證。

為什麼 Todoist 重要

Todoist 證明了長久經營與克制是設計中的競爭優勢。當競爭對手追逐功能對等和視覺趨勢時，Todoist 的設計卻透過減法進化——移除一切無助於「捕捉、整理、執行」核心循環的元素。產品對 AI 的態度（「Ramble」功能，將語音輸入轉化為結構化任務）同樣體現了這一哲學：服務既有工作流程，而非創造全新的互動範式。

關鍵成就： - 在每個平台（網頁、iOS、Android、Mac、Windows）上以一致的視覺語言服務超過 5,000 萬專業人士 - 作為一家約 100 人的獨立且獲利的公司，維持著慷慨的免費增值模式 - 打造了自然語言輸入解析功能（「每週二下午五點買雜貨」自動轉為循環任務），消除了表單填寫的摩擦

核心設計原則

1. 單色品牌策略

紅色（#E34432）是唯一的品牌色。它出現在主要行動呼籲按鈕、標誌和品牌識別時刻。僅此而已。沒有輔助強調色、沒有漸層、沒有色彩系統。這種紀律本身就是設計——當所有元素都在爭奪注意力時，什麼都贏不了。透過將紅色限制在真正重要的時刻，Todoist 確保視線被精準引導到它該去的地方。

懸停狀態加深為 #CF3520，文字連結使用獨立的藍色（#0F66AE）以維持帶底線的藍色文字可點擊的慣例。但品牌本身只有一個顏色，以外科手術般的精準度運用。

應用程式內的優先級系統僅在具有功能性意義時才引入色彩：P1 緊急（#D1453B）、P2 高（#EB8909）、P3 中（#246FE0）、P4 預設（無色彩）。即便在此，色彩服務的是資訊傳達，而非裝飾。

2. 基於透明度的文字層級

這是任何現代生產力工具中最自律的排版系統。頁面上的每一段文字都是 rgb(37,34,30)——一種帶有微妙暖調的深棕黑色，與米白色背景相呼應。標題使用 100% 透明度。內文使用 66%。靜音說明文字使用 49%。邊框和微妙分隔線使用 18%。背景色調使用 7%。

這種單色系方法創造了多種灰色值無法達成的和諧感，因為每個文字元素共享相同的基底色彩，僅在存在感上有所變化。文字系統中沒有任何灰色值，也沒有任何輔助色彩。

透明度階層：
100% ████████████████████ 標題、主要文字
 66% █████████████        內文、描述
 49% ██████████           說明文字、中繼資料
 18% ████                 邊框、微妙分隔線
  7% ██                   背景色調

全部源自 rgb(37, 34, 30)

3. 溫暖極簡主義

背景色 #FEFDFB——rgb(254,253,252)——幾乎與純白色無法區分。但這個差異就是一切。這種溫暖的米白色創造了一個親切的畫布，讓應用程式的感覺像是打開一本井然有序的筆記本，而非啟動冰冷的軟體。產品截圖自然地浮在版面中，無需厚重的陰影或邊框來將它們與背景區隔。

綠色表面（#F4FBF7）和鼠尾草色表面（#F6FAEB）透過同樣細微的色調轉變提供區塊區分。這些不是醒目的區塊分隔——而是溫柔的環境變化，引導視線卻不強求注意力。

可移植模式

Todoist 的設計系統因其簡潔性而具有極高的可移植性。基於透明度的文字層級適用於任何專案——將 rgb(37,34,30) 替換為你自己的基底文字色，五個透明度層級即可創造出即時且和諧的排版系統。

CSS 的實作展現了這套方法的優雅之處：

:root {
  /* Todoist's warm minimal palette */
  --color-background: #FEFDFB;
  --color-surface-green: #F4FBF7;
  --color-surface-sage: #F6FAEB;
  --color-text: rgb(37, 34, 30);
  --color-text-secondary: rgba(37, 34, 30, 0.66);
  --color-text-muted: rgba(37, 34, 30, 0.49);
  --color-text-faint: rgba(37, 34, 30, 0.18);
  --color-text-whisper: rgba(37, 34, 30, 0.07);
  --color-brand: #E34432;
  --color-brand-hover: #CF3520;
  --color-link: #0F66AE;

  /* Typography */
  --font-sans: Graphik, "Graphik fallback", Arial, Helvetica, sans-serif;
}

/* Warm off-white body */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Hero — confident but not aggressive */
h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.55px;
}

/* Single-color CTA — red IS the elevation */
.button-primary {
  background-color: var(--color-brand);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  transition: background-color 0.15s ease;
}
.button-primary:hover {
  background-color: var(--color-brand-hover);
}

自訂的 Graphik 字體（來自 Commercial Type）恰好處於幾何體與人文體之間的甜蜜點——比 Inter 更溫暖，比 Helvetica 更不拘謹。其中性的溫暖感與米白色背景和棕黑色文字相得益彰。雜湊檔名模式（Graphik-af49fcca2967e850）表明採用了 Next.js 字體最佳化，確保系統字體無法保證的一致跨平台渲染。

標題以 55px/600 字重搭配 1.15 行高，明顯比 Rivian 或 Obsidian 等品牌採用的巨碑式 1.0 行高更為親切。負字距保持一致的 -1% 比例（55px 時為 -0.55px，38px 時為 -0.38px），創造等比收緊而非任意數值。

對於 SwiftUI，基於透明度的文字系統可以乾淨地轉換：

extension Color {
    static let todoistBg = Color(red: 254/255, green: 253/255, blue: 252/255)
    static let todoistText = Color(red: 37/255, green: 34/255, blue: 30/255)
    static let todoistSecondary = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.66)
    static let todoistMuted = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.49)
    static let todoistBrand = Color(red: 227/255, green: 68/255, blue: 50/255)
    static let todoistSurface = Color(red: 244/255, green: 251/255, blue: 247/255)
}

// Opacity-based text hierarchy in practice
VStack(alignment: .leading, spacing: 8) {
    Text("Clarity, finally.")
        .font(.system(size: 55, weight: .semibold))
        .tracking(-0.55)
        .foregroundStyle(Color.todoistText)

    Text("Join 50+ million professionals who simplify work and life.")
        .font(.system(size: 16))
        .foregroundStyle(Color.todoistText.opacity(0.66))
}

設計啟示

克制是一種競爭優勢。 Todoist 的單一品牌色迫使每個紅色元素都必須有意義。當競爭對手使用三到四種強調色時，什麼都不突出。當 Todoist 只用一種時，行動呼籲按鈕不可能被忽視。

溫暖的米白色背景改變了情感基調。 #FFFFFF 和 #FEFDFB 之間的差異僅有三個 RGB 數值——單獨看幾乎無法察覺，但整體而言卻具有變革性。溫暖的背景讓整個體驗感覺親切而富有人情味。冰冷的白色讓介面感覺像工具。溫暖的米白色讓介面感覺像你想要駐足的空間。

透明度層級比灰階更和諧。 同一基底色的五個層級能創造毫不費力的統一感，因為每個文字元素共享相同色調。五個不同的灰色值（例如 #333、#666、#999、#CCC、#EEE）會產生微妙的不協調感，因為每一個都是不同的顏色，而不僅僅是不同的強度。

當間距和色彩足夠時，避免使用陰影。 Todoist 證明了整個視覺層級可以在不使用投影陰影的情況下運作。紅色行動呼籲按鈕之所以突出，是因為它是溫暖柔和畫布上唯一的飽和色——而不是因為它浮在表面之上。這種方式更經得起時間考驗，在不同裝置上的渲染也更一致。

當溫暖感是品牌核心時，避免在行銷頁面使用深色模式。 溫暖的米白色畫布就是 Todoist 的身份。深色模式存在於應用程式中（長時間使用時較為實用），但行銷網站始終是淺色的。啟示：如果溫暖感是你品牌的核心，就在你最顯眼的介面上保護它。

避免時髦的排版極端。 沒有 100px 以上的展示文字、沒有極端的負字距、沒有 800 字重。Graphik 最粗只到 600。這種克制意味著設計不會讓自己過時——它在五年前看起來得體，五年後依然得體。

常見問題

是什麼讓 Todoist 的設計感覺「理所當然」而非「刻意設計」？

十七年的持續精煉。每一個元素都經歷了多次設計潮流的考驗，卻從未被更時髦的替代品所取代。溫暖的米白色背景、單一的紅色強調色、基於透明度的文字層級體系，以及 Graphik 字體，這些都不是追逐時尚的選擇——而是經過近二十年驗證的經久耐用之選。當一切都不顯得刻意添加或趕時髦時，設計便顯得渾然天成。

Todoist 基於透明度的文字層級體系如何運作？

頁面上所有文字都使用同一種顏色——rgb(37,34,30)，一種溫暖的深棕黑色——以五種透明度層級呈現：100% 用於標題、66% 用於內文、49% 用於說明文字、18% 用於邊框、7% 用於背景色調。由於每個元素共享相同的基礎色調，層級體系自然地呈現出統一感，無需使用多種不同的灰色值。

為什麼 Todoist 只使用一種品牌色？

克制即是設計策略。透過將紅色（#E34432）限制在行動呼籲按鈕和品牌重點時刻，Todoist 確保視線精準地落在需要的位置。沒有第二種強調色來爭奪注意力。單一品牌色的紀律也簡化了跨平台的一致性——同一種紅色在網頁、iOS、Android、Mac 和 Windows 上呈現完全一致，無需複雜的色彩系統。

設計師能從 Todoist 的 AI 功能設計中學到什麼？

Todoist 的 AI 功能「Ramble」將語音輸入轉換為結構化任務，而非引入聊天機器人或全新的互動範式。其啟示在於：AI 應服務於現有的工作流程，而非創造新的流程。設計透過將自然語言輸入作為最突出的元素來支持這一點——輸入或說出一句話，系統便完成解析。沒有 AI 品牌標誌、沒有聊天氣泡、沒有為新奇而新奇的設計。

Todoist 如何在不使用陰影的情況下實現視覺層級？

僅透過顏色和間距。溫暖的米白色背景（#FEFDFB）提供了一塊細膩的畫布。單一的紅色行動呼籲按鈕之所以醒目，是因為它是整個色彩體系中唯一的飽和色。排版層級來自於單一基礎色的尺寸與透明度變化。區塊區分則使用柔和的綠色（#F4FBF7）或鼠尾草色（#F6FAEB）表面過渡。最終呈現出一種扁平、統一的設計風格，經得起時間考驗，並在每一種裝置上都能一致呈現。

參考資料