UseCtt

O CTT nasceu como um painel pessoal ligado ao Strava: gráfico de volume, gráfico de ritmo, tabela de recordes. Funcionava, mas não dizia nada que o próprio Strava já não dissesse. Era mais um dashboard.

A pergunta que mudou o projeto foi o que seria útil para um corredor que gosta de dados. A resposta não era mais um gráfico: era contexto. Quando o hábito começou, quando o volume subiu, onde a forma caiu e quanto tempo levou para voltar. Coisas que ficam espalhadas num feed que ninguém relê.

O projeto também tinha um segundo objetivo: pôr em prática o fluxo entre Figma e Claude para gerar código e levar um produto até produção com dados reais, não com uma API de exemplo.

O primeiro protótipo no Figma Make já tinha uma boa direção visual, mas continuava organizado por tipo de gráfico: um bloco de volume, um de forma, um de recordes. A versão final é organizada pela história. Cada seção é um trecho da prova, e o gráfico só aparece quando ajuda a contar aquele trecho.

A leitura acompanha uma prova de 42 km. Uma barra no topo mostra em que quilômetro você está, e cada capítulo abre com um marcador de KM. Só dois capítulos saem do fundo claro: o muro, em preto, e a chegada, em ultramar.

Os textos não foram escritos para mim: saem dos dados. Cada capítulo escolhe o próprio fato a partir dos dados de quem conectou: o ano em que o hábito começou, o ano de maior volume, a maior queda de forma e a melhor maratona. Se um atleta não tem dado suficiente para um capítulo, ele simplesmente não aparece.

Papel, tinta e um ultramar. A referência veio de marcas de corrida como Bandit e On: muito fundo claro, texto quase preto e um único acento. A primeira versão era laranja, e foi a primeira coisa que saiu, porque laranja lembra o próprio Strava. O ultramar ficou no lugar e ganhou uma regra: ele marca o que importa (recorde, pico, prova, estado ativo) e nunca decora.

As cores são tokens por função, como fundo, texto, borda e gráfico. Por isso o mesmo componente funciona no capítulo claro, no preto do muro e no ultramar da chegada sem precisar de uma versão para cada um.

Números grandes, texto calmo. Barlow Condensed em caixa alta para números e títulos: é a imagem da página, como um número de peito. Archivo para ler, Geist Mono para rótulos e eixos, e Caveat só nas anotações à mão, como "quase todo dia" escrito sobre a foto.

A ideia inicial era usar a própria Archivo mais estreita nos títulos, pelo eixo de largura. Só que esse ajuste não passava do Figma para o código com fidelidade, e o sistema precisava ser o mesmo nos dois lados. A troca pela Barlow Condensed resolveu isso sem perder o caráter.

Os recordes dividem uma mesma escala de ritmo, então dá para comparar as quatro distâncias de relance. O recorde mais recente ganha o bloco em ultramar, com o tempo anterior riscado logo acima.

A chegada é o único capítulo inteiro em ultramar: o tempo da maratona em tamanho de pôster, as 16 semanas de preparação em barras e a diferença para a prova anterior.

O CTT deixou de ser um painel genérico e virou um produto com ponto de vista: qualquer corredor conecta o Strava e recebe a própria história, contada como uma prova, com um card pronto para compartilhar.

Está no ar em beta, com dez vagas. Se você corre, conecte sua conta e me conte o que achou.