Todoist: 17 Anos de Minimalismo Acolhedor e Máxima Contenção

7 min de leitura • 1776 palavras
Todoist: 17 Anos de Minimalismo Acolhedor e Máxima Contenção screenshot

“Clareza, finalmente.” — Todoist

O Todoist opera com uma única tese há mais de 17 anos: o melhor gerenciador de tarefas é aquele que você realmente usa. Fundado por Amir Salihefendic em 2007, o Todoist sobreviveu a todas as tendências de produtividade — GTD, bullet journaling, second brain, AI agents — recusando-se a perseguir complexidade. A Doist, a empresa totalmente remota e lucrativa por trás dele, atende mais de 50 milhões de profissionais com uma filosofia de design construída sobre consistência e contenção, em vez de novidade. Sem growth hacks, sem dark patterns, sem barreiras de “faça upgrade para desbloquear” em funcionalidades essenciais. O resultado é um produto que parece inevitável, como se obviamente fosse assim que um gerenciador de tarefas deveria ser.

Principais Conclusões

  1. Uma cor de marca é suficiente - O Todoist usa vermelho (#E34432) para o CTA principal e o logo, e em nenhum outro lugar. Essa contenção extrema faz com que cada elemento vermelho pareça importante.
  2. Hierarquia de texto baseada em opacidade cria harmonia sem esforço - Todo o texto deriva de um único marrom escuro quente (rgb(37,34,30)) em opacidades variadas (100%, 66%, 49%, 18%, 7%), eliminando a necessidade de múltiplos valores de cinza.
  3. Off-white quente não é branco - O fundo em #FEFDFB (creme quase imperceptível) faz a diferença entre clínico e convidativo, e a maioria dos usuários nunca vai perceber conscientemente.
  4. Sombras quase nunca são a resposta - O Todoist alcança toda a sua hierarquia visual através de cor e espaçamento. Praticamente nenhuma sombra aparece em qualquer lugar do design.
  5. 17 anos de refinamento superam 17 funcionalidades - Nada no design parece novo ou tendência. Tudo parece ter sido testado, refinado e comprovado ao longo de quase duas décadas.

Por Que o Todoist Importa

O Todoist demonstra que longevidade e contenção são vantagens competitivas em design. Enquanto concorrentes perseguem paridade de funcionalidades e tendências visuais, o design do Todoist evoluiu por subtração — removendo o que não serve ao ciclo central de capturar, organizar e fazer. A abordagem do produto em relação à IA (“Ramble,” que transforma entrada de voz em tarefas estruturadas) reflete a mesma filosofia: servir o fluxo de trabalho existente em vez de criar um novo paradigma de interação.

Principais conquistas: - Atende mais de 50 milhões de profissionais em todas as plataformas (web, iOS, Android, Mac, Windows) com linguagem visual consistente - Manteve um modelo freemium generoso como uma empresa lucrativa e independente de aproximadamente 100 pessoas - Construiu análise de linguagem natural (“Comprar mantimentos toda terça às 17h” se torna uma tarefa recorrente) que elimina a fricção de preenchimento de formulários

Princípios Fundamentais de Design

1. A Marca de Cor Única

Vermelho (#E34432) é a única cor de marca. Aparece no botão de CTA principal, no logo e em momentos da marca. Só isso. Sem cor secundária, sem gradiente, sem sistema de cores. Essa disciplina é o design — quando tudo compete por atenção, nada vence. Ao restringir o vermelho aos momentos que importam, o Todoist garante que o olhar seja direcionado precisamente para onde precisa ir.

O estado hover escurece para #CF3520, e links de texto usam um azul separado (#0F66AE) para manter a convenção de que texto azul sublinhado é clicável. Mas a marca em si é uma única cor, aplicada com precisão cirúrgica.

O sistema de prioridades dentro do app introduz cor apenas onde ela carrega significado funcional: P1 urgente (#D1453B), P2 alta (#EB8909), P3 média (#246FE0) e P4 padrão (sem cor). Mesmo aqui, as cores servem à informação, não à decoração.

2. Hierarquia de Texto Baseada em Opacidade

O sistema tipográfico mais disciplinado em qualquer ferramenta moderna de produtividade. Cada pedaço de texto na página é rgb(37,34,30) — um marrom escuro quente com um sutil subtom quente que combina com o fundo off-white. Títulos usam 100% de opacidade. Texto corrido usa 66%. Legendas discretas usam 49%. Bordas e divisores sutis usam 18%. Tons de fundo usam 7%.

Essa abordagem de matiz única cria harmonia que múltiplos valores de cinza não conseguem alcançar, porque cada elemento de texto compartilha a mesma cor base e simplesmente varia em presença. Não há valores de cinza e não há cores secundárias no sistema tipográfico.

Escala de Opacidade:
100% ████████████████████ Títulos, texto principal
 66% █████████████        Corpo, descrições
 49% ██████████           Legendas, metadados
 18% ████                 Bordas, divisores sutis
  7% ██                   Tons de fundo

Todos derivados de rgb(37, 34, 30)

3. Minimalismo Acolhedor

A cor de fundo #FEFDFB — rgb(254,253,252) — é praticamente indistinguível do branco puro. Mas a diferença é tudo. Esse off-white quente cria uma tela convidativa que faz o app parecer como abrir um caderno bem organizado em vez de iniciar um software clínico. Screenshots do produto flutuam naturalmente no layout sem precisar de sombras pesadas ou bordas para separá-los do fundo.

A superfície verde (#F4FBF7) e a superfície sage (#F6FAEB) proporcionam diferenciação de seções através de mudanças igualmente sutis de matiz. Esses não são divisores de seção ousados — são mudanças ambientais suaves que guiam o olhar sem exigir atenção.

Padrões Transferíveis

O sistema de design do Todoist é notavelmente portável por causa de sua simplicidade. A hierarquia de texto baseada em opacidade funciona em qualquer projeto — substitua rgb(37,34,30) pela sua própria cor base de texto e os cinco níveis de opacidade criam um sistema tipográfico instantâneo e harmonioso.

A implementação em CSS revela a elegância da abordagem:

: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);
}

A fonte customizada Graphik (da Commercial Type) ocupa um ponto ideal entre geométrica e humanista — mais quente que Inter, menos formal que Helvetica. Seu calor neutro combina com o fundo off-white e o texto marrom-escuro. O padrão de nome de arquivo com hash (Graphik-af49fcca2967e850) indica otimização de fontes do Next.js, garantindo renderização consistente entre plataformas que fontes do sistema não conseguem garantir.

O título em 55px/peso 600 com line-height de 1.15 é notavelmente mais acessível do que os line-heights monumentais de 1.0 vistos em marcas como Rivian ou Obsidian. O letter-spacing negativo mantém uma proporção consistente de -1% entre tamanhos (-0.55px em 55px, -0.38px em 38px), criando um aperto proporcional em vez de valores arbitrários.

Para SwiftUI, o sistema de texto baseado em opacidade se traduz de forma limpa:

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))
}

