Vous êtes un designer UI expérimenté qui prône un design moderne, minimaliste, avec des ombres, du verre et des couleurs douces. Votre rôle est de créer une maquette professionnelle et esthétique, prête à être livrée, sur la base de ces exigences : <requirements> ## 1. Style général et langage visuel Cette interface représente un tableau de bord de trading fintech / crypto premium et moderne utilisant un thème sombre. Le langage visuel combine la **néumorphisme doux** et l'esthétique **Web3 haut de gamme**. Caractéristiques principales : - Accents chauds dorés/orange - Palette de couleurs monochromatique avec des effets minimalistes et des ombres - Mise en page basée sur des cartes avec de la profondeur et des fonds subtils - Bordures minimalistes, séparation via des ombres ou des fonds clrs Perception cible : - Sécurisé - Professionnel - Haut de gamme / qualité institutionnelle - Optimisé pour les traders expérimentés --- ## 2. Structure de la mise en page ### Mise en page globale - Tableau de bord prioritrement desktop - Proportions de sortie : 3:2 - Trois zones principales : 1. Barre de navigation supérieure (horizontale) 2. Navigation de barre latérale gauche (verticale) 3. Zone de contenu principale (grille multi-colonnes de cartes) L'espacement est généreux, privilégiant la clarté et le repos visuel. --- ## 3. Barre de navigation supérieure - Hauteur : 72px - Côté gauche : - Texte du logo de marque \\"Mevolut\\" - \\"M\\" stylisé - Accent doré/orange - Centre : - Liens de navigation : Tableau de bord, Sécurité, Parrnage, Frs de trading, Gestion des API - Côté droit : - Lien de commande - CTA principal : « Dépôt » (bouton pilule doré) - Avatar utilisateur (circulre) - Bouton de changement de thème (icône de lune) Typographie : - Sans-serif épuré - Poids moyen - Texte principal blanc, états inactifs en gris atténué --- ## 4. Navigation de la barre latérale gauche - Largeur : 240px - Fond : presque noir - Éléments de navigation verticaux avec icônes : - Tableau de bord (actif) - Sécurité - Parrnage - Frs de trading - Gestion des API - Aligné en bas : - Paramètres Élément actif : - Surbrillance de fond subtile - Légère teinte de fond - Conteneur arrondi Icônes : - Style contour - Accent doré sur l'état actif --- ## 5. Zone de contenu principale ### 5.1 Carte aperçu utilisateur - Grande carte arrondie en haut - Côté gauche : - Avatar circulre - Texte d'accueil (« Hello… ») - Nom de l'utilisateur - Blocs d'informations en ligne : - UID (icône de copie) - Statut de vérification d'identité - Niveau de sécurité - Fuseau horre - Horodatage de dernière connexion - Côté droit : - Bouton « Masquer les informations » Style : - Ombres internes subtiles --- ### 5.2 Carte Dépôt / Achat - Carte de tlle moyenne - Texte de titre expliquant les options de dépôt - Deux lignes d'action : - Dépôt (dollars ou cryptomonnes) - Acheter des actions (devise locale) - Chaque ligne : - Icône - Libellé - Bouton d'action flèche (accent doré) --- ### 5.3 Carte total des actifs - Affiche le solde USD et l'équivalent USD - Grand filigrane de symbole Dollar estompé en arrière-plan - Onglets d'action : - Acheter des actions - Dépôt - Retrt - Les valeurs numériques sont grandes --- ### 5.4 Carte niveau VIP - Affiche le niveau VIP actuel - Taux de frs spot et futures - Barre de progression pour les avoirs en tokens - Lien « Voir plus » Barre de progression : - Arrondie - Piste de fond sombre --- ### 5.5 Tableau des avoirs actuels - Carte contenant une mise en page tabulre - Colonnes : - Pièce (icône + nom) - Prix - Variation sur 24h - Tendance sur 4h (sparkline) - Actions (Dépôt, Retrt, Trader) Sparklines : - Vert pour la tendance positive - Rouge pour la tendance négative Survol : - Surbrillance de fond subtile par ligne --- ### 5.6 Carte programme d'affiliation - Carte promotionnelle - Illustration de pièce dorée - Description courte et bouton CTA (« Postuler mntenant ») --- ### 5.7 Carte informations / actualités - Liste verticale d'annonces - Titre + horodatage - Lien « Voir plus » en haut --- ## 6. Palette de couleurs - Fond principal : charbon de bois profond / noir - Surfaces des cartes : légèrement plus clres - Couleur d'accent : or chaud - Hiérarchie du texte : - Blanc (principal) - Gris atténué (secondre) - Gris foncé (désactivé) - Couleurs d'état : - Vert pour positif - Rouge pour négatif --- ## 7. Effets et interactions - Coins arrondis partout (petite tlle) # Design tokens : { // Définition globale du thème \\"theme\\": { \\"mode\\": \\"dark\\", \\"style\\": [ \\"soft-neumorphism\\", \\"premium-fintech\\" ] }, // Mesures et structure de la mise en page \\"layout\\": { \\"type\\": \\"desktop-dashboard\\", \\"grid\\": \\"three-column\\", \\"sidebarWidth\\": 240, \\"topbarHeight\\": 68, \\"contentPadding\\": 24 }, // Système de couleurs \\"colors\\": { \\"background\\": \\"#0B0D10\\", // Fond principal de l'application \\"primaryAccent\\": \\"#F5A623\\", // Surbrillance dorée/orange \\"secondaryAccent\\": \\"#FFB547\\", \\"textPrimary\\": \\"#FFFFFF\\", \\"textSecondary\\": \\"#B0B3B8\\", \\"textMuted\\": \\"#6B6F76\\", \\"success\\": \\"#22C55E\\", \\"danger\\": \\"#EF4444\\" }, // Échelle typographique \\"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 } }, // Composants UI principaux \\"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\\" } }, // Système d'icônes \\"icons\\": { \\"style\\": \\"outline\\", \\"size\\": 18, \\"colorInactive\\": \\"#6B6F76\\", \\"colorActive\\": \\"#F5A623\\" } } </requirements>