# Todoist · Design system migration spec

> Source: https://todoist.com  ·  Curated by OpenDesign  ·  en

> Excellent example of premium SaaS design that balances professionalism with approachability through warm colors and generous whitespace.

## 1. Identity DNA

The Todoist design system is built as a clean, well-organized digital notebook for your life. Its identity is rooted in task management, organization, and a professional simplicity that supports clarity above all else.

**One-liner:** The world's leading to-do list app designed for clarity and simplicity.
**Keywords:** Task management · Organization · Simplicity · Productivity · Professional
**Analogy:** A clean, well-organized digital notebook for your life

## 2. Color

The color system is defined by warm neutrals with a single high-chroma red accent. This creates a clean, approachable feel where the accent serves as a clear signal for primary actions without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9F7F6` | card background |
| `--bg-quiet` | `#FEFDFC` | quiet area |
| `--ink` | `#25221E` | body text |
| `--ink-soft` | `rgba(37,34,30,0.66)` | secondary text |
| `--muted` | `rgba(37,34,30,0.49)` | placeholder |
| `--accent` | `#E44232` | single accent |
| `--line` | `rgba(37,34,30,0.18)` | divider |

**Color principle:** Warm neutrals with a single high-chroma red accent

The guiding principle is restraint; a single accent color carries all interactive emphasis against a calm, neutral field.

## 3. Typography

Typographic hierarchy uses Inter for primary display and UI text, Graphik for secondary body copy, and Caecilia for decorative elements. Headlines are bold with tight tracking for presence, while body text uses regular weight with relaxed line height for comfortable reading.

- **Display:** humanist-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Primary hero headline |
| h2 | 36px | 1.2 | 500 | -0.5px | Section headings |
| body | 18px | 1.6 | 400 | 0px | Paragraph text |
| small | 15px | 1.4 | 400 | 0px | Secondary text and captions |

**Type rules:**
- Use Inter for primary display and UI text
- Use Graphik for secondary body text
- Use Caecilia for decorative or quote elements
- Headlines are bold with tight tracking
- Body text uses regular weight with relaxed line height

## 4. Spacing

The layout rhythm is established on a consistent 4px base grid, with generous whitespace between sections to create clear visual separation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous whitespace between sections

## 5. Surfaces

Surfaces are defined by depth through layered shadows and subtle 1px borders. Cards and containers use clean white backgrounds with rounded corners, creating a soft, contained feel.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(37,34,30,0.18)

## 6. Layout

The skeleton is a 12-column grid with generous margins and centered content blocks. This structure emphasizes clarity and readability by containing content within a controlled, balanced frame.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** 12-column grid with generous margins and centered content blocks

## 7. Motion & Interaction

Motion philosophy favors smooth, natural feel over flashy effects. All transitions use a specific cubic-bezier curve, with interactions based on subtle transforms and spring-based easing for a polished responsiveness.

- **Durations:** micro 150ms · small 350ms · medium 500ms
- **Easing:** `cubic-bezier(0.2, 0.8, 0.2, 1)`
- **Patterns:**
  - Transform-based hover effects
  - Smooth background color transitions
  - Subtle scale animations on interactive elements

- **Hover:** Subtle transform scale and color brightness increase
- **Click:** Scale down with spring easing
- **Transition:** All transitions use cubic-bezier(0.2, 0.8, 0.2, 1) for smooth, natural feel
- **Keyboard:** Standard tab navigation with focus states

## 8. Voice & Don'ts

The editorial voice is friendly, approachable, and confident. It uses short, punchy headlines and direct action-oriented calls to action, avoiding technical jargon or dense paragraphs.

- **Tone:** Friendly, approachable, and confident
- **Headline style:** Short, punchy statements that emphasize clarity and simplicity
- **CTA style:** Direct action-oriented phrases like 'Start for free'
- **Avoid:** Technical jargon or complex terminology / Aggressive or high-pressure language / Overly corporate or formal tone / Dense paragraphs in hero sections

### Don'ts
- ❌ Don't use cold blue accents — screenshot shows warm red accent
- ❌ Don't use dark backgrounds — screenshot shows predominantly white/light backgrounds
- ❌ Don't use heavy borders — screenshot shows subtle 1px borders
- ❌ Don't use sharp corners — screenshot shows rounded corners (8-15px radius)
- ❌ Don't use serif typography for body text — screenshot shows sans-serif fonts
- ❌ Don't use dense text blocks — screenshot shows generous whitespace and short paragraphs
- ❌ Don't use multiple competing accent colors — screenshot shows single red accent

The system deliberately forgoes cold accents, dark backgrounds, sharp corners, and multiple competing colors to maintain its core principles of clarity and warmth.

## System Prompt (paste into AI tool)

```
Todoist is a premium SaaS productivity tool positioned as the world's leading to-do list app. The design emphasizes clarity through a warm, clean aesthetic with generous whitespace. Key colors include white (#FFFFFF) and warm off-white (#F9F7F6) backgrounds, dark ink (#25221E) text, and a distinctive red accent (#E44232). Typography uses humanist-sans (Inter) for display and geometric-sans (Graphik) for body text. The interface features rounded corners (8-12px), subtle shadows, and a 12-column grid layout. Critical don'ts: Never use cold blues, dark backgrounds, sharp corners, dense text blocks, or multiple accent colors. The system maintains a friendly, approachable tone with short headlines emphasizing simplicity and clarity.
```
