---
version: alpha
name: Todoist
description: A warm, calm productivity canvas where a single signature red anchors every action against a softly peach-tinted white, Graphik grotesk keeps copy friendly and clear, and generously rounded 15px corners plus feather-soft shadows make the to-do app feel approachable rather than rigid.
colors:
  # Surface / canvas
  background: "#ffffff"        # white page canvas
  surface: "#ffffff"           # card / panel fill
  surface-warm: "#fae8d6"      # warm peach hero band tint
  surface-muted: "#f4f2ef"     # quiet warm-gray panel fill

  # Ink / text — warm near-black
  ink: "#25221e"               # warm near-black headings + body (the dominant ink)
  ink-secondary: "#575757"     # supporting copy
  ink-muted: "#808080"         # captions, placeholder, metadata
  on-dark: "#ffffff"           # text on red / dark surfaces

  # Brand accent — the singular Todoist red
  primary: "#e34432"           # the signature Todoist red — primary CTA, logo, checkboxes
  primary-hover: "#cf3520"     # deeper red for hover / pressed
  on-primary: "#ffffff"        # white text on red

  # Secondary action — quiet warm-gray button
  secondary: "#efece8"         # warm-gray fill for secondary buttons (was rgba(37,34,30,0.07) — Google format requires hex)
  on-secondary: "#25221e"      # warm near-black text on the quiet button

  # Supporting accents — the category palette
  accent-blue: "#0f66ae"       # informational links, blue product accent
  accent-green: "#438952"      # success / completed green
  accent-yellow: "#f7b84f"     # highlight gold
  accent-pink: "#ffada4"       # soft coral illustration accent

  # Borders
  border: "#eceae7"            # hairline warm divider (was rgba(37,34,30,0.07) — Google format requires hex)
  border-strong: "#d8d4ce"     # input + secondary outlines

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#25221e"       # was rgba(37,34,30,0.07/0.18) — Google format requires hex
  shadow-warm: "#fae8d6"       # was rgba(250,232,214,0.6) warm glow — Google format requires hex

typography:
  display-hero:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 55px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.55px
  display:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.44px
  heading:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.32px
  heading-sub:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.24px
  body-large:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body-small:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  button-small:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Graphik, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  sm: 8px
  md: 10px
  lg: 15px
  pill: 999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-small}"
    rounded: "{rounded.sm}"
    padding: 9px 14px
  button-secondary-hover:
    backgroundColor: "{colors.border-strong}"
    textColor: "{colors.on-secondary}"

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-small}"
    rounded: "{rounded.lg}"
    padding: 12px 27px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 9px 14px
    border: "1px solid {colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  select:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 7px 32px

  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-accent:
    textColor: "{colors.accent-blue}"
    typography: "{typography.body}"
    padding: 0px
---

# Todoist Design System

## Overview

Todoist's marketing site is an exercise in calm. Where many productivity tools lean cold and blue to signal "serious software," Todoist warms the whole canvas: the page is white, but the hero and key panels sit on a soft peach band (`{colors.surface-warm}`), the ink is a warm near-black with a brown undertone (`{colors.ink}`) rather than a clinical `#000`, and even the shadows carry a faint warm glow. The effect is a tool that feels less like a spreadsheet and more like a tidy, sunlit desk. The headline "Clarity, finally." is set in Graphik at a confident 600 weight with gentle negative tracking — friendly and clear, never shouting.

The organizing principle is a **single decisive red** (`{colors.primary}`). Todoist red is the logo, the checkbox, and — critically — the only button color that means "go." "Start for free" is red; everything secondary is a quiet warm-gray (`{colors.secondary}`). This one-accent discipline is what makes the system feel calm despite the busy underlying product: your eye always knows where the action is, because exactly one thing on the page is red. A broader category palette (blue, green, gold, coral) exists for product chrome and illustration, but it stays subordinate; red is the brand's heartbeat.

The geometry is soft and reassuring. Corners are generously rounded — buttons and feature cards land at a notably round 15px (`{rounded.lg}`), well past the typical 6-8px "tech" radius, which reads as friendly rather than rigid. Shadows are feather-light and layered (a barely-there 1px hairline for most surfaces, a soft diffuse lift for floating cards), often tinted with that warm peach so elevation feels gentle. Nothing has a hard edge or a harsh drop. The overall impression is approachable, organized, and quietly premium — productivity software that lowers your blood pressure instead of raising it.

