Todoist Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

8type steps

2radius steps

4pxspacing base

Todoist, in one page

Todoist's iOS app is a quiet, productive workshop. Where most task apps reach for kanban boards, color-coded blobs, and gamified streak meters, Todoist reaches for the opposite — a near-blank canvas, a single column of checkable rows, and the visual restraint of a Moleskine notebook. The brand has been deliberate about this for over a decade: the app is a tool, not a destination. You open it, capture a thought, and close it. Every pixel exists to keep that loop fast.

The accent is Todoist Red (#DC4C3E) — the iconic carmine red of the logo, the floating "+" button, the P1 priority flag, and the rare emphatic moment like the karma flame. It is one of the most disciplined uses of a single brand color in productivity software: Red is reserved for verbs (add a task, mark as urgent, the brand mark itself), never used as ambient decoration. Around it sits a ladder of warm grays (#FAFAFA surface, #202020 ink, #808080 secondary) and four priority colors that punctuate the inbox rhythm: P1 Red #DC4C3E, P2 Orange #EB8909, P3 Blue #246FE0, P4 transparent.

Typography is the iOS system stack — SF Pro Display for nav titles and SF Pro Text for body and rows. Todoist deliberately uses the platform font rather than a custom face: the app is positioned as a respectful native citizen of iOS, and SF Pro's tight, neutral metrics let task content (which is mostly the user's own prose) carry the visual interest. The one exception is project icons — emoji and the Twemoji-style colored glyphs that users choose for "🍎 Groceries" or "📚 Reading List" — which become the most colorful objects on screen.

Key Characteristics:

