Todoist design system

What font does Todoist use?

Todoist’s website uses Graphik for headings and Inter for body text. Graphik is not on Google Fonts; the closest free match is Inter Tight; Inter is free on Google Fonts.

Todoist colour palette

Todoist’s home page is light (#FEFDFC background, #25221E text) and uses #E34432 for its main actions. Its palette: #FEFDFC, #FFF6F0, #25221E, #FFFFFF, #F4FBF7, #F9F7F6.

• #FEFDFC
  78.1% · backgrounds
• #FFF6F0
  8.9% · backgrounds
• #25221E
  6.8% · text
• #FFFFFF
  4.3% · backgrounds
• #F4FBF7
  0.8% · backgrounds
• #F9F7F6
  0.4% · backgrounds
• #F6FAEB
  0.3% · backgrounds
• #E34432
  0.2% · backgrounds, text
• #297ABC
  0.1% · text
• #FFB399
  0.1% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Todoist’s largest type is 55px at weight 600.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px, 64px, 88px.

Corner radii: 6px, 8px, 10px, 13px, 15px, pill. 3 shadow levels measured.

What makes Todoist look like Todoist

Almost entirely neutral: 99% of the page is painted in #FEFDFC and #FFF6F0.

#E34432 is an accent: 0.2% of the page, as small fills such as buttons and badges. Keep it to small areas.

#297ABC is an accent: 0.1% of the page, used for text only. Don't fill large areas with it.

The largest type (55px Graphik-1bbd4a4c7a2fb472) is semibold (600), tracked to -0.01em.

Todoist DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Todoist’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Todoist’s product, so use your own name, words and images.

Download Todoist DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Todoist’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400&display=swap");

:root {
  --color-background: #FEFDFC; /* Background */
  --color-surface: #F6FAEB; /* Surface */
  --color-text: #25221E; /* Text */
  --color-text-muted: #808080; /* Text muted */
  --color-action: #E34432; /* Action */
  --color-on-action: #000000; /* On action */
  --color-negative: #EE6449; /* Negative */
  --color-warning: #E39E30; /* Warning */
  --color-fff6f0: #FFF6F0; /* 8.9% of the page, as fills */
  --color-ffffff: #FFFFFF; /* 4.3% of the page, as fills */
  --color-f4fbf7: #F4FBF7; /* 0.8% of the page, as fills */
  --color-f9f7f6: #F9F7F6; /* 0.4% of the page, as fills */
  --font-body: "Inter-5486e50ce5a4efdf", "Inter", sans-serif; /* Inter-5486e50ce5a4efdf on the site; Inter renders */
  --font-display: "Graphik-1bbd4a4c7a2fb472", "Inter Tight", sans-serif; /* Graphik-1bbd4a4c7a2fb472 on the site; Inter Tight renders */
  --font-interface: "Caecilia-8d8a7c9be503e3f3", "Figtree", sans-serif; /* Caecilia-8d8a7c9be503e3f3 on the site; Figtree renders */
  --type-display-large: 55px; /* Display Large, weight 600 */
  --type-display-large-leading: 63.25px;
  --type-display-large-tracking: -0.01em;
  --type-display-medium: 44px; /* Display Medium, weight 600 */
  --type-display-medium-leading: 50.6px;
  --type-display-medium-tracking: -0.01em;
  --type-display-small: 38px; /* Display Small, weight 700 */
  --type-display-small-leading: 48.64px;
  --type-display-small-tracking: -0.005em;
  --type-title-1: 22px; /* Title 1, weight 600 */
  --type-title-1-leading: 28.16px;
  --type-title-2: 20.5px; /* Title 2, weight 500 */
  --type-title-2-leading: 32.8013px;
  --type-title-3: 20px; /* Title 3, weight 400 */
  --type-title-3-leading: 36px;
  --type-title-4: 19px; /* Title 4, weight 400 */
  --type-title-4-leading: 30.4px;
  --type-title-4-tracking: 0.01em;
  --type-title-5: 18.5px; /* Title 5, weight 600 */
  --type-title-5-leading: 25.9px;
  --type-title-5-tracking: 0.01em;
  --type-title-6: 18px; /* Title 6, weight 500 */
  --type-title-6-leading: 31.5px;
  --type-title-6-tracking: 0.005em;
  --type-body-large: 17px; /* Body Large, weight 700 */
  --type-body-large-leading: 23.8px;
  --type-body-large-tracking: 0.01em;
  --type-body-medium: 15.5px; /* Body Medium, weight 500 */
  --type-body-medium-leading: 20.9261px;
  --type-body-medium-tracking: 0.01em;
  --type-body-small: 14.5px; /* Body Small, weight 500 */
  --type-body-small-leading: 21.7512px;
  --type-body-small-tracking: 0.013em;
  --type-label: 12px; /* Label, weight 500 */
  --type-label-leading: 18px;
  --type-label-tracking: 0.025em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;

How this was measured

PikSpec’s scanner read the todoist.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Todoist is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Todoist.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.