O Capta é um SaaS de captação e gestão de leads que eu projetei e construí. Quando o produto passou de cinco para vinte telas, a cor e o espaçamento começaram a divergir de uma para outra. Extraí o que se repetia num único arquivo-base e transformei decisões soltas em regras com nome, para que a vigésima tela nascesse igual à primeira.
As primeiras telas do Capta nasceram uma de cada vez, resolvendo um problema por vez: funil, leads, agenda, inbox. Cada uma trouxe o próprio azul, a própria altura de botão, o próprio cinza de borda. Nenhuma delas estava errada sozinha. Juntas, pareciam quatro produtos.
O custo apareceu na manutenção. Trocar o azul da marca virava uma caçada em vários arquivos. Uma tabela nova saía diferente da antiga. E o pior: um ajuste de legibilidade feito numa tela não chegava às outras, então o mesmo erro era corrigido três vezes.
Extraí as decisões de cor, raio e sombra para variáveis no topo de um arquivo único, que toda tela carrega antes do que é dela. Além das cores de marca e de superfície, o Capta tem um grupo que não é decorativo: a temperatura do lead.
--brand · #2E5BFF--brand-deep--bg · #F4F6FB--ink · #141A2E--muted--quente--morno--frio--verdeCada cor de temperatura vem com o próprio fundo translúcido, para servir de etiqueta sem virar mancha.
A regra que ficou: vermelho, âmbar e azul não são estilo, são estado. Quente quer dizer que a pessoa pediu aula experimental; frio quer dizer que ela só estava pesquisando. Quem abre qualquer tela do produto lê a mesma cor com o mesmo significado, e a equipe passou a falar por cor no dia a dia.
Inter, sete tamanhos, nada entre eles. Raio de 16px nos cartões, 9 a 10px nos controles, 99px nas etiquetas. Uma sombra só, usada em tudo que flutua.
O arquivo-base cobre o que aparece em praticamente toda tela: botões, cartões, contadores, tabelas, etiquetas, campos, chips, estados vazios e avisos. Abaixo estão os componentes reais, com o mesmo código que roda no produto.
| Canal | Leads | Conversão |
|---|---|---|
| Formulário do site | 64 | 0,8% |
| 41 | 2,4% | |
| Evento | 23 | — |
Componentes renderizados com o CSS do produto, não com imagens.
Um sistema se prova nos casos difíceis. Estes são os que me fizeram voltar ao arquivo-base e mudar a regra para todo mundo.
O cinza de divisória funcionava entre linhas de tabela, mas como borda de campo desaparecia: input branco sobre fundo claro. Criei um grupo próprio de tokens para formulário, com borda mais escura, estado de foco com anel azul e estado desabilitado. Uma correção, doze telas.
A regra que fazia todo campo ocupar a largura inteira também esticava caixas de seleção e empurrava o rótulo para longe. A exceção virou regra escrita, em vez de gambiarra em cada tela.
Colunas numéricas usam alinhamento à direita e fonte tabular. Sem isso, a coluna de valores tremia a cada atualização de dados e ficava difícil comparar linhas.
Todo elemento interativo tem contorno de foco com dois pixels e afastamento. É o que permite operar o painel inteiro pelo teclado, que é como quem atende rápido de fato trabalha.
Cada tela funciona sozinha e embutida no painel. Um modo específico esconde a barra e o botão de voltar quando ela está dentro, sem duplicar arquivo nem criar uma segunda versão para manter.
Ao imprimir, somem barras e botões, as sombras saem e os cartões não quebram no meio. O relatório mensal sai do próprio painel, sem exportar para outro lugar.
Quem usa o Capta no celular é a recepção, no meio do atendimento, com uma família na frente. Em vez de espalhar consultas de mídia por doze arquivos, criei um segundo arquivo carregado por último, que ajusta todas as telas de uma vez.
Todo conjunto de cartões, campos e indicadores passa a uma coluna, e nada empurra a largura da tela.
Em vez de espremer colunas até ficarem ilegíveis, a tabela ganha rolagem horizontal e mantém cada linha inteira.
Botões e chips passam a ter altura mínima de 38 pixels, e as ações principais da recepção ficam ainda maiores.
Diálogos ocupam a largura toda, com cantos mais suaves e menos respiro lateral, como o usuário espera no celular.
O arquivo é curto de propósito: cabe numa leitura. Os nomes são em português e descrevem a função, não a aparência: janela, campo, bloco, aviso, vazio. Assim, quem chega no produto entende sem tradução.
Cada decisão difícil está comentada no próprio arquivo, com o motivo e o sintoma que a gerou. A documentação mora junto do código, porque documento separado envelhece no dia em que alguém tem pressa. E a regra de convivência é uma só: se a mesma solução aparecer em duas telas, ela sobe para a base.
É um sistema pequeno, de um produto, mantido por uma pessoa. Cobre as doze telas do painel; as telas públicas, como o site, o login e o monitor de parede, ainda têm regras próprias e são o próximo alvo. Não tem biblioteca de componentes em Figma nem versionamento por pacote, porque nesta escala isso custaria mais do que resolve.
O que ele prova é o raciocínio: identificar o que se repete, dar nome, decidir uma vez, documentar o motivo e deixar o sistema absorver a próxima tela. É o mesmo trabalho que um design system de time grande exige, na escala em que ele precisava existir.