Todoist Design System

Overview

Todoist's marketing chrome is a notebook-paper system, not a SaaS landing page — the canvas is an off-white "#ffffff" decorated with hand-drawn wavy-line doodles and pastel sparkle marks in the margins, and the only chromatic action on the page is a single red pill ("#e34432") burning at the top-right and again at the end of the hero. Set in Graphik 600 at 55px with -0.55px tracking, the headline "Clarity, finally." sits over the doodle without competing with it.

The single chromatic accent is Todoist Red {colors.primary} ("#e34432") — declared under the --color-td-primary CSS variable and used on exactly two surfaces above the fold: the "Start for free" CTA pill and a small dot inside the announcement bar. Hover transitions to {colors.primary-hover} ("#ee5244") and pressed state lands on {colors.primary-pressed} ("#cf3520"). Todoist holds the red back from body text, hairlines, and large surfaces — the rest of the system runs on a single warm-black ink (#25221e) that does double duty as text AND as every 1px border.

Warm-black duality: The extracted CSS maps "#25221e" to 38 distinct variable names — --display-onlight-primary, --ui-border, --field-outline-border-idle, --card-border-onhover, and so on — and the same hex appears 853 times across the page (421 as text, 417 as border). Where most SaaS systems separate the text token from the hairline token with a 10-step gray scale, Todoist collapses both onto one warm-black ink and reaches the perceived hierarchy through transparency layers (--greytransparent-50 through --greytransparent-900). The result reads like ink fading on paper rather than gray-on-white chrome.

Display type runs Graphik 600 with negative letter-spacing (-0.55px at 55px, -0.19px at 38px) on every h1 and h2. Body type runs Inter at weight 475 — between regular and medium — at 15.5–18px with positive letter-spacing (~0.09–0.18px), which gives Todoist's prose a slightly heavier, slightly looser texture than the weight-400 default most SaaS sites ship with. A Caecilia serif is reserved for blockquote testimonials at 20px regular with a 1.8 line-height, and a Shantell Sans script handles one hand-drawn margin label ("Take a peek!").

Single-radius geometry: 8px is the dominant corner (33 uses) — the primary CTA pill, the announcement bar inner shape, secondary outline buttons, and small chips all share it. 10–15px is reserved for larger cards and pastel feature tiles below the fold. Full-pill 9999px is reserved for in-product affordances only: the circular task checkbox, the bottom-right floating add-task button, and the small priority dots. Where Linear leans on 12px cards with a dark canvas and Notion leans on 8px rectangles with bold pastels, Todoist sits between them — sharing Notion's rectangle-leaning geometry while reserving true pills for the in-product layer.

Key Characteristics:

• Warm-black ink ({colors.ink} "#25221e") carries text AND every hairline — 38 CSS variables, 853 total uses, no separate gray scale.
• Single chromatic CTA — Todoist Red ("#e34432") used on exactly one button per fold, with {colors.primary-hover} and {colors.primary-pressed} for the only state variants.
• Two-family display/body split — Graphik 600 for display at -0.55px tracking, Inter at weight 475 for body (heavier than the 400 default).
• 8px radius dominant (33 uses); 10–15px for feature tiles; 9999px reserved for in-product checkbox / FAB / priority dots.
• Pastel feature-tile palette (peach "#ffb399", mint "#ebf5f0", butter "#fff5db", sky "#dceaff") under the fold — echoes the in-product priority and label colors.
• Caecilia serif for testimonials, Shantell Sans script for one hand-drawn margin label — typographic warmth without abandoning the system.
• Off-white canvas decorated with wavy-line doodles and sparkle marks — Todoist signs the marketing page like a notebook page, not a marketing site.
• Light-only marketing surface; the in-product dark theme is documented separately and not captured here.

Known Gaps

• The in-product dark theme is not captured here — only the marketing surface, which is light-only.
• Animation and transition timings were not extracted; 150–200ms ease is a safe default.
• Form-field error and validation states are not fully surfaced beyond the focused-input border (2px solid {colors.primary}).
• Graphik and Inter (and Caecilia, and Shantell Sans) are commercial families — Inter alone, or DM Sans paired with Inter, are acceptable open-source substitutes.
• The four pastel tile tints (peach, mint, butter, sky) are observed from the captured feature row; Todoist's full in-product label palette carries additional tints (red-200, fuschia-200, purple-200, sea-salt-200) that aren't surfaced in this extract.
• The hand-drawn doodle vocabulary (wavy lines, sparkles, the "Take a peek!" arrow) is rasterized inside SVG illustrations; it isn't a separately tokenizable asset.