--- version: alpha name: Todoist website: "https://todoist.com" description: >- Todoist's marketing chrome is a warm, illustration-led to-do system anchored on a single warm-black ink ("#25221e") that does double duty as text and as every 1px hairline, with the Todoist Red ("#e34432") reserved for one CTA per fold and a hand-drawn doodle vocabulary scribbled in the margins. Display runs Graphik 600 at 55px with -0.55px tracking on the hero ("Clarity, finally."), body text runs Inter at weight 475 — heavier than the 400 most SaaS sites default to — and a Caecilia serif is dropped in for pull-quote testimonials. Pastel tile chrome (peach "#ffb399", mint "#ebf5f0", butter "#fff5db") tints the product mockups below the fold. seo: title: "Todoist Design System for React — Red #e34432, Graphik + Inter, 18 components" metaDescription: "Todoist's design system as a DESIGN.md file. Red #e34432 CTA, warm-black #25221e ink, Graphik + Inter, 18 components — for React, Next.js, and AI tools." highlights: - "Warm-black ink ("#25221e") carries text AND every hairline — 421 text uses, 417 border uses, no separate gray scale" - "Single-CTA discipline — Todoist Red ("#e34432") is the only brand voltage, paired with a darker red ("#cf3520") for hover and press" - "Two-typeface 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) — buttons, pills, and tiles all share the same corner; pills are reserved for chips and the FAB" - "Hand-drawn Shantell Sans script in the margins — Todoist signs its illustrations like a notebook, not a marketing site" tags: - "Productivity & SaaS" - "Project Management" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Todoist's marketing system reads like a warm paper notebook, not a SaaS landing page. The hero opens with "Clarity, finally." set in Graphik 600 at 55px with -0.55px tracking, sitting on an off-white canvas decorated with a wavy line doodle and pastel sparkles. The only chromatic voltage on the page is the Todoist Red ("#e34432") burning inside one pill button — "Start for free" — and a thin progress dot on the announcement bar above. Everything else (every headline, every body sentence, every 1px hairline, every checkbox outline) is rendered in the same warm-black ink "#25221e", a near-black that leans olive-brown rather than blue-gray. This DESIGN.md packages the whole spec into one machine-readable file. Inside: 20 color tokens covering the warm-black ink scale, the Todoist Red press states, the four pastel tile tints (peach, mint, butter, sky), and the supporting semantic colors for the in-product priority dots; 9 typography tokens split across Graphik (display 38–55px) and Inter (body 12–18px at the unusual weight 475), with a Caecilia serif for testimonial quotes and a hand-drawn Shantell Sans for margin doodles; 5 corner radii anchored on the dominant 8px; 9 spacing steps from 4px to 64px; and 18 components covering the red primary CTA, the secondary outline button, the announcement bar, the testimonial slab, the pastel feature tile grid, the FAB, and the task-row checkbox. Format follows the Google Labs DESIGN.md spec. A working React developer feeds this file to Claude, Cursor, or Copilot and gets components that match Todoist's discipline — warm-black hairlines instead of a Tailwind gray scale, one red CTA per fold, body text at weight 475 rather than 400, illustration-led pastel tiles instead of gradient cards — instead of a generic shadcn theme. Reference the tokens directly inside Tailwind config, CSS variables, or your own component library. The system is worth studying for one reason: it proves that a productivity brand can hold restraint and warmth at the same time — Linear holds restraint on a black canvas, Notion holds warmth with purple pills; Todoist holds both at once with a notebook-paper canvas and a single red button. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://todoist.com" title: "Todoist — official site" description: "The task manager and to-do list app this DESIGN.md was extracted from." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files." questions: - id: "primary-color" title: "What is Todoist's primary brand color?" answer: "Todoist Red sits at #e34432, declared under the `--color-td-primary` CSS variable and reserved exclusively for the primary CTA pill. Hover transitions to #ee5244 and pressed state lands on #cf3520 (also doing duty as the in-product red-600 priority dot). The red is held back from body text, hairlines, and large background surfaces — the rest of the page runs on a single warm-black ink (#25221e) that does double duty as text and as every 1px border. That restraint is what makes the red register as an action signal rather than decoration." - id: "typography" title: "What fonts does Todoist use, and what should I substitute?" answer: "Todoist runs a two-family split. Graphik (carrying a hashed font name `Graphik-1bbd4a4c` in the bundled CSS) handles display at weight 600 — 55px / -0.55px tracking on the hero h1, 38–44px on section headings. Inter (also fingerprinted, `Inter-5486e50c`) handles body and UI at an unusual weight 475, sitting between regular and medium for a heavier reading texture than the 400 most SaaS sites default to. A Caecilia serif is reserved for blockquote testimonials at 20px regular, and a Shantell Sans script is used for hand-drawn margin doodles. Open-source substitutes: Inter for both Graphik and Inter (the proportions match closely), Tinos or Libre Caslon for Caecilia, and Caveat or Shantell Sans itself (Google Fonts) for the doodle text." - id: "shape-language" title: "Why does Todoist use 8px-rounded pills instead of full pill buttons?" answer: "Todoist's primary CTA is shaped at 8px radius (`{rounded.md}`), not 9999px. The 8px radius appears 33 times across the page — buttons, tiles, the announcement bar, the testimonial slab — making it the dominant geometry. Full-pill 9999px is reserved for the in-product circular checkbox, the floating action button at the bottom-right of the workspace mockup, and small priority chips. The discipline keeps Todoist visually distinct from Linear (12px-rounded cards, never pills) and Notion (8px rectangles, never pills) — Todoist sits between them, sharing Notion's rectangle-leaning button geometry while reserving true pills for in-product affordances." - id: "warm-black-ink" title: "Why doesn't Todoist have a gray scale?" answer: "Because the same warm-black ink (#25221e) carries both text and borders. The extracted CSS variable list maps this single hex to 38 distinct names — `--display-onlight-primary`, `--ui-border`, `--field-outline-border-idle`, `--card-border-onhover`, and so on — and it appears 853 times across the page (421 as text, 417 as border, 6 as background, 9 as shadow). A traditional gray scale (#f5f5f5 → #e0e0e0 → #999 → #333) is replaced by transparency layers on top of this one ink, declared as `--greytransparent-50` through `--greytransparent-900`. The result is that hairlines, captions, and headings all read on the same color note — like ink fading on paper rather than gray on white." - id: "use-in-project" title: "Can I use this DESIGN.md to build a React productivity app?" answer: "Yes. The file is structured for AI consumption — drop it into Claude, Cursor, or Copilot and the agent will reproduce Todoist's one-red-CTA discipline, warm-black hairline ink, weight-475 body text, 8px-radius geometry, and pastel-tile feature grid instead of a generic shadcn theme. You can also pull tokens directly: every hex (#e34432, #25221e, the pastel tints), every radius, every spacing step, and every Inter / Graphik weight is a quoted token you can paste into Tailwind config, CSS variables, or your own component library." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A short list, documented in the Known Gaps section. The in-product dark theme isn't captured here — only the marketing surface, which is light-only. Animation and transition timings weren't extracted; 150–200ms ease is a safe default. Form-field error and validation states aren't fully surfaced beyond the focused-input border. The Graphik and Inter fonts are commercial — open-source substitutes (Inter alone, or DM Sans + Inter) are acceptable. The four pastel tile tints (peach, mint, butter, sky) are observed from the captured feature row; Todoist's full illustration palette may carry additional tints." colors: primary: "#e34432" primary-hover: "#ee5244" primary-pressed: "#cf3520" on-primary: "#ffffff" ink: "#25221e" ink-deep: "#000000" canvas: "#ffffff" surface-peach: "#ffb399" surface-mint: "#ebf5f0" surface-butter: "#fff5db" surface-sky: "#dceaff" surface-rose: "#fbe7ce" hairline: "#dedede" hairline-soft: "#d0cec8" muted: "#97938c" link-blue: "#0f66ae" link-blue-pressed: "#1f60c2" semantic-success: "#4c7a45" semantic-success-deep: "#446c3d" semantic-warning: "#eb8909" semantic-info: "#2a67e2" semantic-error: "#cf3520" typography: display-hero: fontFamily: "Graphik, Inter, system-ui, sans-serif" fontSize: 55px fontWeight: 600 lineHeight: 1.15 letterSpacing: "-0.55px" display-lg: fontFamily: "Graphik, Inter, system-ui, sans-serif" fontSize: 44px fontWeight: 600 lineHeight: 1.15 letterSpacing: "-0.44px" display-md: fontFamily: "Graphik, Inter, system-ui, sans-serif" fontSize: 38px fontWeight: 600 lineHeight: 1.28 letterSpacing: "-0.19px" heading-md: fontFamily: "Graphik, Inter, system-ui, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.28 body-lg: fontFamily: "Inter, system-ui, sans-serif" fontSize: 18px fontWeight: 475 lineHeight: 1.75 letterSpacing: "0.09px" body-md: fontFamily: "Inter, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.60 letterSpacing: "0.16px" body-sm: fontFamily: "Inter, system-ui, sans-serif" fontSize: 14.5px fontWeight: 475 lineHeight: 1.50 letterSpacing: "0.18px" button-md: fontFamily: "Inter, system-ui, sans-serif" fontSize: 15.5px fontWeight: 600 lineHeight: 1.35 letterSpacing: "0.155px" caption: fontFamily: "Inter, system-ui, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.50 letterSpacing: "0.3px" testimonial-serif: fontFamily: "Caecilia, Tinos, Georgia, serif" fontSize: 20px fontWeight: 400 lineHeight: 1.80 doodle-script: fontFamily: "Shantell Sans, Caveat, cursive" fontSize: 19px fontWeight: 400 lineHeight: 1.60 letterSpacing: "0.19px" rounded: none: "0px" sm: "4px" md: "8px" lg: "10px" xl: "15px" full: "9999px" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "20px" xl: "24px" xxl: "32px" section-sm: "48px" section: "64px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "9px 14px" height: "39px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "9px 14px" border: "1px solid {colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "9px 14px" border: "0" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "16px 24px" border: "0" announcement-bar: backgroundColor: "{colors.surface-rose}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "12px 16px" card-feature-peach: backgroundColor: "{colors.surface-peach}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: "32px" card-feature-mint: backgroundColor: "{colors.surface-mint}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: "32px" card-feature-butter: backgroundColor: "{colors.surface-butter}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: "32px" card-feature-sky: backgroundColor: "{colors.surface-sky}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: "32px" card-base: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "24px" border: "1px solid {colors.hairline}" testimonial-quote: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.testimonial-serif}" padding: "20px 24px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 16px" border: "1px solid {colors.ink}" height: "44px" text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "2px solid {colors.primary}" checkbox-circle: backgroundColor: "transparent" textColor: "{colors.primary}" rounded: "{rounded.full}" padding: "0" border: "1.5px solid {colors.ink}" height: "20px" fab-add-task: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" padding: "0" height: "56px" border: "0" priority-dot-red: backgroundColor: "{colors.primary-pressed}" rounded: "{rounded.full}" padding: "0" height: "12px" border: "0" badge-meta: backgroundColor: "{colors.surface-mint}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: "4px 8px" --- ## 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.