---
name: Todoist
description: "Excellent example of premium SaaS design that balances professionalism with approachability through warm colors and generous whitespace."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#25221E"
  secondary: "rgba(37,34,30,0.66)"
  tertiary: "#E44232"
  neutral: "rgba(37,34,30,0.49)"
  bg-soft: "#F9F7F6"
  bg-quiet: "#FEFDFC"
  line: "rgba(37,34,30,0.18)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

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

*A clean, well-organized digital notebook for your life*

## Colors

Warm neutrals with a single high-chroma red accent

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#25221E`)** — uses `ink` token
- **Secondary text (`rgba(37,34,30,0.66)`)** — uses `ink-soft` token
- **Accent (`#E44232`)** — uses `accent` token
- **Muted (`rgba(37,34,30,0.49)`)** — uses `muted` token
- **Borders (`rgba(37,34,30,0.18)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** geometric-sans

- 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

## Layout

12-column grid with generous margins and centered content blocks

*Rhythm:* Consistent 4px base grid with generous whitespace between sections

## Elevation & Depth

- 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)
- Borders: 1px solid rgba(37,34,30,0.18)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```