Drafts: Clareza Utilitária para Captura com Foco em Texto
“Where Text Starts” — Drafts
A maioria das ferramentas de captura de texto obriga você a decidir onde algo pertence antes mesmo de ter escrito — qual app de notas, qual documento, qual conversa de mensagens. O Drafts, construído e mantido pelo desenvolvedor solo Greg Pierce, inverte isso completamente: abra o app, comece a digitar, decida depois. Essa inversão é a tese de design do produto, e toda decisão visual e de interação decorre dela.
Principais Conclusões
- O lançamento em tela em branco elimina toda a fricção - Cada abertura do app apresenta um novo rascunho vazio, sem navegação, sem seletor de arquivos e sem decisões necessárias antes da primeira tecla digitada
- Fontes do sistema são uma escolha deliberada de marca - Ao usar exclusivamente a fonte nativa da plataforma, o Drafts garante que o texto que você escreve seja a tipografia; o chrome do app permanece invisível
- Uma única cor de marca sinaliza ação - O azul da marca (#335EEA) aparece com moderação e exclusivamente em elementos interativos, criando um contrato visual confiável: se é azul, você pode tocar
- A complexidade se esconde atrás da simplicidade - Usuários básicos veem um editor de texto; usuários avançados descobrem um roteador de texto programável com suporte a JavaScript, atalhos de teclado e centenas de ações da comunidade
- Títulos com peso leve transmitem confiança discreta - Um H1 com peso 400 a 48px é incomum para páginas de marketing, mas o efeito é refinado e editorial em vez de chamativo
Por Que o Drafts Importa
O Drafts responde a uma pergunta enganosamente simples: para onde vai o texto antes de ter um destino? O app funciona como uma caixa de entrada de texto — cada trecho de texto capturado é registrado com timestamp e pesquisável, mas não categorizado por padrão. O sistema de Actions, funcionalidade definidora do Drafts, permite que você direcione o texto para qualquer lugar após escrevê-lo: para o Mensagens, para o Obsidian, para um evento de calendário, para uma issue no GitHub. Capture primeiro, direcione depois.
Principais conquistas: - Criou o paradigma de “caixa de entrada de texto” que separa captura de organização - Provou que um único desenvolvedor pode manter um app de primeira linha para iPhone, iPad, Mac e Apple Watch - Demonstrou que design nativo da plataforma (fontes do sistema, cores do sistema, controles padrão) pode ser uma vantagem competitiva em vez de uma limitação - Construiu um ecossistema próspero de actions onde a comunidade estende as capacidades do app sem que o desenvolvedor escreva código adicional
Princípios Fundamentais de Design
1. A Tela em Branco
Cada abertura do app apresenta um novo rascunho vazio. Sem tela de navegação, sem lista de arquivos recentes, sem diálogo “o que você deseja fazer?”. Apenas um cursor e o teclado. Essa é a inovação central de UX — reduzir a fricção a zero absoluto para captura de texto.
A implicação de design é significativa: o estado mais comum do app é vazio. Enquanto a maioria dos apps investe seu melhor trabalho de design em estados preenchidos (dashboards, feeds, galerias), o Drafts investe na página em branco. O estado vazio não é uma condição de falha; é a interface principal do produto.
2. Disciplina Utilitária de Cores
A paleta de cores do Drafts é deliberadamente esparsa. A grande maioria da interface é texto escuro (#161C2D) sobre fundo branco. O azul da marca (#335EEA) aparece apenas em elementos que convidam à interação — botões, links e ícones de ação. Isso cria um contrato visual confiável: cor significa “toque aqui.”
A cor do texto em si carrega uma intenção sutil. Em vez de preto puro, o Drafts usa rgb(22,28,45) — um quase-preto com subtom azul que parece mais suave e refinado do que #000000. As cores de texto secundárias (#869AB8 e #506690) compartilham esse subtom azul, criando uma família tonal coesa:
┌──────────────────────────────────────────────────┐
│ #FFFFFF Canvas branco puro │
│ │
│ Where Text Starts │ ← #161C2D, 48px, peso 400
│ │
│ Capture primeiro, organize depois. │ ← #161C2D, 17px corpo
│ Envie para qualquer lugar com Actions. │ ← #869AB8, secundário
│ │
│ ┌──────────────┐ │
│ │ Get Drafts │ │ ← #335EEA, CTA azul da marca
│ └──────────────┘ │
│ │
└──────────────────────────────────────────────────┘
3. O Sistema de Actions como Camada de Poder
A simplicidade visual do Drafts esconde uma profundidade notável. O sistema de Actions adiciona uma grade de botões iconográficos, cada um representando um destino diferente de roteamento de texto. Esses ícones de ação são a assinatura visual do app: pequenos, precisos e codificados por cor por categoria usando as cores de sistema da Apple.
| Categoria | Cor | Finalidade |
|---|---|---|
| Padrão | System Blue | Compartilhamento e ações do sistema |
| Verde | System Green | Conclusão e sucesso |
| Laranja | System Orange | Importante ou cauteloso |
| Vermelho | System Red | Ações destrutivas |
| Roxo | System Purple | Ações personalizadas criadas pelo usuário |
| Azul-petróleo | System Teal | Exportação e integração |
Ao adotar o sistema de cores semânticas da Apple em vez de inventar uma paleta proprietária, as cores das actions parecem nativas em cada plataforma enquanto fornecem agrupamento categórico claro.
4. Nativo da Plataforma por Convicção
O Drafts não busca novidade visual. Sem fontes customizadas, sem tema escuro como identidade de marca, sem heróis animados de marketing. Fontes do sistema, cores do sistema, controles padrão. O app parece pertencer a cada plataforma em vez de usar um disfarce multiplataforma.
Esse compromisso se estende à tipografia. O texto corpo de 17px corresponde ao tamanho padrão de corpo da Apple no iOS. A renderização de fontes do sistema (SF Pro nas plataformas Apple) proporciona clareza óptica que fontes web customizadas frequentemente não conseguem igualar em tamanhos pequenos. O resultado é um app onde o texto que você digita é indistinguível em qualidade do texto que o OS renderiza — porque usam a mesma fonte.
5. Interação com Teclado em Primeiro Lugar
O Drafts foi projetado para pessoas que não querem tirar as mãos do teclado. As Actions podem ser acionadas via atalhos de teclado. A linha de teclado personalizada no iOS estende o teclado padrão com teclas programáveis. No Mac, o sistema completo de atalhos de teclado significa que usuários avançados podem capturar, processar e direcionar texto sem jamais tocar no mouse.
Essa filosofia de teclado em primeiro lugar não exclui usuários de mouse ou toque — toda action tem um equivalente tocável. Mas o caminho pelo teclado é sempre o caminho mais rápido, e essa prioridade molda cada decisão de interação.
Padrões Transferíveis
A linguagem de design do Drafts é uma aula magistral em clareza utilitária. O sistema de cores, tipografia e espaçamento se traduzem diretamente para qualquer aplicação focada em texto ou produtividade.
A implementação de CSS revela quão poucas propriedades customizadas são necessárias para alcançar a estética do Drafts:
:root {
/* Utilitarian palette */
--color-background: #FFFFFF;
--color-bg-secondary: #003471;
--color-text: #161C2D;
--color-secondary: #869AB8;
--color-muted: #506690;
--color-brand: #335EEA;
--color-surface: #F5F5F7;
--color-border: #D2D2D7;
/* Minimal shadows */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-focus: 0 0 0 3px rgba(51, 94, 234, 0.25);
/* System font stack */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* Light-weight editorial headline */
h1 {
font-size: 48px;
font-weight: 400;
letter-spacing: -0.96px;
line-height: 1.2;
color: var(--color-text);
}
/* Apple-native body size */
body {
font-family: var(--font-sans);
font-size: 17px;
line-height: 27.2px;
color: var(--color-text);
}
Observe o H1 com peso 400 — um afastamento deliberado dos pesos 600-800 que dominam páginas de marketing. O letter-spacing de -0.96px (exatamente -2% do tamanho da fonte) comprime o título para uma qualidade editorial. Essas pequenas escolhas se acumulam em uma estética geral de confiança discreta.
Para SwiftUI, a mesma filosofia produz um editor de texto que prioriza a área de conteúdo acima de tudo:
extension Color {
static let draftsText = Color(red: 22/255, green: 28/255, blue: 45/255)
static let draftsBrand = Color(red: 51/255, green: 94/255, blue: 234/255)
static let draftsSecondary = Color(red: 134/255, green: 154/255, blue: 184/255)
static let draftsSurface = Color(red: 245/255, green: 245/255, blue: 247/255)
}
struct DraftsEditorView: View {
@State private var text = ""
var body: some View {
TextEditor(text: $text)
.font(.body)
.foregroundStyle(Color.draftsText)
.scrollContentBackground(.hidden)
.padding()
}
}
A view do editor de texto não tem barra de ferramentas por padrão, sem faixa de formatação, sem barra lateral. Apenas um cursor e seus pensamentos. O chrome é recolhível ou auto-oculto. Isso não é minimalismo por razões estéticas — é uma expressão direta do princípio do produto de que o texto que você está escrevendo é sempre a coisa mais importante na tela.
Lições de Design
O Drafts ensina que convenções de plataforma não são restrições, mas vantagens. Ao confiar nas fontes do sistema, cores do sistema e controles padrão, Greg Pierce se libera de manter um sistema de design customizado e seus usuários de aprender uma nova linguagem visual. O app parece imediatamente familiar em todas as plataformas Apple.
O padrão de tela em branco é transferível para qualquer ferramenta orientada à captura. Se o propósito principal do seu produto é tirar algo da cabeça do usuário rapidamente, remova todos os obstáculos entre o lançamento e a entrada. Sem telas de abertura, sem diálogos de arquivos recentes, sem seletores de categoria. Apresente a superfície de entrada imediatamente.
Evite o uso excessivo de cores. Quando o azul da marca aparece apenas em elementos interativos, os usuários desenvolvem uma associação inconsciente: azul significa acionável. Esse contrato visual se quebra no momento em que você usa a cor da marca de forma decorativa. O Drafts mantém essa disciplina rigorosamente — se é azul, você pode tocar; se não é azul, é conteúdo.
Evite marketing centrado em funcionalidades. O site do Drafts lidera com um conceito (“Where Text Starts”) em vez de uma lista de funcionalidades. A filosofia vende o app; funcionalidades são secundárias. Capturas de tela do app real fazem a venda, não renders animados ou mockups 3D.
Perguntas Frequentes
O que torna o design do Drafts distintivo?
O design do Drafts é definido pelo que ele remove, não pelo que adiciona. A tela em branco ao abrir, a tipografia exclusivamente do sistema e o acento de cor única criam uma interface que parece invisível até você precisar que ela seja poderosa. O sistema de Actions adiciona profundidade sem adicionar complexidade visual — recursos avançados estão a um toque de distância, mas zero toques no caminho.
Como o Drafts equilibra simplicidade com recursos para usuários avançados?
Através de revelação progressiva implementada no nível arquitetural. Um novo usuário vê um editor de texto. Um usuário intermediário descobre a gaveta de Actions com opções de roteamento pré-construídas. Um usuário avançado cria ações personalizadas com JavaScript, constrói fluxos de trabalho com atalhos de teclado e estende o app através do Action Directory da comunidade. A complexidade visual escala com o investimento do usuário.
Por que o Drafts usa fontes do sistema em vez de uma tipografia personalizada?
O texto que você escreve no Drafts é a identidade visual do produto — não o chrome do app ao redor dele. Uma tipografia personalizada competiria com o conteúdo do usuário e introduziria inconsistências de renderização entre plataformas. Ao usar SF Pro em dispositivos Apple e a stack do sistema em outros, o Drafts garante que a experiência de edição pareça nativa e o foco permaneça nas palavras do usuário.
O que é o paradigma “caixa de entrada de texto”?
Apps de notas tradicionais exigem que você escolha um destino (pasta, caderno, tag) antes de escrever. O Drafts inverte isso tratando cada novo trecho de texto como um item de caixa de entrada — com timestamp, pesquisável, mas sem categoria. Após escrever, você usa Actions para rotear o texto ao seu destino final. Essa separação entre captura e organização elimina a fricção que mata ideias espontâneas.
Como a abordagem de cor única do Drafts afeta a usabilidade?
Ao reservar o azul da marca (#335EEA) exclusivamente para elementos interativos, o Drafts cria um contrato visual inconsciente: se algo é azul, é tocável. Essa consistência reduz a carga cognitiva e elimina a adivinhação que os usuários experimentam em interfaces onde a cor é usada de forma decorativa. A contenção também torna os poucos elementos coloridos mais perceptíveis, melhorando a descobribilidade.
Referências
- Drafts — Página oficial e visão geral do produto
- Drafts Action Directory — Ações construídas pela comunidade para rotear texto a centenas de destinos
- Drafts Documentation — Guia completo do usuário e referência de recursos
- Drafts Scripting Reference — Documentação de JavaScript API para ações personalizadas
- Agile Tortoise — Estúdio de desenvolvimento de Greg Pierce
- MacStories Review — Análise abrangente do Drafts 5 por Federico Viticci