Abrir protótipo ↗Uma experiência de trade.
Uma órbita mais simples.
Protótipo de alta fidelidade baseado no wireframe, no relatório de comportamento e nas suas referências. OrbiCash une a ideia de órbita ao universo financeiro de Cash. ORB permanece como símbolo provisório do token.
01 / A decisão de design
Azul acinzentado, lima intenso e vidro
OrbiCash electricCards com gradientes, ruído fino, bordas iluminadas e ícones SVG. Swap empilhado com inversão central.
Papel, branco e contraste suave
Paper lightUma leitura mais próxima das referências claras de carteira. Superfícies brancas e gráfico discreto.
Menta, petróleo e títulos editoriais
Studio mintProporção mais equilibrada no desktop, raios menores e títulos em serifada.
O controle “Direção” no topo do protótipo alterna entre as três variações.
Logo oficial e navegação
Marca oficial aplicada em SVG. No desktop, 11 destinos em três grupos no sidebar fixo, com Auto trade e pacotes em segundo lugar, com rolagem independente e atalhos de depósito e saque. Perfil, Verificação e Segurança aparecem como três abas em Configurações. Valores financeiros em peso 700, com algarismos tabulares.
Configurações · três abas
Convidar · vidro verde
Botão de convite
Gradiente verde, borda clara, reflexo interno e brilho leve que atravessa a superfície. Abre diretamente o convite para a rede, com link demonstrativo, ação de copiar e atalho para Sua rede.
Ver prévia do convite ↗ Para Figma, use a prancha de componentes e recrie o reflexo com Smart Animate. O movimento é removido quando o usuário prefere menos animação.
02 / Reconstruir no Figma
- Crie páginas: Foundations, Components, Mobile, Desktop e Flows.
- Importe orbit-components.svg para obter formas e textos editáveis. O SVG não cria componentes Figma automaticamente.
- Use orbit-design-tokens.json como referência para Variables e estilos. A importação automática requer plugin compatível com o formato.
- Crie frames de 390 × 844 e 1440 × 1000. Use Auto Layout e constraints; copie medidas do CSS.
- As prévias PNG registram a versão visual anterior, com o nome Orbit. Use os links abaixo para inspecionar as telas atuais da OrbiCash. PNG não possui camadas editáveis.
- Adicione o bot PNG e os SVGs em assets/icons. O elemento orbit-plasma-orb.svg tem animação no navegador. O Figma importa o desenho estático; recrie o movimento com Smart Animate.
Este pacote prepara o handoff. Não contém um arquivo .fig nem uma conversão automática de todas as telas em camadas.
03 / Catálogo de telas
01 / splashSplash ↗
Marca e transição leve
02 / welcomeBoas-vindas ↗
Entrada, cadastro e demo
03 / signupCadastro ↗
Nome, e-mail, senha e aceite demo
04 / loginLogin ↗
E-mail, senha e recuperação
05 / recoveryRecuperar senha ↗
Resposta neutra de confirmação
06 / mfaVerificação 2FA ↗
Código inválido e conclusão
07 / homeInício ↗
Saldo, compra, venda, bot e calendário
08 / tradeTrade ↗
Compra, venda, troca e arbitragem
08B / SWAPSwap ↗
Venda e compra empilhadas, inversão central e evolução do ativo.
09 / walletCarteira ↗
Saldos, liquidez e rebalanceamento
10 / tokenToken ORB ↗
Receber, transferir, converter e sacar
11 / botAuto trade ↗
Pacotes, ativar, pausar e retomar
12 / resultsResultados ↗
Calendário, histórico e exportação
13 / connectionsCorretoras ↗
Conectar, testar e remover
14 / opportunitiesOportunidades ↗
Spread líquido e simulador
15 / moreConta e menu ↗
Acessos secundários e saída
16 / networkRede ↗
Convites e comissões
17 / kycVerificação ↗
Upload e validação de arquivo
18 / securitySegurança ↗
2FA e revogação de sessão
19 / settingsConfigurações ↗
Kill switch, teto, margem e perda diária
20 / emptyVazio ↗
Sem atividade e próximo passo
21 / loadingCarregamento ↗
Estado de espera
22 / errorErro ↗
Falha ao atualizar e retry
23 / offlineOffline ↗
Sem conexão e recuperação
04 / Fluxos e estados
Revisão V2 / Electric glass
Verde #B2FF00, fundo azul acinzentado, vidro, ruído SVG e plasma. Os gráficos têm curvas neon, gradiente e seleção de pontos. O swap aceita inversão, 50%, máximo, revisão e confirmação simulada.
| Fluxo | Estados desenhados | Decisão de UX |
|---|---|---|
| Entrar / cadastro | Boas-vindas, formulários, recuperação, 2FA | Próximo passo explícito, validação e resposta neutra |
| Trade | Preencher → revisar → confirmar → histórico | Saldo virtual, taxas e ambiente sempre visíveis |
| Transferir / sacar | Destino → valor → revisão → sucesso | Transferência interna separada de endereço externo |
| Bot | Pacote → limites → ativação → pausa | Comprar pacote não inicia operações |
| Calendário | Mês atual, mês anterior, dia, lista mensal | Ganho, perda e sem operação; futuro não interativo |
| Conexões / KYC | Formulário, teste, remoção, arquivo inválido | Sem segredos ou documentos enviados pelo protótipo |
| Globais | Vazio, carregamento, erro, offline, toast | Feedback acionável, sem perda da navegação |
05 / Leitura crítica dos arquivos de origem
- Dez abas inferiores excedem a capacidade de navegação confortável no celular. A proposta mantém cinco atalhos no mobile, com Pacotes em segundo lugar, e agrupa Perfil, Verificação e Segurança em Configurações.
- O wireframe corta conteúdo com alturas fixas e overflow oculto. O protótipo usa rolagem natural e navegação persistente.
- Há uma expressão de template não processada na tela do simulador. A nova composição apresenta dados completos.
- O relatório descreve resultados e configurações ainda sem integração. Os novos estados são demonstrativos.
- O QR visual da prévia original é um padrão decorativo. A proposta reserva a área de QR e sinaliza indisponibilidade até existir um payload válido.
- Token, auto trade e operações financeiras novas precisam de definição de produto e backend; não são assumidos como recursos existentes.
06 / Prévia mobile e desktop
13/10/2026 · Protótipo com dados ilustrativos. Código, bot e componentes estão no mesmo diretório para manter o pacote portátil.