White canvas (#FFFFFF) and warm gray surface (#FAFAFA); zero ambient color
Todoist Red (#DC4C3E) reserved for the brand mark, the FAB "+", and the P1 priority flag — verbs only
Four-tier priority flag system: P1 Red #DC4C3E, P2 Orange #EB8909, P3 Blue #246FE0, P4 outline gray
Single-column task list — checkbox left, content middle, priority/date/project metadata in a small row beneath
Round checkbox with priority-color border (empty) → filled with check (complete) → row strikethrough animation
Quick-add modal triggered by floating "+" — full natural language input ("buy milk tomorrow at 6pm p1 #groceries")
Today / Upcoming / Inbox / Projects / Filters & Labels — the canonical sidebar hierarchy
System font (SF Pro Display / Text) at standard iOS weights
Karma score and streak — small numbers in the profile, never the home screen
Subtle shadows (rgba(0,0,0,0.06)) — the app is whisper-quiet by design

Do's and don'ts

Do

Use Todoist Red #DC4C3E for the FAB, the brand mark, the P1 flag, and primary CTAs — verbs only
Give the FAB a tinted red shadow rgba(220,76,62,0.35) 0 6px 16px — not generic black
Use the four-tier priority system exactly as defined: P1 #DC4C3E, P2 #EB8909, P3 #246FE0, P4 gray outline
Use SF Pro Display for display sizes and SF Pro Text for body — no custom face
Keep the task list edge-to-edge with 0.5pt #EEEEEE dividers; the row is the layout
Use the colored-dot pattern for projects — 8pt dot from the project color + "# Name" in 13pt
Honor Markdown in task content — bold and _italic_ render inline
Use #202020 for primary text — slightly warm, never pure black
Use Surface Gray #FAFAFA for the sidebar and section header zones
Use the strikethrough + fade-to-#B0B0B0 pattern for completed tasks
Animate task completion with a 250ms collapse-upward — the next row slides up

Don't

Don't use pure black #000000 for body text — #202020 is the correct value
Don't use Todoist Red for ambient decoration — it's reserved for the brand mark, FAB, P1, and primary CTAs
Don't add color blocks behind task rows — task rows are always white, the color comes from the priority checkbox stroke and the project dot
Don't replace the FAB shadow with a generic black drop-shadow — the tinted red shadow is signature
Don't use a custom font — Todoist is intentionally a native iOS citizen with SF Pro
Don't introduce kanban boards on phones — Todoist is a vertical list on iPhone; Board view is reserved for iPad and premium
Don't gamify the home screen with karma — karma lives in the profile, never the task list
Don't widen the project-color palette — stick to the 20-swatch system palette so user projects are recognizable
Don't use heavy shadows — only the FAB gets meaningful elevation
Don't compress the row below 52pt — touchability is non-negotiable
Don't show priority flags larger than 14pt — they punctuate, they don't shout

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Todoist design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- The accent is Todoist Red: #dc4c3e
- Todoist Red: #dc4c3e
- Red Pressed: #b53c30
- Red Tint: #fbe5e2
- P1 Red: #dc4c3e
- P2 Orange: #eb8909
- P3 Blue: #246fe0
- Canvas White: #ffffff
- Surface Gray: #fafafa
- Surface Gray 2: #f0f0f0

Type:
- families: SF Pro Display, SF Pro Text, Inter, SF Mono
- scale: 10, 12, 13, 15, 16, 17, 28, 34
- weights: 400, 500, 600, 700

Shape:
- radius: 6, 8
- elevation: Pressed: background `#B53C30`, scale 0.94, shadow tightens to 4px

Spacing: 4, 12

Rules:
- Use Todoist Red `#DC4C3E` for the FAB, the brand mark, the P1 flag, and primary CTAs — verbs only
- Give the FAB a tinted red shadow `rgba(220,76,62,0.35) 0 6px 16px` — not generic black
- Use the four-tier priority system exactly as defined: P1 `#DC4C3E`, P2 `#EB8909`, P3 `#246FE0`, P4 gray outline
- Use SF Pro Display for display sizes and SF Pro Text for body — no custom face
- Keep the task list edge-to-edge with 0.5pt `#EEEEEE` dividers; the row is the layout
- Use the colored-dot pattern for projects — 8pt dot from the project color + "# Name" in 13pt

Avoid:
- Don't use pure black `#000000` for body text — `#202020` is the correct value
- Don't use Todoist Red for ambient decoration — it's reserved for the brand mark, FAB, P1, and primary CTAs
- Don't add color blocks behind task rows — task rows are always white, the color comes from the priority checkbox stroke and the project dot
- Don't replace the FAB shadow with a generic black drop-shadow — the tinted red shadow is signature
- Don't use a custom font — Todoist is intentionally a native iOS citizen with SF Pro
- Don't introduce kanban boards on phones — Todoist is a vertical list on iPhone; Board view is reserved for iPad and premium

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary

Todoist Red (#DC4C3E): The brand carmine — logomark, the floating "+" FAB, P1 priority flag, primary CTA, link color in marketing.
Red Pressed (#B53C30): Active state on the FAB and primary buttons.
Red Tint (#FBE5E2): Background tint for the P1 row highlight on overdue tasks, or the selected-state behind a flag.

Priority Colors

P1 Red (#DC4C3E): Highest priority — emergency, must-do-today.
P2 Orange (#EB8909): High priority.
P3 Blue (#246FE0): Medium priority.
P4 Gray (transparent flag with #808080 outline): No priority set — the default state.

Canvas, Surfaces & Dividers

Canvas White (#FFFFFF): Primary canvas for the task list and all detail views.
Surface Gray (#FAFAFA): Sidebar background, section header fill, project list zone.
Surface Gray 2 (#F0F0F0): Tap-state highlight on rows, completed-task background tint.
Divider (#EEEEEE): Hairline between task rows, between sections, between sidebar items.
Shadow Black (rgba(0,0,0,0.06)): Standard whisper shadow on the FAB and quick-add card.

Text

Ink (#202020): Primary text — task content, project names, nav titles.
Secondary (#808080): Date metadata, project tag, label text, comment counts.
Tertiary (#B0B0B0): Placeholder text, disabled labels, "no due date".
Completed Strike (#B0B0B0): The strikethrough color on a checked-off task.

Semantic

Success Green (#058527): Karma "Goal completed!" toast, sync-success indicators.
Warning Amber (#EB8909): Sync warnings, P2 flag — shares the priority color.
Error Red (#D1453B): Form validation, "Failed to sync" banners.
Info Blue (#246FE0): Hyperlinks inside task content, P3 flag.

Project Color Palette (User-Selectable)

Todoist gives users a fixed 12-swatch palette for projects and labels — these become the project-icon tints and the colored dots in the sidebar:

Berry Red #B8255F, Red #DB4035, Orange #FF9933, Yellow #FAD000
Olive Green #AFB83B, Lime Green #7ECC49, Green #299438, Mint Green #6ACCBC
Teal #158FAD, Sky Blue #14AAF5, Light Blue #96C3EB, Blue #4073FF
Grape #884DFF, Violet #AF38EB, Lavender #EB96EB, Magenta #E05194
Salmon #FF8581, Charcoal #808080, Grey #B8B8B8, Taupe #CCAC93

Dark Mode

Todoist's dark mode is a true near-black with warm gray text — engineered for late-night planning sessions.

Dark Canvas (#1F1F1F): Primary dark background.
Dark Surface 1 (#282828): Sidebar, sheets, quick-add card.
Dark Surface 2 (#363636): Pressed states, completed-task tint.
Dark Divider (#3D3D3D): Hairlines.
Dark Text Primary (#E8E8E8): Task content, nav titles.
Dark Text Secondary (#A0A0A0): Date metadata, project tags.
Todoist Red (dark) (#E44332): Slightly brighter for dark mode contrast.

Type scaleRead the full spec

Font Family

Primary: SF Pro Display for sizes ≥20pt; SF Pro Text for body, rows, metadata
Weights available: Regular (400), Medium (500), Semibold (600), Bold (700)
Fallback stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif
Web/marketing Google Fonts substitute: Inter — closest open-source equivalent in metrics and rhythm; falls back gracefully on the marketing site
Monospace (for the rare code/inline date display in quick-add hints): SF Mono

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Large Nav Title	SF Pro Display	34pt	700	1.15	-0.4pt	"Today", "Upcoming", "Inbox"
Inline Nav Title	SF Pro Display	17pt	600	1.2	-0.2pt	Collapsed title after scroll
Section Header	SF Pro Text	13pt	600	1.2	0.6pt UPPERCASE	"Overdue", "Today", date dividers
Task Content	SF Pro Text	16pt	400	1.35	-0.1pt	The main row text — the user's task
Task Content (Bold marked)	SF Pro Text	16pt	600	1.35	-0.1pt	When task text contains markdown bold
Sub-task	SF Pro Text	15pt	400	1.3	-0.1pt	Indented under a parent task
Date Metadata	SF Pro Text	13pt	400	1.2	0pt	"Tomorrow", "Mon 12 Jun", "Today 3:00 PM"
Date Overdue	SF Pro Text	13pt	500	1.2	0pt	Same size, weight bumps and color flips to Red
Project Tag	SF Pro Text	13pt	400	1.2	0pt	Inline "# Groceries" w/ colored dot
Comment Count	SF Pro Text	13pt	400	1.2	0pt	"💬 2" next to the task
Sidebar Item	SF Pro Text	15pt	500	1.25	0pt	"Today", "Upcoming", "Inbox" — left rail
Project Name (Sidebar)	SF Pro Text	15pt	400	1.25	0pt	User-named project rows
Quick-Add Input	SF Pro Display	17pt	400	1.3	0pt	The natural-language entry field
Button Label	SF Pro Text	16pt	600	1.0	0pt	"Add task", "Complete", "Schedule"
FAB Plus Glyph	SF Pro Display	28pt	400	1.0	0pt	The "+" inside the floating action button
Tab Label	SF Pro Text	10pt	500	1.0	0.1pt	Bottom tab bar (iPad/tablet only)
Caption	SF Pro Text	12pt	400	1.3	0pt	"No tasks today" empty-state copy
Karma Number	SF Pro Display	28pt	700	1.0	-0.2pt	Profile screen karma points

Principles

System font, no exceptions: Todoist intentionally uses SF Pro to feel native — no custom face, no exotic weights.
Weight stack 400 / 500 / 600 / 700: Regular for task content, Medium for sidebar, Semibold for nav, Bold for the largest title only.
Tight tracking at display sizes: -0.4pt at 34pt, -0.1pt on task content, 0 at body.
Date metadata is the second-loudest element after task content — it's color-coded (overdue red, today green, future gray) but weight stays at 400 unless overdue.
Section headers are always 13pt SEMIBOLD UPPERCASE with 0.6pt tracking — this is the section-divider rhythm used across Today / Upcoming / Projects.
Markdown in task content is honored: bold and _italic_ render inline at the same 16pt size with weight 600 / italic style.
Strikethrough on completion: text color shifts to #B0B0B0, weight stays the same, line-through stroke is 1pt at midline.
Dynamic Type respected on task content, sidebar, and large titles; fixed on section headers, date metadata, tab labels, and the FAB glyph.

Components and layoutRead the full spec

The Task Row (The Hero Component)

The single most important component in Todoist. Built for a list of 5, 50, or 500 tasks with consistent rhythm and zero visual noise.

Height: 52pt minimum; expands to fit wrapped content
Layout: 16pt leading padding → 22pt circular checkbox → 12pt gap → task content column → trailing chevron / count icons → 16pt trailing padding
Checkbox:
22pt circle, 1.5pt stroke
Empty + P4: #B0B0B0 stroke, transparent fill
Empty + P3: #246FE0 stroke (Blue), rgba(36,111,224,0.08) fill
Empty + P2: #EB8909 stroke (Orange), rgba(235,137,9,0.08) fill
Empty + P1: #DC4C3E stroke (Red), rgba(220,76,62,0.10) fill
Complete (any priority): filled with the priority color, white check glyph checkmark 12pt
Hit area: 44pt
Task content column:
Line 1: SF Pro Text 16pt Regular #202020 — task content
Line 2 (metadata row, only if any meta exists): horizontal row with — date pill (left), project tag with colored dot (right), comment icon + count, label chips
Date pill: text only — no background. Color: green #058527 for today, red #DC4C3E for overdue, gray #808080 for future
Project tag: small 8pt colored dot from the project's color + # Project Name in SF Pro Text 13pt
Trailing: a chevron.right 14pt #B0B0B0 if the task has subtasks/comments
Tap states: row background fades to #F0F0F0 for 80ms; on complete, the checkbox fills, then the entire row strikes through and animates out with a 250ms ease — the row collapses upward, the next row slides up
Long-press: drag-to-reorder with the row lifted at rgba(0,0,0,0.12) 0 4px 12px shadow
Swipe right: schedule date — reveals a green #058527 zone with a calendar icon; lift to confirm "Tomorrow"
Swipe left: reveals two zones — yellow #EB8909 (postpone) and gray (more)
Dividers: 0.5pt #EEEEEE between rows, full-width minus 64pt leading inset (aligned with task content, NOT the checkbox)

The Floating Add Button (FAB — The Icon)

Diameter: 56pt
Position: bottom-right, 24pt inset from right edge, 24pt above the tab bar (or 88pt above safe area on phones without a tab bar)
Background: #DC4C3E solid Todoist Red
Glyph: "+" SF Pro Display 28pt Regular, color #FFFFFF, dead-centered
Shadow: rgba(220,76,62,0.35) 0 6px 16px — the shadow is a tinted red, NOT generic black; this is a signature detail
Pressed: background #B53C30, scale 0.94, shadow tightens to 4px
Tap haptic: .impactOccurred(.medium) on tap; on quick-add commit .notificationOccurred(.success)

Quick-Add Card (The Natural-Language Input)

Trigger: tap on the FAB → modal sheet slides up from the bottom with spring damping
Container: white card, 16pt corner radius (top corners only on partial sheet), 16pt padding, full content width
Title row: "Add task" in SF Pro Display 17pt Semibold, project context in Secondary if applicable
Input: multi-line text field, SF Pro Display 17pt Regular #202020, placeholder "Take out the trash today p1 #home" in #B0B0B0
Smart parsing chips (appear inline as the user types matches): "tomorrow" → blue date chip; "p1" → red priority chip; "#groceries" → project chip with color dot
Bottom action bar (left-aligned, horizontal scroll): Date · Priority · Project · Labels · Reminders — each a 32pt-tall pill button with icon + label
Right side: "Add task" pill button — disabled #F0F0F0 #B0B0B0 text until input has content, enabled #DC4C3E #FFFFFF once it does
Cancel: drag-down or tap outside; haptic .selectionChanged() on each smart-parsed chip

Sidebar (iPad and "Menu" Drawer on iPhone)

Width: 280pt on iPad; full-screen drawer on iPhone
Background: Surface Gray #FAFAFA
Header row: 64pt — user avatar (40pt circle), name SF Pro Text 16pt Semibold, premium badge if applicable
System filters (always at top): Inbox, Today, Upcoming, Filters & Labels — each a 44pt row, 24pt SF Symbol icon in #202020, label 15pt Medium, count badge #808080 13pt right-aligned
Today count badge: when > 0 and includes overdue, badge is #DC4C3E background #FFFFFF text
Projects header: "My Projects" SF Pro Text 13pt Semibold UPPERCASE #808080 with 0.6pt tracking, "+" button to add project on right
Project row: 44pt, 12pt colored dot (project color) + project name 15pt Regular + count badge
Sub-projects: indented 16pt with a thin tree line connecting to parent
Selected state: row background rgba(220,76,62,0.08) (red 8% tint), 3pt leading red bar
Drag to reorder: 250ms scale-up on long-press

Empty States

Today (no tasks): cartoon illustration of a calm illustration (a person reading a book in a hammock), 200pt square, centered. Heading "Looks like the day is yours." SF Pro Display 22pt Semibold. Subhead "No tasks scheduled for today." SF Pro Text 15pt #808080. Below: a "Plan my day" link in #DC4C3E.
Inbox empty: smaller illustration, "Your Inbox is empty" — celebrating the zero-inbox moment.

Cards & Containers

Project Detail View

Top of screen: large project name title (34pt Bold), color dot inline
Below: section toggles (List / Board) — Board is reserved for premium
Sections within a project: collapsible — "Section name" 18pt Semibold #202020, chevron-down/up 14pt right, divider 0.5pt below

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Sidebar is a full-screen drawer triggered by hamburger; FAB pinned bottom-right
iPhone 13/14/15	390pt	Standard layout — single-column task list, FAB bottom-right
iPhone 15/16 Pro	393pt	Dynamic Island respected in nav bar
iPhone 15/16 Pro Max	430pt	Slightly wider task rows; same hierarchy
iPad Mini	744pt	Sidebar appears at 280pt, task list takes the remaining column
iPad Pro 11"	834pt	3-column layout: sidebar + task list + detail pane for selected task
iPad Pro 13"	1024pt	3-column persistent, detail pane shows full task notes/comments

Dynamic Type

Large nav titles, task content, sidebar items, subtask: full scale
Section headers, date metadata, project tags, tab labels, FAB glyph: fixed (layout-sensitive)
Quick-add input: scales but clamps at 22pt max

Orientation

iPhone: portrait-locked
iPad: rotates — sidebar persistent in landscape, collapses to overlay in portrait
Quick-add modal works in both orientations

Touch Targets

Task row: 52pt minimum height — the whole row is tappable, with the checkbox as a separate hit zone
Checkbox: 44pt hit area on a 22pt glyph
FAB: 56pt — full-button hit
Sidebar row: 44pt
Smart chip: 32pt height, 8pt internal padding, hit area expands to 44pt vertically

Safe Area Handling

Top: safe area honored — large nav title starts at safe-area top + 16pt
Bottom: FAB sits 24pt above tab bar or 88pt above home indicator if no tab bar
Sides: 0pt horizontal margin on rows; 16pt on nav and FAB inset

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-todoist {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #202020;
  --heading-color: #202020;
  --link-color: #ba5d00;
  --link-hover-color: #874300;
  --border-color: #d7d7d7;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(32,32,32,0.06);
  --card-hover-shadow: 0 6px 18px rgba(32,32,32,0.12);
  --header-bg: #202020;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6e6e6e;
  --button-bg: #ff9933;
  --button-text-color: #000000;
  --button-hover-bg: #ff8000;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f2f2f2;
  --button-secondary-text-color: #202020;
  --button-secondary-hover-bg: #e4e4e4;
  --button-secondary-border: 1px solid #d7d7d7;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #202020;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

gmail 81.3%
peacock 78.9%
google calendar 78.4%
strava 77.6%
wechat 76.5%

Where this came from

Source document: ios/design-md/productivity/todoist/DESIGN.md · 27.8 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.