Todoist
A warm, calm productivity-app marketing surface built on a barely-off-white canvas (#fefdfc) with a single confident red CTA, Graphik display headlines, and Inter UI text. The system reads as friendly and uncluttered — soft peach hero washes, white product-screenshot cards with whisper-soft shadows, generous whitespace, and a restrained accent palette where one warm red carries every primary action. Brand voltage comes from the red "Start for free" button and from real Todoist app chrome shown inside hero cards rather than from heavy color or ornament.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
55px · 600 · 1.15
The quick brown fox jumps
h2
38px · 600 · 1.28
The quick brown fox jumps
body
15.5px · 500 · 1.35
The quick brown fox jumps
button
15.5px · 500 · 1.35
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| sm | 8px | |
| md | 10px | |
| lg | 13px | |
| xl | 15px |
FAQ
- What colors does Todoist use?
- Todoist's core palette includes #25221e, #fefdfc, #ffffff, #fafafa, #f9f7f6. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Todoist DESIGN.md.
- What font does Todoist use?
- Todoist's primary typeface is Graphik. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Todoist design system?
- A warm, calm productivity-app marketing surface built on a barely-off-white canvas (#fefdfc) with a single confident red CTA, Graphik display headlines, and Inter UI text. The system reads as friendl…