Todoist : 17 ans de minimalisme chaleureux et de retenue maximale

10 min de lecture • 1926 mots
Todoist : 17 ans de minimalisme chaleureux et de retenue maximale screenshot

« La clarté, enfin. » — Todoist

Todoist fonctionne sur une thèse unique depuis plus de 17 ans : le meilleur gestionnaire de tâches est celui que l’on utilise réellement. Fondé par Amir Salihefendic en 2007, Todoist a survécu à toutes les tendances de productivité — GTD, bullet journaling, second cerveau, agents IA — en refusant de courir après la complexité. Doist, l’entreprise entièrement en télétravail et rentable qui le développe, sert plus de 50 millions de professionnels avec une philosophie de design construite sur la cohérence et la retenue plutôt que sur la nouveauté. Pas de growth hacks, pas de dark patterns, pas de barrières « mettez à niveau pour débloquer » sur les fonctionnalités essentielles. Le résultat est un produit qui semble inévitable, comme si c’était évidemment ainsi qu’un gestionnaire de tâches devrait se présenter.

Points clés

  1. Une seule couleur de marque suffit - Todoist utilise le rouge (#E34432) pour le CTA principal et le logo, et nulle part ailleurs. Cette retenue extrême rend chaque élément rouge important.
  2. La hiérarchie textuelle basée sur l’opacité crée une harmonie naturelle - Tout le texte dérive d’un brun foncé chaleureux unique (rgb(37,34,30)) à des opacités variables (100 %, 66 %, 49 %, 18 %, 7 %), éliminant le besoin de multiples valeurs de gris.
  3. Le blanc cassé chaleureux n’est pas du blanc - L’arrière-plan à #FEFDFB (crème à peine perceptible) fait la différence entre clinique et accueillant, et la plupart des utilisateurs ne le remarqueront jamais consciemment.
  4. Les ombres ne sont presque jamais la solution - Todoist construit toute sa hiérarchie visuelle à travers la couleur et l’espacement. Pratiquement aucune ombre n’apparaît dans le design.
  5. 17 ans de raffinement valent mieux que 17 fonctionnalités - Rien dans le design ne paraît nouveau ou tendance. Tout semble avoir été testé, affiné et éprouvé pendant près de deux décennies.

Pourquoi Todoist compte

Todoist démontre que la longévité et la retenue sont des avantages concurrentiels en design. Tandis que les concurrents courent après la parité fonctionnelle et les tendances visuelles, le design de Todoist a évolué par soustraction — en supprimant ce qui ne sert pas la boucle fondamentale de capture, organisation et exécution. L’approche du produit vis-à-vis de l’IA (« Ramble », qui transforme la saisie vocale en tâches structurées) reflète la même philosophie : servir le flux de travail existant plutôt que créer un nouveau paradigme d’interaction.

Réalisations clés : - Sert plus de 50 millions de professionnels sur toutes les plateformes (web, iOS, Android, Mac, Windows) avec un langage visuel cohérent - A maintenu un modèle freemium généreux en tant qu’entreprise indépendante et rentable d’environ 100 personnes - A développé une analyse en langage naturel (« Acheter des courses tous les mardis à 17h » devient une tâche récurrente) qui élimine la friction du remplissage de formulaires

Principes fondamentaux de design

1. La marque à couleur unique

Le rouge (#E34432) est la seule couleur de marque. Il apparaît sur le bouton CTA principal, le logo et dans les moments de marque. C’est tout. Pas d’accent secondaire, pas de dégradé, pas de système de couleurs. Cette discipline est le design — quand tout rivalise pour l’attention, rien ne gagne. En restreignant le rouge aux moments qui comptent, Todoist s’assure que le regard est attiré précisément là où il doit aller.

L’état de survol s’assombrit à #CF3520, et les liens textuels utilisent un bleu distinct (#0F66AE) pour maintenir la convention selon laquelle le texte bleu souligné est cliquable. Mais la marque elle-même est une couleur unique, appliquée avec une précision chirurgicale.

Le système de priorités dans l’application introduit la couleur uniquement là où elle porte une signification fonctionnelle : P1 urgent (#D1453B), P2 élevée (#EB8909), P3 moyenne (#246FE0) et P4 par défaut (pas de couleur). Même ici, les couleurs servent l’information, pas la décoration.

2. Hiérarchie textuelle basée sur l’opacité

Le système typographique le plus discipliné de tous les outils de productivité modernes. Chaque élément de texte sur la page est rgb(37,34,30) — un brun-noir foncé chaleureux avec une subtile tonalité chaude qui correspond à l’arrière-plan blanc cassé. Les titres utilisent une opacité de 100 %. Le corps de texte utilise 66 %. Les légendes atténuées utilisent 49 %. Les bordures et séparateurs subtils utilisent 18 %. Les teintes d’arrière-plan utilisent 7 %.

Cette approche à teinte unique crée une harmonie que de multiples valeurs de gris ne peuvent atteindre, car chaque élément textuel partage la même couleur de base et varie simplement en présence. Il n’y a aucune valeur de gris et aucune couleur secondaire dans le système typographique.

Échelle d'opacité :
100% ████████████████████ Titres, texte principal
 66% █████████████        Corps, descriptions
 49% ██████████           Légendes, métadonnées
 18% ████                 Bordures, séparateurs subtils
  7% ██                   Teintes d'arrière-plan

Tous dérivés de rgb(37, 34, 30)

3. Minimalisme chaleureux

La couleur d’arrière-plan #FEFDFB — rgb(254,253,252) — se distingue à peine du blanc pur. Mais la différence est capitale. Ce blanc cassé chaleureux crée un canevas accueillant qui donne l’impression d’ouvrir un carnet bien organisé plutôt que de lancer un logiciel clinique. Les captures d’écran du produit flottent naturellement dans la mise en page sans nécessiter d’ombres prononcées ou de bordures pour les séparer de l’arrière-plan.

La surface verte (#F4FBF7) et la surface sauge (#F6FAEB) offrent une différenciation des sections grâce à des décalages de teinte tout aussi subtils. Ce ne sont pas des séparateurs de sections marqués — ce sont de légers changements d’ambiance qui guident le regard sans exiger l’attention.

Patterns transférables

Le système de design de Todoist est remarquablement portable grâce à sa simplicité. La hiérarchie textuelle basée sur l’opacité fonctionne dans n’importe quel projet — remplacez rgb(37,34,30) par votre propre couleur de base et les cinq niveaux d’opacité créent un système typographique instantané et harmonieux.

L’implémentation CSS révèle l’élégance de l’approche :

:root {
  /* Todoist's warm minimal palette */
  --color-background: #FEFDFB;
  --color-surface-green: #F4FBF7;
  --color-surface-sage: #F6FAEB;
  --color-text: rgb(37, 34, 30);
  --color-text-secondary: rgba(37, 34, 30, 0.66);
  --color-text-muted: rgba(37, 34, 30, 0.49);
  --color-text-faint: rgba(37, 34, 30, 0.18);
  --color-text-whisper: rgba(37, 34, 30, 0.07);
  --color-brand: #E34432;
  --color-brand-hover: #CF3520;
  --color-link: #0F66AE;

  /* Typography */
  --font-sans: Graphik, "Graphik fallback", Arial, Helvetica, sans-serif;
}

/* Warm off-white body */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Hero — confident but not aggressive */
h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.55px;
}

/* Single-color CTA — red IS the elevation */
.button-primary {
  background-color: var(--color-brand);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  transition: background-color 0.15s ease;
}
.button-primary:hover {
  background-color: var(--color-brand-hover);
}

La police personnalisée Graphik (de Commercial Type) se situe dans un juste milieu entre géométrique et humaniste — plus chaleureuse que Inter, moins formelle que Helvetica. Sa neutralité chaleureuse s’accorde avec l’arrière-plan blanc cassé et le texte brun-noir. Le modèle de nom de fichier haché (Graphik-af49fcca2967e850) indique une optimisation de police Next.js, garantissant un rendu cohérent multiplateforme que les polices système ne peuvent pas assurer.

Le titre à 55px/poids 600 avec une hauteur de ligne de 1.15 est nettement plus accessible que les hauteurs de ligne monumentales de 1.0 observées chez des marques comme Rivian ou Obsidian. L’espacement négatif des lettres maintient un ratio constant de -1 % à travers les tailles (-0.55px à 55px, -0.38px à 38px), créant un resserrement proportionnel plutôt que des valeurs arbitraires.

Pour SwiftUI, le système textuel basé sur l’opacité se traduit proprement :

extension Color {
    static let todoistBg = Color(red: 254/255, green: 253/255, blue: 252/255)
    static let todoistText = Color(red: 37/255, green: 34/255, blue: 30/255)
    static let todoistSecondary = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.66)
    static let todoistMuted = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.49)
    static let todoistBrand = Color(red: 227/255, green: 68/255, blue: 50/255)
    static let todoistSurface = Color(red: 244/255, green: 251/255, blue: 247/255)
}

// Opacity-based text hierarchy in practice
VStack(alignment: .leading, spacing: 8) {
    Text("Clarity, finally.")
        .font(.system(size: 55, weight: .semibold))
        .tracking(-0.55)
        .foregroundStyle(Color.todoistText)

    Text("Join 50+ million professionals who simplify work and life.")
        .font(.system(size: 16))
        .foregroundStyle(Color.todoistText.opacity(0.66))
}

Leçons de design

La retenue est un avantage concurrentiel. La couleur de marque unique de Todoist oblige chaque élément rouge à être significatif. Quand les concurrents utilisent trois ou quatre couleurs d’accent, rien ne ressort. Quand Todoist en utilise une seule, le CTA est immanquable.

Les arrière-plans blanc cassé chaleureux changent le registre émotionnel. La différence entre #FFFFFF et #FEFDFB est de trois points RGB — presque imperceptible isolément, mais transformatrice dans l’ensemble. L’arrière-plan chaleureux rend toute l’expérience accueillante et humaine. Le blanc clinique fait ressembler les interfaces à des outils. Le blanc cassé chaleureux en fait des espaces que l’on a envie d’habiter.

Les hiérarchies par opacité sont plus harmonieuses que les échelles de gris. Cinq niveaux d’une couleur de base unique créent une cohésion naturelle parce que chaque élément textuel partage la même teinte. Cinq valeurs de gris différentes (par ex. #333, #666, #999, #CCC, #EEE) créent une discordance subtile car chacune est une couleur différente, pas simplement une intensité différente.

Évitez les ombres quand l’espacement et la couleur suffisent. Todoist prouve qu’une hiérarchie visuelle entière peut fonctionner sans ombres portées. Le CTA rouge est proéminent parce qu’il est la seule couleur saturée sur un canevas chaleureux et atténué — pas parce qu’il flotte au-dessus de la surface. Cette approche vieillit mieux et s’affiche de manière plus cohérente sur tous les appareils.

Évitez le mode sombre en marketing quand la chaleur est la marque. Le canevas blanc cassé chaleureux est l’identité de Todoist. Le mode sombre existe dans l’application (où les longues sessions le rendent pratique), mais le site marketing est toujours clair. La leçon : si la chaleur est au cœur de votre marque, protégez-la sur vos surfaces les plus visibles.

Évitez les extrêmes typographiques tendance. Pas de texte d’affichage de plus de 100px, pas d’espacement négatif extrême, pas de graisse 800. Graphik à 600 est le maximum. Cette retenue signifie que le design ne se date pas lui-même — il paraissait approprié il y a cinq ans et le sera encore dans cinq ans.

Questions Fréquemment Posées

Qu’est-ce qui donne au design de Todoist un caractère « inévitable » plutôt que « conçu » ?

Dix-sept ans de perfectionnement continu. Chaque élément a survécu à de multiples tendances design sans être remplacé par quelque chose de plus à la mode. Le fond blanc cassé chaleureux, l’accent rouge unique, la hiérarchie textuelle basée sur l’opacité et la police Graphik ne sont pas des choix à la mode — ce sont des choix durables qui ont fait leurs preuves pendant près de deux décennies. Quand rien ne semble ajouté ou tendance, le design paraît inévitable.

Comment fonctionne la hiérarchie textuelle basée sur l’opacité de Todoist ?

Tout le texte de la page utilise une seule couleur — rgb(37,34,30), un brun-noir foncé chaleureux — à cinq niveaux d’opacité : 100 % pour les titres, 66 % pour le corps de texte, 49 % pour les légendes, 18 % pour les bordures et 7 % pour les teintes d’arrière-plan. Comme chaque élément partage la même teinte de base, la hiérarchie paraît naturellement cohérente sans nécessiter une palette de différentes valeurs de gris.

Pourquoi Todoist n’utilise-t-il qu’une seule couleur de marque ?

La retenue est la stratégie de design. En limitant le rouge (#E34432) au bouton CTA et aux moments de marque, Todoist s’assure que le regard se dirige exactement là où il le faut. Aucun accent secondaire ne rivalise pour attirer l’attention. La discipline d’une couleur de marque unique simplifie également la cohérence multiplateforme — le même rouge fonctionne de manière identique sur le web, iOS, Android, Mac et Windows sans nécessiter un système de couleurs complexe.

Que peuvent apprendre les designers de l’approche de Todoist concernant les fonctionnalités IA ?

La fonctionnalité IA de Todoist « Ramble » transforme la saisie vocale en tâches structurées au lieu d’introduire un chatbot ou un nouveau paradigme d’interaction. La leçon est que l’IA devrait servir les flux de travail existants, et non en créer de nouveaux. Le design soutient cette approche en gardant la saisie en langage naturel comme l’élément le plus proéminent — tapez ou prononcez une phrase, et le système se charge de l’analyse. Pas de branding IA, pas de bulles de conversation, pas de nouveauté pour elle-même.

Comment Todoist parvient-il à une hiérarchie visuelle sans ombres ?

Par la couleur et l’espacement uniquement. Le fond blanc cassé chaleureux (#FEFDFB) offre un canevas subtil. Le CTA rouge unique est proéminent car il est la seule couleur saturée de toute la palette. La hiérarchie typographique repose sur des variations de taille et d’opacité d’une seule couleur de base. La différenciation des sections utilise des transitions douces vers des surfaces vertes (#F4FBF7) ou sauge (#F6FAEB). Le résultat est un design plat et cohérent qui vieillit bien et s’affiche de manière homogène sur tous les appareils.

Références