Você é um designer de UI experiente que abraça o design moderno, minimalista, sombras, glass e cores suaves. Seu papel é criar um mockup profissional e bonito que esteja pronto para entrega com base nestes requisitos: <requirements> ## 1. Estilo Geral e Linguagem Visual Esta interface representa um dashboard de trading fintech / crypto premium e moderno usando um tema escuro. A linguagem visual combina **soft neumorphism** e **estética Web3 de luxo**. Características princips: - Destaques de acento dourado/laranja quente - Paleta de cores monocromática com efeitos minimalistas e sombras - Layout baseado em cards com profundidade e fundos sutis - Bordas mínimas, separação via sombras ou fundos claros Percepção alvo: - Seguro - Profissional - High-end / de nível institucional - Otimizado para traders experientes --- ## 2. Estrutura de Layout ### Layout Global - Dashboard desktop-first - Proporções de saída: 3:2 - Três regiões princips: 1. Barra de navegação superior (horizontal) 2. Navegação da barra lateral esquerda (vertical) 3. Área de conteúdo principal (grade multi-coluna de cards) O espaçamento é generoso, priorizando clareza e espaço visual para respirar. --- ## 3. Barra de Navegação Superior - Altura: 72px - Esquerda: - Texto do logo da marca "Mevolut" - "M" estilizado - Acento dourado/laranja - Centro: - Links de navegação: Dashboard, Segurança, Indicação, Taxas de Trading, Gerenciamento de API - Direita: - Link de Ordem - CTA primário: “Depositar” (botão pílula dourado) - Avatar do usuário (circular) - Toggle de tema (ícone de lua) Tipografia: - Sans-serif limpa - Peso médio - Texto primário branco, estados inativos cinza suave --- ## 4. Navegação da Barra Lateral Esquerda - Largura: 240px - Fundo: quase preto - Itens de navegação vertical com ícones: - Dashboard (ativo) - Segurança - Indicação - Taxas de Trading - Gerenciamento de API - Alinhado na parte inferior: - Configurações Item ativo: - Destaque de fundo sutil - Leve tom de fundo - Contêiner arredondado Ícones: - Estilo outline - Acento dourado no estado ativo --- ## 5. Área de Conteúdo Principal ### 5.1 Card de Visão Geral do Usuário - Card grande arredondado no topo - Esquerda: - Avatar circular - Texto de saudação (“Olá…”) - Nome do usuário - Blocos de info inline: - UID (ícone de copiar) - Status de verificação de identidade - Nível de segurança - Fuso horário - Timestamp do último login - Direita: - Toggle “Ocultar info” Estilo: - Sombras internas sutis --- ### 5.2 Card de Depósito / Compra - Card de tamanho médio - Texto de título explicando opções de depósito - Duas linhas de ação: - Depositar (dólares ou crypto) - Comprar ações (moeda local) - Cada linha: - Ícone - Rótulo - Botão de ação com seta (acento dourado) --- ### 5.3 Card de Ativo Total - Exibe saldo em USD e equivalente em USD - Grande símbolo de Dólar desbotado como marca d'água no fundo - Abas de ação: - Comprar ações - Depositar - Sacar - Valores numéricos são grandes --- ### 5.4 Card de Nível VIP - Mostra nível VIP atual - Taxas de spot e futures - Barra de progresso para holdings de tokens - Link “Ver ms” Barra de progresso: - Arredondada - Trilha de fundo escuro --- ### 5.5 Tabela de Holdings Atus - Card contendo um layout de tabela - Colunas: - Moeda (ícone + nome) - Preço - Mudança 24h - Tendência 4h (sparkline) - Ações (Depositar, Sacar, Negociar) Sparklines: - Verde para tendência positiva - Vermelho para tendência negativa Hover: - Destaque de fundo sutil por linha --- ### 5.6 Card de Programa de Afiliados - Card promocional - Ilustração de moeda dourada - Descrição curta e botão CTA (“Aplicar agora”) --- ### 5.7 Card de Informações / Notícias - Lista vertical de anúncios - Título + timestamp - Link “Ver ms” no topo --- ## 6. Paleta de Cores - Fundo primário: carvão profundo / preto - Superfícies de cards: ligeiramente ms claras - Cor de acento: 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 lugar (sm) # Design tokens: { // Definição do tema global "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Medidas e estrutura de layout "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistema de cores "colors": { "background": "#0B0D10", // Fundo principal do app "primaryAccent": "#F5A623", // Destaque dourado/laranja "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Escala de tipografia "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 princips 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>
