Leooz

GALERIA VISUAL • 2026

Design System

Componentes, padrões de interação e documentação alinhados à biblioteca de interface usada por Engenharia.

FIGMASYSTEMSFRONT-END
Tela do projeto Design System

SISTEMA EM USO • 01

Do fundamento à aplicação no produto

Uma seleção editorial mostra como tokens, componentes, estados e padrões se combinam para sustentar experiências complexas com mais consistência.

Fundamentos do Neotine com cores semânticas, tipografia, espaçamentos e raios de borda
01

Fundamentos compartilhados

Cores, tipografia, espaçamento e forma criam uma linguagem comum para diferentes fluxos e contextos da plataforma.

Arquitetura e estados essenciais do componente Text Input
02

Arquitetura do Text Input

Label, Input e Error formam uma arquitetura modular que preserva contexto, interação e recuperação em diferentes estados.

Famílias de componentes de entrada, ação, navegação e feedback do Neotine
03

Um ecossistema de componentes

A biblioteca organiza responsabilidades recorrentes em famílias coerentes, especializadas e combináveis.

Comparação de estados de botões, switches, radios e campos de texto
04

Estados e comportamentos

Interação, espera, indisponibilidade e recuperação seguem contratos previsíveis em toda a experiência.

Formulário composto com campos, seleção, checkbox e ações do Neotine
05

Componentes trabalhando juntos

Em uma tarefa completa, diferentes peças preservam hierarquia, ritmo, orientação e feedback sem competir pela atenção.

Relação entre propriedades de componentes no Figma e implementação em React
06

Design e código conectados

Propriedades e tokens equivalentes reduzem a tradução no handoff e aproximam a biblioteca visual da API usada por Engenharia.

Aplicação dos componentes do Neotine em um fluxo real de acordo da plataforma Neofin
07

Aplicação no produto

Inputs, seleção, superfícies, feedback e ações sustentam uma operação financeira densa sem tornar a interface mais difícil de usar.