Uma linguagem compartilhada para times que entregam em velocidade. Como construímos o sistema de componentes do Forge — e por que a decisão mais importante foi antes do primeiro pixel.
O Forge era um app de gestão de projetos com 4 times de produto e nenhuma linguagem compartilhada. O resultado aparecia todo sprint.
Cada time reinventava a roda. Um botão primário tinha 7 variações em produção. Inputs com 4 alturas diferentes. Cards com 3 estilos de sombra. Nada estava errado individualmente — o problema era sistêmico.
O custo não era visual. Era de velocidade. Designers gastavam 40% do tempo replicando componentes em vez de resolver problemas. Devs questionavam qual versão implementar. QA reportava inconsistências que ninguém sabia de onde vieram.
A solução não era "deixar bonito." Era criar uma única fonte de verdade que qualquer time pudesse usar, estender e confiar.
12 variações de button primário encontradas em produção antes do sistema
40% do tempo de design gasto replicando componentes existentes
3.1h tempo médio de handoff por componente novo
68% dos bugs visuais reportados eram inconsistências de componentes
2–3 ciclos extras de revisão por entrega com inconsistência
Tokens são o contrato entre design e código. Antes de construir qualquer componente, definimos os valores primitivos que governam toda decisão visual.
Cada componente documenta todos os estados. À esquerda, os estados isolados. À direita, o componente em uso real dentro do produto.
Componentes compostos são construídos inteiramente com atômicos. A consistência emerge do sistema, não de cada decisão individual.
Tem certeza que deseja excluir o projeto Forge v2? Esta ação é permanente e não pode ser desfeita. Todas as 47 tasks e histórico serão removidos.
Telas completas construídas exclusivamente com componentes Forge. Nenhuma decisão visual fora do sistema.
O componente de input atual usa valores hardcoded que não refletem os tokens definidos. É necessário migrar para variáveis CSS com todos os estados: default, focus, error e disabled. Incluir variações com label, helper text e ícone interno.
Medidos em 3 meses pós-adoção, comparando com o trimestre anterior ao sistema.
Principal aprendizado: O maior ganho não foi visual. Foi de confiança. Quando o time sabe que pode referenciar o sistema em vez de reinventar, as conversas mudam de "qual versão usar?" para "o que estamos tentando resolver?". Sistemas liberam espaço cognitivo para o que importa.
Posso detalhar o processo de token architecture, como conduzimos a adoção pelos times, ou a estratégia de documentação viva.