The visual approach
Todoist's design system runs on discipline. The palette gives you one accent—--primary: #E44332, a warm red—and stops. Text lives in two shades of gray (#202020 for primary, #666666 for secondary), backgrounds alternate between pure white (#FFFFFF) and an off-white (#FAFAFA) that barely registers, and borders hold to a single neutral (#E8E8E8). No gradients, no secondary accent, no purple for pro features or green for success states. The red does all the lifting.
Typography follows the same logic. The entire type system uses the system UI stack—no web fonts, no brand quirks—and a straight scale from 72px display weight down to 14px small body, all keyed to two weights (700 for headlines, 400 or 600 for everything else). A task manager lives inside daily habits, and Todoist's choice to use the typeface already installed on your device makes the app feel like part of the OS rather than a third-party layer.
The technical foundation—React with Next.js, TypeScript, likely Tailwind or CSS Modules for styling—supports a component architecture that can enforce this restraint at scale. When your design system has six colors and two font weights, every new feature starts constrained.
What works
The single-accent strategy turns the red into a functional signal, not decoration. Because nothing else competes for attention, #E44332 can mark due dates, highlight priorities, and anchor CTAs without becoming noise. In a dense interface—task lists stack dozens of items per view—restraint prevents visual fatigue. You see the task content, not the chrome.
System fonts pay a hidden dividend: they load instantly and feel native. A task manager you open ten times a day benefits more from zero perceived latency than from typographic personality. The system stack also respects platform conventions—San Francisco on macOS and iOS, Segoe on Windows, Roboto on Android—so the text rendering feels correct everywhere without per-platform tuning.
The neutral background pair (#FFFFFF and #FAFAFA) creates hierarchy without contrast penalties. Alternating white and off-white between sections or cards gives structure while keeping the overall page light enough that dark text stays readable after an hour of use. The border token (#E8E8E8) is light enough to organize space without cutting the page into hard boxes.
Todoist's type scale builds in responsive logic by default: 72px display works for hero headlines, 48px H1 for section titles, 36px and 24px for mid-level hierarchy, then the 18px / 16px / 14px body range that handles task text, metadata, and UI labels. The scale is wide enough to establish structure but compressed enough that you rarely need more than three sizes on a given screen.
What a builder can borrow
Start with a single accent and see how far it takes you. Todoist proves that a productivity tool—arguably the category most tempted by color-coded organization—can ship with one primary and a handful of grays. If you do add a second accent later, you will add it intentionally rather than as a default.
Use system fonts when speed and platform feel matter more than brand. A system stack costs zero network time, zero render jank, and zero cross-platform debugging. If your app lives in a daily workflow, native type rendering can feel faster and more correct than a custom font at any weight.
Design your color tokens as pairs: --text-primary and --text-secondary, --background and --background-alt, not as a rainbow. Pairs force hierarchy decisions at the token level, and tokens with "primary" and "secondary" in the name tell a maintainer what each is for. Todoist's six-color palette documents itself.
Build your type scale with a clear ratio and stop at seven sizes. Todoist runs 72 / 48 / 36 / 24 / 18 / 16 / 14—roughly a 1.3–1.5 multiplier—and assigns semantic names (Display, H1, H2, Body Large, Body, Body Small). A fixed scale prevents the gradual drift where every new feature invents a 19px edge case.
Restraint is not minimalism for aesthetics. It is a build strategy. Fewer tokens mean faster decisions, smaller bundle size, and less drift over time.