CURATED · OPEN · FREE

Todoist

The world's leading to-do list app designed for clarity and simplicity.

productivitysaas

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://todoist.com

📦 Browse pack contents →

Identity DNA

Task managementOrganizationSimplicityProductivityProfessional

A clean, well-organized digital notebook for your life

Color

#E44232Accent

#25221EInk

rgba(37,34,30,0.66)Ink soft

#FFFFFFBG

#F9F7F6BG soft

#FEFDFCBG quiet

rgba(37,34,30,0.49)Muted

rgba(37,34,30,0.18)Line

Warm neutrals with a single high-chroma red accent

Typography

humanist-sans · geometric-sans

display56px · 500
h236px · 500
body18px · 400
small15px · 400

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base grid with generous whitespace between sections

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(37,34,30,0.18)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

12-column grid with generous margins and centered content blocks

Motion & Interaction

150msmicro

350mssmall

500msmedium

cubic-bezier(0.2, 0.8, 0.2, 1)easing

Transform-based hover effects · Smooth background color transitions · Subtle scale animations on interactive elements

Subtle transform scale and color brightness increase · Scale down with spring easing

Components

button Rounded rectangles with gradient backgrounds and subtle shadows for primary actions
card Clean white containers with subtle borders and rounded corners
chip Pill-shaped category selectors with subtle backgrounds
input Clean fields with subtle borders and rounded corners
hero Two-column layout with bold headline and product mockup

Voice & Don'ts

Tone Friendly, approachable, and confident
Headlines Short, punchy statements that emphasize clarity and simplicity
CTAs Direct action-oriented phrases like 'Start for free'

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
Avoid: Technical jargon or complex terminology
Avoid: Aggressive or high-pressure language
Avoid: Overly corporate or formal tone
Avoid: Dense paragraphs in hero sections

Inside the pack — real screenshots

Todoist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko