---
title: "Todoist design system"
variant: extended
source: https://www.todoist.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/todoist-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Todoist · Design System

> Warm clarity for getting things done

**Theme:** light · **Industry:** productivity · **Source:** https://www.todoist.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Todoist’s homepage pairs a calm, warm-white canvas with bold, direct headlines and vivid product imagery. A restrained red CTA anchors the page, while spacious feature storytelling leads into templates, proof points, and a warm-toned footer.

## North star

Keep the page calm and spacious, using precise dark type and selective Todoist red to make product actions unmistakable.

## Overview

The page uses Gallery White (#fefdfc) as its dominant canvas, keeping the interface calm while warm cream sections and image backdrops add gentle variation. Ink (#25221e) gives headlines and navigation strong contrast; muted gray handles supporting copy. Signal Red (#e34432) is reserved for the logo, links, and primary “Start for free” actions, so it remains a clear focal point. Graphik headlines are bold and tightly tracked, balanced by Inter’s practical, readable interface text. The layout alternates a broad hero, press quotes, and spacious feature storytelling, with product screenshots and illustrations supplying color and detail. Cards and template examples use light borders and restrained shadows rather than heavy panels. Generous open space keeps long-page sections distinct, and the final pale footer band gathers dense navigation into a more compact, orderly grid.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fefdfc` | `--color-gallery-white` | surface | Dominant page canvas behind the navigation, hero, feature sections, and most content. |
| Quiet Gray | `#6e6c6a` | `--color-quiet-gray` | neutral | Muted supporting copy, secondary links, and footer text. |
| Warm Cream | `#fff6f0` | `--color-warm-cream` | surface | Warm section and footer surface, including the soft announcement treatment. |
| Soft Ink | `#25221e` | `--color-soft-ink` | neutral | Primary headlines, navigation, body emphasis, and dark card text. |
| Todoist Red | `#e34432` | `--color-todoist-red` | brand | Primary CTA fill, logo accent, and selected links or highlighted interface details. |
| Pale Graphite | `#d7d5d4` | `--color-pale-graphite` | semantic | Fine card outlines and understated component boundaries. |
| Cloud Line | `#e3e2e1` | `--color-cloud-line` | neutral | Secondary hairlines and faint card or decorative boundaries. |
| Footer Taupe | `#d8d0ca` | `--color-footer-taupe` | neutral | Subtle footer separators and low-contrast boundary details. |
| Task Blue | `#297abc` | `--color-task-blue` | accent | Occasional blue interface or linked-text accents, not a dominant page color. |
| Mint Haze | `#f4fbf7` | `--color-mint-haze` | surface | Small pale card surface and a light tint visible in supporting interface details. |
| Link Blue | `#0f66ae` | `--color-link-blue` | accent | Limited blue text links, including secondary or consent-interface link styling. |

### Semantic aliases

`--color-canvas` → `#fefdfc` (Gallery White) · `--color-surface` → `#fff6f0` (Warm Cream) · `--color-text` → `#25221e` (Soft Ink) · `--color-text-muted` → `#6e6c6a` (Quiet Gray) · `--color-border` → `#d7d5d4` (Pale Graphite) · `--color-accent` → `#e34432` (Todoist Red) · `--color-accent-2` → `#297abc` (Task Blue) · `--color-accent-3` → `#0f66ae` (Link Blue) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#25221e` | `#fefdfc` | 15.59:1 | AAA |
| `#25221e` | `#fff6f0` | 14.85:1 | AAA |
| `#6e6c6a` | `#fefdfc` | 5.15:1 | AA |
| `#6e6c6a` | `#fff6f0` | 4.9:1 | AA |
| `#e34432` | `#fefdfc` | 4.02:1 | AA-large |
| `#e34432` | `#fff6f0` | 3.83:1 | AA-large |

### Gradients

- `linear-gradient(0deg, oklch(0.978484 0.012562 56.2563) 58%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter-5486e50ce5a4efdf | `--font-body` | webfont | 500, 600, 475, 400, 700, 625 | Body copy, navigation, buttons, captions, and links. | Inter |
| Graphik-1bbd4a4c7a2fb472 | `--font-display` | webfont | 600, 700 | Headlines and prominent card or navigation text. | DM Sans |
| Caecilia-8d8a7c9be503e3f3 | `--font-caecilia-8d8a7c9be503e3f3` | webfont | 400 | Editorial serif accents, including press quotes. | Roboto Slab |
| Shantell Sans-5a9740f6b2ed8488 | `--font-shantell-sans-5a9740f6b2ed8488` | webfont | 400 | Occasional handwritten annotations in product storytelling imagery. | Comic Neue |

- **Inter-5486e50ce5a4efdf:** Practical sans-serif with medium-to-semibold weights; slightly open tracking, sentence case, and clear interface hierarchy.
- **Graphik-1bbd4a4c7a2fb472:** Bold, compact headline forms with subtly negative tracking; use sentence case and avoid decorative treatments.
- **Caecilia-8d8a7c9be503e3f3:** Use sparingly for quotation-style editorial contrast; regular weight and natural sentence case.
- **Shantell Sans-5a9740f6b2ed8488:** Restrict to small playful annotations; it is a minor accent rather than a general UI font.

### Type scale — Perfect Fourth (ratio ≈ 1.372, base 15.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 600 | 1.15 | -0.01em | — | Graphik-1bbd4a4c7a2fb472 | Hero headline and major page-opening statement. |
| h2 | 44px | 600 | 1.15 | -0.01em | — | Graphik-1bbd4a4c7a2fb472 | Large feature-section and conversion headlines. |
| h3 | 38px | 700 | 1.28 | -0.005em | — | Graphik-1bbd4a4c7a2fb472 | Feature and content-block headings. |
| h4 | 22px | 600 | 1.28 | 0 | — | Graphik-1bbd4a4c7a2fb472 | Smaller card and subsection headings. |
| body | 15.5px | 500 | 1.35 | 0.01em | — | Inter-5486e50ce5a4efdf | Main explanatory copy and standard content. |
| caption | 14.5px | 500 | 1.5 | 0.013em | — | Inter-5486e50ce5a4efdf | Reviews, labels, image notes, and compact supporting details. |
| button | 15.5px | 600 | 1.35 | 0.01em | — | Inter-5486e50ce5a4efdf | Primary CTA and other action labels. |
| nav | 15.5px | 500 | 1.35 | 0.01em | — | Inter-5486e50ce5a4efdf | Header navigation and major site links. |
| link | 15.5px | 600 | 1.35 | 0.01em | — | Inter-5486e50ce5a4efdf | Inline calls to action and text links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 9, 10, 12, 14, 16, 20, 24, 32, 48 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width —.

The desktop page uses a broad centered content area, with the hero arranged as a left text column and a right product visual. Below, it alternates spacious split-feature blocks, wide media, template cards, proof points, and a closing CTA. Align text and media cleanly rather than enclosing every section in a box. Large vertical pauses separate major stories; dense template and footer navigation areas are deliberate exceptions. Keep the overall density comfortable and the visual rhythm open.

## Shape & elevation

- Radius: button `15px` · input `8px` · card `10px` · media `15px` · nav `8px` · link `8px` · xs `8px` · sm `10px` · md `13px` · lg `15px`
- Shadow `hairline` (card): `rgba(37, 34, 30, 0.04) 0px 1px 0px 0px`
- Shadow `xl` (button): `rgba(37, 34, 30, 0.07) 0px 14px 19px -9px, rgba(37, 34, 30, 0.18) 0px 10px 48px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.2, 0.8, 0.2, 1)` on interactive elements.

The interface is mostly flat, using faint gray borders to define template cards and product examples. A very subtle hairline shadow can lift cards from the canvas, while stronger depth is reserved for prominent CTA treatment or layered product mockups. Avoid adding heavy shadows to ordinary content.

## Imagery

Product screenshots and device mockups are the main visual evidence, often framed against soft cream or blush backdrops. Supporting artwork includes playful task-related illustrations, small editorial flourishes, and occasional people imagery. Keep product UI legible and framed as an object within generous whitespace; imagery may carry extra colors that should not be promoted into the core site palette. Video is presented as a product-storytelling asset with a simple play affordance.

## Components

### Primary CTA

Signal Red (#e34432) fill with white label, rounded corners, and a bold Inter treatment; used prominently in the hero and closing conversion area.

### Header navigation

Compact horizontal navigation in Soft Ink (#25221e), with the Todoist mark at left and a red free-start action at right.

### Announcement banner

A slim warm-tinted message strip above the hero, using muted red text, an inline link, and a discreet close control.

### Feature split

Alternating text and product imagery with a small colored eyebrow, bold heading, concise supporting copy, and generous surrounding space.

### Template cards

A horizontal set of light cards with fine gray borders, small illustrative thumbnails, dark titles, and compact descriptive text.

### Press quote row

Three editorial testimonials arranged side by side, using restrained serif quote text, subtle separators, and publication marks.

### Footer navigation

A warm cream footer with grouped link columns, a fine horizontal divider, brand note, social icons, and utility links.

### Measured component styles

- **Primary button** (“Start for free”): background #e34432 · text #ffffff · radius 15px · padding 12px 16px · 600 18.5px Inter-5486e50ce5a4efdf
- **Secondary button** (“Personal”): background #f9f7f6 · text #25221e · radius 15px · padding 20px 24px · 600 15.5008px Inter-5486e50ce5a4efdf
- **Link** (“Accounting Tasks”): transparent background · text #25221e · radius 0px · padding 0px · 600 15.5008px Inter-5486e50ce5a4efdf
- **Input** (“Čeština Dansk Deutsch English Español Su”): transparent background · text #25221e · radius 8px · padding 7px 32px 7px 35px · 500 14.5px Inter-5486e50ce5a4efdf
- **Card** (“Accounting Tasks Create a system to keep”): background #ffffff · text #25221e · border 1px solid #d7d5d4 · radius 10px · padding 0px · 400 16px Graphik-1bbd4a4c7a2fb472 · shadow rgba(37, 34, 30, 0.04) 0px 1px 0px 0px
- **Navigation item** (“Made For Resources Pricing Log in Start ”): transparent background · text #25221e · radius 0px · padding 0px · 400 16px Graphik-1bbd4a4c7a2fb472

## Do

- Use Gallery White (#fefdfc) as the primary canvas.
- Reserve Todoist Red (#e34432) for clear actions and selective emphasis.
- Set prominent headlines in Graphik-style bold sans-serif.
- Use muted gray for secondary copy instead of competing dark tones.
- Separate stories with generous whitespace and clear alignment.
- Let product imagery provide detail without turning the page into a collage.

## Don't

- Do not fill every section with a colored panel.
- Do not use red as a large continuous background.
- Do not add heavy shadows to ordinary cards.
- Do not crowd the hero with excessive copy or controls.
- Do not treat illustration-only colors as core brand colors.
- Do not use handwritten type for standard interface text.

## Agent prompt

Build a new page in Todoist’s calm, product-led visual style. Use Gallery White (#fefdfc) for the main canvas, Soft Ink (#25221e) for headlines and navigation, and Quiet Gray (#6e6c6a) for supporting copy. Apply Todoist Red (#e34432) selectively to the primary CTA and important links; use Warm Cream (#fff6f0) for a soft section or footer band. Pair bold Graphik-like headings with readable Inter-style body and interface text. Keep the layout broad, aligned, and spacious, with clear feature storytelling and framed product screenshots or restrained illustrations. Use thin Pale Graphite (#d7d5d4) borders and minimal elevation. Prioritize legibility and one unmistakable action per major section; avoid visual clutter, excessive color, and heavy card treatments.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Five link columns on a warm band, followed by a divider and a compact brand and utility row. | Grouped navigation, Language selector, Legal links | Warm cream background, Fine horizontal divider, Multi-column link grid |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #e44232;
--osano-button-background-color: #e44232;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #6f6d6b;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #0f66ae;
--osano-toggle-off-track-color: #a0a0a0;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #e44232;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #6f6d6b;
--osano-button-accept-background-color: #e44232;
--osano-button-accept-border-color: #e44232;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #949391;
--osano-button-deny-border-color: #949391;
--osano-button-deny-foreground-color: #ffffff;
--osano-button-reject-all-background-color: #949391;
--osano-button-reject-all-background-color-hover: #a8a6a2;
--osano-button-reject-all-border-color: #949391;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #e44232;
--osano-button-manage-border-color: #e44232;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #0f66ae;
--osano-info-dialog-button-close-color: #25221e;
--osano-info-dialog-toggle-off-track-color: #a0a0a0;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #e44232;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #e44232;
--osano-info-dialog-button-border-color: #ffffff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/todoist-com