Sei un designer UI esperto che abbraccia il design moderno, minimalista, ombre, vetro e colori morbidi. Il tuo ruolo è creare un mockup professionale e bello, pronto per la consegna, basato su questi requisiti: <requirements> ## 1. Stile Generale e Linguaggio Visivo Questa interfaccia rappresenta una dashboard di trading fintech/crypto premium e moderna utilizzando un tema scuro. Il linguaggio visivo combina **soft neumorfismo** ed **estetica Web3 di lusso**. Caratteristiche principali: - Evidenziazioni con accenti oro/arancio caldi - Palette di colori monocromatica con effetti e ombre minimalisti - Layout basato su schede con profondità e sfondi sottili - Bordi minimi, separazione tramite ombre o sfondi chiari Percezione target: - Sicuro - Professionale - Di alto livello / grado istituzionale - Ottimizzato per trader esperti --- ## 2. Struttura del Layout ### Layout Globale - Dashboard desktop-first - Proporzioni di output: 3:2 - Tre regioni principali: 1. Barra di navigazione superiore (orizzontale) 2. Navigazione sidebar sinistra (verticale) 3. Area contenuto principale (griglia multi-colonna di schede) Lo spaziatura è generosa, dando priorità alla chiarezza e allo spazio visivo. --- ## 3. Barra di Navigazione Superiore - Altezza: 72px - Sinistra: - Testo del logo del marchio "Mevolut" - "M" stilizzata - Accento oro/arancio - Centro: - Link di navigazione: Dashboard, Sicurezza, Referral, Commissioni di Trading, Gestione API - Destra: - Link ordine - CTA primario: "Deposita" (pulsante pillola dorato) - Avatar utente (circolare) - Toggle tema (icona luna) Tipografia: - Sans-serif pulito - Peso medio - Testo primario bianco, stati inattivi grigio attenuato --- ## 4. Navigazione Sidebar Sinistra - Larghezza: 240px - Sfondo: quasi nero - Elementi di navigazione verticali con icone: - Dashboard (attivo) - Sicurezza - Referral - Commissioni di Trading - Gestione API - Allineati in basso: - Impostazioni Elemento attivo: - Sottile evidenziazione dello sfondo - Leggera tinta di sfondo - Contenitore arrotondato Icone: - Stile outline - Accento dorato sullo stato attivo --- ## 5. Area Contenuto Principale ### 5.1 Scheda Panoramica Utente - Grande scheda arrotondata in alto - Sinistra: - Avatar circolare - Testo di saluto ("Ciao…") - Nome utente - Blocchi informativi inline: - UID (icona copia) - Stato verifica identità - Livello di sicurezza - Fuso orario - Timestamp ultimo accesso - Destra: - Toggle "Nascondi info" Stile: - Ombre interne sottili --- ### 5.2 Scheda Deposita / Acquista - Scheda di medie dimensioni - Testo del titolo che spiega le opzioni di deposito - Due righe di azione: - Deposita (dollari o crypto) - Acquista azioni (valuta locale) - Ogni riga: - Icona - Etichetta - Pulsante azione freccia (accento dorato) --- ### 5.3 Scheda Patrimonio Totale - Mostra saldo USD ed equivalente USD - Grande simbolo del dollaro sbiadito come watermark di sfondo - Schede azione: - Acquista azioni - Deposita - Preleva - I valori numerici sono grandi --- ### 5.4 Scheda Livello VIP - Mostra il livello VIP attuale - Commissioni spot e futures - Barra di progresso per le partecipazioni di token - Link "Visualizza altro" Barra di progresso: - Arrotondata - Traccia sfondo scuro --- ### 5.5 Tabella delle Partecipazioni Attuali - Scheda contenente un layout tabellare - Colonne: - Coin (icona + nome) - Prezzo - Variazione 24h - Trend 4h (sparkline) - Azioni (Deposita, Preleva, Trade) Sparkline: - Verde per trend positivo - Rosso per trend negativo Hover: - Sottile evidenziazione dello sfondo per riga --- ### 5.6 Scheda Programma Affiliati - Scheda promozionale - Illustrazione moneta d'oro - Breve descrizione e pulsante CTA ("Candidati ora") --- ### 5.7 Scheda Informazioni / Notizie - Elenco verticale di annunci - Titolo + timestamp - Link "Visualizza altro" in alto --- ## 6. Palette di Colori - Sfondo primario: grigio scuro intenso / nero - Superfici schede: leggermente più chiare - Colore accento: oro caldo - Gerarchia del testo: - Bianco (primario) - Grigio attenuato (secondario) - Grigio scuro (disabilitato) - Colori di stato: - Verde per positivo - Rosso per negativo --- ## 7. Effetti e Interazione - Angoli arrotondati ovunque (sm) # Design tokens: { // Definizione del tema globale "theme": { "mode": "scuro", "style": [ "soft-neumorfismo", "fintech-premium" ] }, // Misure e struttura del layout "layout": { "type": "dashboard-desktop", "grid": "tre-colonne", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistema di colori "colors": { "background": "#0B0D10", // Sfondo principale dell'app "primaryAccent": "#F5A623", // Evidenziazione oro/arancio "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Scala tipografica "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 } }, // Componenti UI principali "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "nessuno", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "trasparente", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "sottile", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Sistema di icone "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>