Mockup de UI de Painel de Trading de Criptomoedas Fintech Premium

Você é um designer de UI experiente que adota design moderno, minimalista, sombras, vidro e cores suaves. Seu papel é criar um mockup profissional e bonito pronto para entrega com base nestes requisitos: <requirements> ## 1. Estilo Geral e Linguagem Visual Esta interface representa um painel premium e moderno de fintech / trading de criptomoedas usando tema escuro. A linguagem visual combina **neumorfismo suave** e **estética Web3 de luxo**. Características principais: - Destaques quentes dourados/laranja - Paleta monocromática com efeitos e sombras minimalistas - Layout baseado em cartões com profundidade e fundos sutis - Bordas mínimas, separação via sombras ou fundos claros Percepção alvo: - Seguro - Profissional - De alta qualidade / grau institucional - Otimizado para traders experientes --- ## 2. Estrutura de Layout ### Layout Global - Painel focado em desktop - Proporções de saída: 3:2 - Três regiões principais: 1. Barra de navegação superior (horizontal) 2. Barra lateral de navegação esquerda (vertical) 3. Área de conteúdo principal (grade de cartões de múltiplas colunas) O espaçamento é generoso, priorizando clareza e respiro visual. --- ## 3. Barra de Navegação Superior - Altura: 72px - Esquerda: - Texto do logotipo da marca "Mevolut" - "M" estilizado - Destaque dourado/laranja - Centro: - Links de navegação: Painel, Segurança, Indicação, Taxas de trading, Gerenciamento de API - Direita: - Link de ordens - CTA principal: "Depositar" (botão pílula dourado) - Avatar do usuário (circular) - Alternador de tema (ícone de lua) Tipografia: - Sans-serif limpa - Peso médio - Texto primário branco, estados inativos cinza suave --- ## 4. Barra Lateral de Navegação Esquerda - Largura: 240px - Fundo: quase preto - Itens de navegação verticais com ícones: - Painel (ativo) - Segurança - Indicação - Taxas de trading - Gerenciamento de API - Alinhado na parte inferior: - Configurações Item ativo: - Destaque de fundo sutil - Tonalidade de fundo leve - Contêiner arredondado Ícones: - Estilo contorno - Destaque dourado no estado ativo --- ## 5. Área de Conteúdo Principal ### 5.1 Cartão de Visão Geral do Usuário - Cartão grande arredondado no topo - Esquerda: - Avatar circular - Texto de saudação ("Olá…") - Nome do usuário - Blocos de informações inline: - UID (ícone de copiar) - Status de verificação de identidade - Nível de segurança - Fuso horário - Carimbo de último login - Direita: - Alternador "Ocultar informações" Estilo: - Sombras internas sutis --- ### 5.2 Cartão de Depósito / Compra - Cartão de tamanho médio - Texto de título explicando opções de depósito - Duas linhas de ação: - Depositar (dólares ou cripto) - Comprar ações (moeda local) - Cada linha: - Ícone - Rótulo - Botão de ação de seta (destaque dourado) --- ### 5.3 Cartão de Ativos Totais - Exibe saldo em USD e equivalente em USD - Marca d'água grande e desbotada do símbolo de dólar no fundo - Abas de ação: - Comprar ações - Depositar - Retirar - Valores numéricos são grandes --- ### 5.4 Cartão de Nível VIP - Mostra o nível VIP atual - Taxas de spot e futuros - Barra de progresso para participações em tokens - Link "Ver mais" Barra de progresso: - Arredondada - Trilha de fundo escura --- ### 5.5 Tabela de Participações Atuais - Cartão contendo layout de tabela - Colunas: - Moeda (ícone + nome) - Preço - Mudança 24h - Tendência 4h (sparkline) - Ações (Depositar, Retirar, Negociar) Sparklines: - Verde para tendência positiva - Vermelho para tendência negativa Hover: - Destaque de fundo sutil por linha --- ### 5.6 Cartão do Programa de Afiliados - Cartão promocional - Ilustração de moeda dourada - Descrição curta e botão CTA ("Aplicar agora") --- ### 5.7 Cartão de Informações / Notícias - Lista vertical de anúncios - Manchete + carimbo de tempo - Link "Ver mais" no topo --- ## 6. Paleta de Cores - Fundo principal: carvão profundo / preto - Superfícies de cartões: ligeiramente mais claras - Cor de destaque: dourado quente - Hierarquia de texto: - Branco (primário) - Cinza suave (secundário) - Cinza escuro (desabilitado) - Cores de status: - Verde para positivo - Vermelho para negativo --- ## 7. Efeitos e Interação - Cantos arredondados em todo (sm) # Design tokens: { // Definição global do tema "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Medidas e estrutura do layout "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistema de cores "colors": { "background": "#0B0D10", // Fundo principal do aplicativo "primaryAccent": "#F5A623", // Destaque dourado/laranja "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Escala tipográfica "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // Componentes principais de UI "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Sistema de ícones "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>