GALERIA VISUAL • 2026
Sistema de design
Uma biblioteca de componentes e padrões de interação no Figma, com documentação e correspondência com o que Engenharia usava no produto.
SISTEMA EM USO • 01
Do fundamento à aplicação no produto
Veja como cores, componentes e estados se combinam em formulários e fluxos da Neofin.
NEOTINE • FUNDAMENTOS INTERATIVOS
Como os fundamentos mudam a interface.
Altere as cores, os espaçamentos e os cantos para comparar o resultado.
Cores semânticas
Espaçamento
Raio
Um sistema previsível
Os mesmos tokens orientam diferentes componentes e contextos.
Fundamentos compartilhados
Cores, tipografia, espaçamento e forma criam uma linguagem comum para diferentes fluxos e contextos da plataforma.
NEOTINE • TEXT INPUT
Um campo, múltiplos contextos.
Escolha um estado e digite no campo para ver as instruções e mensagens de erro.
Arquitetura
Estado do componente
Endereço usado para acessar sua conta
Use um endereço válido
Arquitetura do Text Input
O campo combina rótulo, área de preenchimento e mensagem de erro. Cada parte ajuda a entender o que informar e como corrigir um problema.
NEOTINE • ECOSSISTEMA
Componentes para cada etapa da tarefa.
Escolha uma família e experimente os componentes.
Família de componentes
Um ecossistema de componentes
Os componentes estão agrupados por uso, como entrada de dados, ações e navegação, para facilitar a escolha de cada peça.
NEOTINE • COMPORTAMENTO
O que muda em cada estado.
Escolha um componente e compare como ele aparece em uso, com erro ou desabilitado.
Componente
Estado
botao • normal
Estados e comportamentos
Os estados mostram quando uma ação está disponível, em andamento ou precisa de correção.
NEOTINE • COMPOSIÇÃO
Um formulário com as peças da biblioteca.
Preencha o formulário e avance para ver as mensagens de orientação e confirmação.
Componentes trabalhando juntos
O formulário reúne campos, seleções e ações com instruções e mensagens que ajudam a concluir o preenchimento.
NEOTINE • DESIGN E CÓDIGO
O componente no design e no código.
Altere as propriedades e veja o que muda na interface e no exemplo de código.
Tamanho
Estado
<TextInput
label="E-mail"
description="Endereço usado para acessar sua conta"
size="md"
state="default"
required
leftSection={<Mail />}
/>Design e código conectados
Propriedades e tokens equivalentes reduzem a tradução no passagem para desenvolvimento e aproximam a biblioteca visual da API usada por Engenharia.
NEOTINE • PRODUTO REAL
Experimente os componentes em um acordo.
Altere as condições de pagamento e acompanhe os valores no resumo do acordo.
Aplicação em contexto
Confira as condições antes de confirmar.
O formulário reúne as condições de pagamento e mostra como elas afetam o valor do acordo.
famílias combinadas
linguagem compartilhada
Aplicação no produto
No fluxo de acordo, os componentes ajudam a preencher as condições e conferir os valores antes da confirmação.