**Key Characteristics:**
- White canvas warmed by a soft peach hero band (`{colors.surface-warm}`) — calm, not clinical
- Warm near-black ink (`{colors.ink}`, a brown-tinted `#25221e`), never pure black
- A **single signature red** (`{colors.primary}`) reserved for the one "go" action and the brand mark
- Secondary actions are quiet warm-gray (`{colors.secondary}`), keeping the red unmistakable
- **Graphik** grotesk throughout — friendly, legible, set at 600 for headings with gentle -0.5px tracking
- Generously rounded **15px** corners (`{rounded.lg}`) on buttons and cards — soft and approachable
- Feather-soft, often warm-tinted shadows (`{colors.shadow-soft}`, `{colors.shadow-warm}`) — gentle elevation
- Hairline warm dividers (`{colors.border}`) for quiet structure
- A subordinate category palette (blue, green, gold, coral) for product chrome and illustration only
- Plain, calming copy ("Clarity, finally.") that matches the unhurried visual tone

## Colors

### Surface & Canvas
- **White** (`{colors.background}` / `{colors.surface}`): The base page and card fill.
- **Warm Peach** (`{colors.surface-warm}`): The signature hero band and feature panel tint — the move that warms the whole site.
- **Warm Gray** (`{colors.surface-muted}`): Quiet panel fills for lower-emphasis sections.

### Ink / Text
- **Warm Near-Black** (`{colors.ink}`): Headings and body. A brown-tinted near-black (`#25221e`), the dominant text color — deliberately not pure black.
- **Slate** (`{colors.ink-secondary}`): Supporting paragraph copy.
- **Gray** (`{colors.ink-muted}`): Captions, placeholder, metadata.

### Brand Accent
- **Todoist Red** (`{colors.primary}`): The singular brand color — primary CTA, logo, checkboxes. Exactly one "go" action per view.
- **Red Hover** (`{colors.primary-hover}`): Deeper red for hover/pressed states.

### Secondary Action
- **Quiet Warm-Gray** (`{colors.secondary}`): The fill for secondary buttons (flattened from a 7%-opacity warm-black). Keeps non-primary actions visually quiet.

