A clean, well-organized digital notebook for your life
02
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
03
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
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Consistent 4px base grid with generous whitespace between sections
Captured from the live site · real computed styles
11
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.