Maquette UI de Tableau de Bord de Trading Crypto Fintech Premium

Vous êtes un concepteur UI expérimenté adoptant un design moderne, minimaliste, avec des ombres, du verre et des couleurs douces. Votre rôle est de créer une maquette professionnelle et belle prête à livrer selon ces exigences : <requirements> ## 1. Style général et langage visuel Cette interface représente un tableau de bord premium et moderne de fintech / trading de crypto utilisant un thème sombre. Le langage visuel combine **neumorphisme doux** et **esthétique Web3 de luxe**. Caractéristiques principales : - Accents chauds or/orange - Palette monochromatique avec effets et ombres minimalistes - Disposition basée sur des cartes avec profondeur et arrière-plans subtils - Bordures minimales, séparation via ombres ou arrière-plans clairs Perception cible : - Sécurisé - Professionnel - Haut de gamme / qualité institutionnelle - Optimisé pour les traders expérimentés --- ## 2. Structure de mise en page ### Mise en page globale - Tableau de bord axé sur le bureau - Proportions de sortie : 3:2 - Trois régions principales : 1. Barre de navigation supérieure (horizontale) 2. Barre latérale de navigation gauche (verticale) 3. Zone de contenu principale (grille multi-colonnes de cartes) L'espacement est généreux, privilégiant la clarté et l'espace visuel. --- ## 3. Barre de navigation supérieure - Hauteur : 72px - À gauche : - Texte du logo de la marque "Mevolut" - "M" stylisé - Accent or/orange - Au centre : - Liens de navigation : Tableau de bord, Sécurité, Parrainage, Frais de trading, Gestion API - À droite : - Lien Ordres - CTA principal : "Déposer" (bouton pilule or) - Avatar utilisateur (circulaire) - Bascule de thème (icône lune) Typographie : - Sans-serif propre - Poids moyen - Texte principal blanc, états inactifs gris atténué --- ## 4. Barre latérale de navigation gauche - Largeur : 240px - Arrière-plan : presque noir - Éléments de navigation verticaux avec icônes : - Tableau de bord (actif) - Sécurité - Parrainage - Frais de trading - Gestion API - Aligné en bas : - Paramètres Élément actif : - Surbrillance d'arrière-plan subtile - Teinte d'arrière-plan légère - Conteneur arrondi Icônes : - Style contour - Accent or sur état actif --- ## 5. Zone de contenu principale ### 5.1 Carte d'aperçu utilisateur - Grande carte arrondie en haut - À gauche : - Avatar circulaire - Texte de salutation ("Bonjour…") - Nom d'utilisateur - Blocs d'informations en ligne : - UID (icône copier) - Statut de vérification d'identité - Niveau de sécurité - Fuseau horaire - Horodatage de la dernière connexion - À droite : - Bascule "Masquer les informations" Style : - Ombres internes subtiles --- ### 5.2 Carte Dépôt / Achat - Carte de taille moyenne - Texte de titre expliquant les options de dépôt - Deux lignes d'action : - Déposer (dollars ou crypto) - Acheter des actions (devise locale) - Chaque ligne : - Icône - Étiquette - Bouton d'action flèche (accent or) --- ### 5.3 Carte Actifs totaux - Affiche le solde en USD et l'équivalent en USD - Grand filigrane de symbole dollar estompé en arrière-plan - Onglets d'action : - Acheter des actions - Déposer - Retirer - Les valeurs numériques sont grandes --- ### 5.4 Carte Niveau VIP - Affiche le niveau VIP actuel - Frais au comptant et à terme - Barre de progression pour les avoirs en jetons - Lien "Voir plus" Barre de progression : - Arrondie - Piste d'arrière-plan sombre --- ### 5.5 Tableau des avoirs actuels - Carte contenant une disposition de tableau - Colonnes : - Pièce (icône + nom) - Prix - Changement 24h - Tendance 4h (graphique sparkline) - Actions (Déposer, Retirer, Trader) Sparklines : - Vert pour tendance positive - Rouge pour tendance négative Survol : - Surbrillance d'arrière-plan subtile par ligne --- ### 5.6 Carte Programme d'affiliation - Carte promotionnelle - Illustration de pièce d'or - Description courte et bouton CTA ("Postuler maintenant") --- ### 5.7 Carte Informations / Actualités - Liste verticale d'annonces - Titre + horodatage - Lien "Voir plus" en haut --- ## 6. Palette de couleurs - Arrière-plan principal : charbon profond / noir - Surfaces des cartes : légèrement plus claires - Couleur d'accent : or chaud - Hiérarchie du texte : - Blanc (primaire) - Gris atténué (secondaire) - Gris foncé (désactivé) - Couleurs de statut : - Vert pour positif - Rouge pour négatif --- ## 7. Effets et interaction - Coins arrondis partout (sm) # Design tokens : { // Définition globale du thème "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Mesures et structure de mise en page "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Système de couleurs "colors": { "background": "#0B0D10", // Arrière-plan principal de l'application "primaryAccent": "#F5A623", // Accent or/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>