### Supporting Accents
- **Blue** (`{colors.accent-blue}`): Informational links and a product accent.
- **Green** (`{colors.accent-green}`): Completed / success.
- **Gold** (`{colors.accent-yellow}`) / **Coral** (`{colors.accent-pink}`): Highlight and illustration accents.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Quiet warm dividers (flattened from a 7%-opacity warm-black).
- **Strong Border** (`{colors.border-strong}`): Input and secondary-button outlines.
- **Soft / Warm Shadow** (`{colors.shadow-soft}`, `{colors.shadow-warm}`): Opaque stand-ins for the feather-light and warm-tinted shadows (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Graphik` — a clean, friendly neo-grotesk, with fallbacks `-apple-system, Helvetica Neue, Helvetica, Arial, sans-serif`. Carries the entire hierarchy.
- **Weights**: 400 for body, 475-500 for emphasized inline links, 600 for headings and buttons. The system uses 600 (semibold) as its "loud" weight rather than 700+.
- **Tracking**: gentle negative tracking on headings (around -0.5px at hero size, scaling down proportionally); near-zero on body for relaxed legibility.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 55px / 600 / -0.55px — the marquee headline ("Clarity, finally.") |
| `display` | 44px / 600 — major section headlines |
| `heading` | 32px / 600 — feature headings |
| `heading-sub` | 24px / 600 — sub-section headings |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 18px / 400 — standard body copy |
| `body-small` | 16px / 400 — dense supporting copy, inputs |
| `button` | 18px / 600 — primary button labels |
| `button-small` | 15px / 600 — secondary / compact buttons |
| `caption` | 14px / 400 — captions, badges, metadata |

### Principles
- **Friendly grotesk, semibold for emphasis**: Graphik at 600 carries headings and CTAs — confident without the heaviness of a black weight.
- **Gentle tracking**: headings tighten slightly (-0.5px); body stays relaxed at 0 for easy reading.
- **Clarity over expression**: the type is a quiet servant of the calm tone — no display flourishes, no condensed drama.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px (with a 16px super-unit doing a lot of the work). Spacing is comfortable and unhurried — sections breathe with 64-96px gaps (`{spacing.3xl}`–`{spacing.4xl}`), while card internals stay tidy at 16-24px.

### Grid & Container
- Centered content with a comfortable max width; the hero pairs left-aligned copy with a product screenshot panel on a peach band
- Feature sections use rounded cards in 2-3 column grids
- Social-proof logos and testimonial rows run full-width below the hero

### Whitespace Philosophy
- **Calm, generous rhythm**: ample vertical spacing keeps the page from feeling busy despite a feature-dense product
- **Warm panels group content**: the peach band and warm-gray panels chunk the page into calm zones rather than relying on hard borders
- **Soft separation**: hairline dividers and gentle shadows separate, never hard rules

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Most page content |
| Hairline (Level 1) | `0 1px 0 0` at ~4% warm-black (`{colors.shadow-soft}`) | Sticky nav, quiet separators |
| Card (Level 2) | `0 1px 19px` soft + `0 0 48px` warm glow (`{colors.shadow-warm}`) | Resting feature cards |
| Floating (Level 3) | `0 14px 19px -9px` + `0 10px 48px` (`{colors.shadow-soft}`) | The floating play button, lifted product panels |
| Focus Ring | `0 0 0 4px` light blue + `0 0 0 1px` blue ring | Focused inputs and controls |

**Shadow Philosophy**: Todoist's shadows are feather-light, layered, and frequently *warm-tinted*. A floating element gets a soft, wide, low-opacity cast plus — distinctively — a faint peach glow (`{colors.shadow-warm}`) that ties the elevation back to the brand's warm palette. There are no hard or high-contrast drops anywhere; depth is suggested gently, in keeping with the calm tone. Most surfaces stay flat with only a hairline to separate them.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Secondary buttons, inputs, selects, small chips |
| `md` | 10px | Cards, panels, product imagery |
| `lg` | 15px | Primary buttons and feature cards — the soft, friendly signature |
| `pill` | 999px | Count badges, avatar chips |

The radius scale skews generous: even the "small" corner is 8px, and the signature 15px (`{rounded.lg}`) on buttons and cards is notably rounder than the typical tech 6-8px. The roundness is intentional — it makes a feature-dense productivity tool feel soft and approachable rather than rigid.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Todoist red (`{colors.primary}`) fill, white text, **15px radius** (`{rounded.lg}`). The single "go" action ("Start for free"). Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — Quiet warm-gray (`{colors.secondary}`) fill, warm near-black text, 8px radius. Non-primary actions. Hover darkens slightly.
- **`button-dark`** — Warm near-black (`{colors.ink}`) fill, white text, 15px radius, with a soft layered shadow — used for prominent dark CTAs like the video "Play" button.

### Cards
- **`card`** / **`card-elevated`** — White surface, 10-15px radius. The elevated variant carries the soft, warm-tinted layered shadow.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` outline, 8px radius. **`input-focus`** swaps the border to Todoist red (`{colors.primary}`) — the accent reinforces focus.
- **`select`** — Same warm-gray-bordered treatment with extra horizontal padding for the chevron.

### Badges
- **`badge`** — Quiet warm-gray (`{colors.secondary}`) pill with warm near-black text. Soft, low-emphasis.

### Navigation
- **`nav-bar`** — Sits flush on white with a hairline bottom shadow; warm near-black labels.

### Links
- **`link`** — Warm near-black text, underlined. **`link-accent`** uses informational blue (`{colors.accent-blue}`) for product/help links; the internal-link hover tint shifts toward red.

## Do's and Don'ts

### Do
- Warm the canvas with the peach band (`{colors.surface-warm}`) behind the hero and key panels
- Use warm near-black (`{colors.ink}`) for text, never pure `#000`
- Reserve Todoist red (`{colors.primary}`) for the **single** primary action and the brand mark — one red per view
- Make secondary actions quiet warm-gray (`{colors.secondary}`) so the red stays unmistakable
- Round buttons and feature cards generously to **15px** (`{rounded.lg}`) — the soft, friendly signature
- Keep shadows feather-light and layered, with an optional warm peach glow (`{colors.shadow-warm}`)
- Set headings in Graphik at 600 with gentle -0.5px tracking; keep body at 400 / 0 tracking
- Use Todoist red as the input focus border (`{colors.primary}`) to reinforce the accent

### Don't
- Don't use pure black or a cold blue-gray ink — the warmth of `{colors.ink}` is the point
- Don't introduce a second "go" color — only red means action
- Don't make corners sharp or stop at a typical 6-8px tech radius on the primary controls — the 15px roundness is intentional
- Don't add hard, high-contrast drop shadows — elevation is soft and warm
- Don't let the category palette (blue/green/gold) compete with red for the CTA role
- Don't reach for a heavy black font weight — 600 semibold is the loudest the system goes
- Don't crowd sections — the calm comes from generous 64-96px vertical rhythm

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column; hero type scales 55px → ~32px; product panel stacks below copy |
| Mobile | 375–639px | Single column; nav collapses to a menu; red CTA goes full-width |
| Tablet | 640–1023px | Two-column feature grids begin; peach hero band persists |
| Desktop | 1024–1279px | Full layout; copy-left / product-panel-right hero |
| Large Desktop | ≥1280px | Centered max-width container; generous section padding (`{spacing.4xl}`) |

### Touch Targets
- Buttons run comfortably tall with `12px 16px` padding at the 15px radius — easy thumb targets
- Secondary chips and selects keep generous vertical padding

### Collapsing Strategy
- **Navigation**: horizontal nav → menu toggle on mobile; the red "Start for free" CTA persists and may go full-width
- **Hero**: copy and product panel go from side-by-side to stacked, panel full-width, peach band intact
- **Grids**: 2-3 column feature cards collapse to a single stacked column
- **Type**: hero drops 55px → ~32px while keeping proportional tracking
- **Spacing**: section gaps compress from 96px toward ~48px

### Image Behavior
- The product screenshot panel reflows as a flex/grid child and stays inside its rounded, soft-shadowed frame
- Illustrative coral/gold accents and decorative sparkles reduce or hide on small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`), warmed by Peach (`{colors.surface-warm}`)
- Text: Warm Near-Black (`{colors.ink}`)
- Brand accent: Todoist Red (`{colors.primary}`)
- Secondary text: Slate (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Todoist Red (`{colors.primary}`) — exactly one per view

### Example Component Prompts

- "Create a hero on a soft peach band (`{colors.surface-warm}`) over white (`{colors.background}`), with a 55px warm near-black (`{colors.ink}`) headline in Graphik weight 600, letter-spacing -0.55px, left-aligned, and a single red primary button (`{colors.primary}` fill, white text, `{rounded.lg}` 15px radius)"
- "Build a primary button: Todoist red (`{colors.primary}`) fill, white text, Graphik 600, `{rounded.lg}` 15px radius, `12px 16px` padding; hover deepens to `{colors.primary-hover}`"
- "Make a secondary button: quiet warm-gray (`{colors.secondary}`) fill, warm near-black (`{colors.ink}`) text, `{rounded.sm}` 8px radius — so it stays visually quiet next to the red CTA"
- "Create a feature card: white (`{colors.surface}`) fill, `{rounded.lg}` 15px radius, soft layered shadow with a faint warm peach glow (`{colors.shadow-warm}`), 24px padding"
- "Design an input: white fill, `{colors.border-strong}` 1px outline, `{rounded.sm}` 8px radius; on focus swap the border to Todoist red (`{colors.primary}`)"

### Iteration Guide

1. Start on white but warm it with the peach band (`{colors.surface-warm}`) behind the hero. If the page feels cold, add warmth, not blue.
2. Set ink to warm near-black (`{colors.ink}`), never `#000`.
3. Place exactly **one** red (`{colors.primary}`) action per view. If two things are red, demote one to warm-gray (`{colors.secondary}`).
4. Round the primary buttons and feature cards to 15px (`{rounded.lg}`) — confirm they're rounder than a typical 6-8px tech corner.
5. Keep shadows feather-light and layered; add the warm peach glow (`{colors.shadow-warm}`) for floating elements.
6. Use Graphik at 600 for headings/CTAs with gentle -0.5px tracking; body stays 400 / 0.
7. Keep vertical rhythm generous (64-96px between sections) — the calm comes from the breathing room.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Todoist. Brand names and trademarks belong to their respective owners.