Vammo · Design System
A fundação que sustenta toda a engenharia.
De zero a 100%. A base de tokens, componentes e padrões que padronizou o produto Vammo, convertendo handoff em horas de engenharia economizadas e sustentando milhões de trocas de bateria.
O contexto
Cada tela nascia do zero.
A Vammo crescia rápido, e o design não acompanhava. Sem uma base comum, cada nova tela reinventava botões, cores e espaçamentos; o handoff virava uma troca infinita de perguntas entre design e engenharia. Ficou claro que o gargalo não era desenhar telas: era a ausência de uma fundação.
A estratégia
Comecei pela fundação de maior frequência, o que aparece em quase toda tela.
Tokens de cor e tipografia como fonte única de verdade, e os componentes mais usados resolvidos com todos os estados antes de cobrir casos raros. Profundidade sobre amplitude.
Componentes
Todos os estados, antes de todas as telas.
Cada componente nasceu completo: default, hover, focus, disabled, loading e erro, documentados antes de qualquer tela usá-los. O custo extra no início se paga em cada handoff: a engenharia não pergunta “e quando der erro?”, porque a resposta já está no sistema.
Adoção e impacto
Um sistema só vale se for usado.
Mais do que uma biblioteca no Figma, o sistema virou o vocabulário comum entre design, produto e engenharia, do app do cliente ao backoffice da operação. Novas telas passaram a nascer montadas, não desenhadas.