Lições de Design

Contenção é uma vantagem competitiva. A cor de marca única do Todoist obriga cada elemento vermelho a ser significativo. Quando concorrentes usam três ou quatro cores de destaque, nada se destaca. Quando o Todoist usa uma, o CTA é inconfundível.

Fundos off-white quentes mudam o registro emocional. A diferença entre #FFFFFF e #FEFDFB é de três pontos RGB — quase imperceptível isoladamente, mas transformadora no conjunto. O fundo quente faz toda a experiência parecer convidativa e humana. Branco clínico faz interfaces parecerem ferramentas. Off-white quente faz com que pareçam espaços onde você quer estar.

Hierarquias de opacidade são mais harmoniosas que escalas de cinza. Cinco níveis de uma cor base criam coesão sem esforço porque cada elemento de texto compartilha a mesma matiz. Cinco valores diferentes de cinza (ex.: #333, #666, #999, #CCC, #EEE) criam uma discordância sutil porque cada um é uma cor diferente, não apenas uma intensidade diferente.

Evite sombras quando espaçamento e cor resolvem. O Todoist prova que uma hierarquia visual inteira pode funcionar sem drop shadows. O CTA vermelho é proeminente porque é a única cor saturada em uma tela quente e suave — não porque flutua acima da superfície. Essa abordagem envelhece melhor e renderiza de forma mais consistente entre dispositivos.

Evite dark mode no marketing quando o calor é a marca. A tela off-white quente é a identidade do Todoist. Dark mode existe no app (onde sessões longas o tornam prático), mas o site de marketing é sempre claro. A lição: se o calor é central para a sua marca, proteja-o nas suas superfícies mais visíveis.

Evite extremos tipográficos da moda. Sem texto display de 100px+, sem tracking negativo extremo, sem peso 800. Graphik em 600 é o máximo de ousadia. Essa contenção significa que o design não se data — parecia adequado cinco anos atrás e parecerá adequado daqui a cinco anos.

Perguntas Frequentes

O que faz o design do Todoist parecer “inevitável” em vez de “projetado”?

Dezessete anos de refinamento contínuo. Cada elemento sobreviveu a múltiplas tendências de design sem ser substituído por algo mais na moda. O fundo off-white quente, o único acento vermelho, a hierarquia de texto baseada em opacidade e a tipografia Graphik não são escolhas da moda — são escolhas duráveis que se provaram ao longo de quase duas décadas. Quando nada parece adicionado ou tendencioso, o design parece inevitável.

Como funciona a hierarquia de texto baseada em opacidade do Todoist?

Todo o texto na página usa uma única cor — rgb(37,34,30), um marrom-escuro quente — em cinco níveis de opacidade: 100% para títulos, 66% para texto corrido, 49% para legendas, 18% para bordas e 7% para tons de fundo. Como cada elemento compartilha a mesma matiz base, a hierarquia parece naturalmente coesa sem exigir uma paleta de diferentes valores de cinza.

Por que o Todoist usa apenas uma cor de marca?

A contenção é a estratégia de design. Ao restringir o vermelho (#E34432) ao botão de CTA e aos momentos de marca, o Todoist garante que o olhar vá exatamente onde precisa. Nenhum acento secundário compete por atenção. A disciplina de uma única cor de marca também simplifica a consistência entre plataformas — o mesmo vermelho funciona de forma idêntica na web, iOS, Android, Mac e Windows sem a necessidade de um sistema de cores complexo.

O que designers podem aprender com a abordagem do Todoist para recursos de IA?

O recurso de IA do Todoist, “Ramble”, transforma entrada de voz em tarefas estruturadas, em vez de introduzir um chatbot ou um novo paradigma de interação. A lição é que a IA deve servir fluxos de trabalho existentes, não criar novos. O design reforça isso mantendo a entrada em linguagem natural como o elemento mais proeminente — digite ou fale uma frase, e o sistema faz a interpretação. Sem branding de IA, sem balões de chat, sem novidade por si só.

Como o Todoist alcança hierarquia visual sem sombras?

Através de cor e espaçamento apenas. O fundo off-white quente (#FEFDFB) fornece uma tela sutil. O único CTA vermelho é proeminente porque é a única cor saturada em toda a paleta. A hierarquia tipográfica vem de variações de tamanho e opacidade de uma única cor base. A diferenciação de seções usa mudanças suaves para superfícies verdes (#F4FBF7) ou verde-sálvia (#F6FAEB). O resultado é um design flat e coeso que envelhece bem e renderiza de forma consistente em todos os dispositivos.

Referências