Mevolut dark fintech trading dashboard UI mockup

Vous êtes un concepteur UI expérimenté adoptant un design moderne et minimaliste, des ombres, du verre et des couleurs douces. Votre rôle est de créer une maquette professionnelle et belle, prête à être livrée, sur la base de ces exigences : ## 1. Style général et langage visuel Cette interface représente un tableau de bord premium et moderne de fintech / trading de crypto avec un thème sombre. Le langage visuel combine **neumorphisme doux** et esthétique **Web3 de luxe**. Caractéristiques principales : - Accents chauds or/orange - Palette de couleurs monochromatique avec effets et ombres minimalistes - Disposition basée sur des cartes avec profondeur et arrière-plans subtils - Bordures minimales, séparation par ombres ou arrière-plans clairs Perception cible : - Sécurisé - Professionnel - Haut de gamme / de qualité institutionnelle - Optimisé pour les traders expérimentés --- ## 2. Structure de la mise en page ### Mise en page globale - Tableau de bord priorisé pour ordinateur de bureau - Proportions de sortie : 3:2 - Trois régions principales : 1. Barre de navigation supérieure (horizontale) 2. Barre de navigation latérale gauche (verticale) 3. Zone de contenu principale (grille de cartes multi-colonnes) 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 doré) - Avatar utilisateur (circulaire) - Bouton de thème (icône lune) Typographie : - Sans-serif propre - Poids moyen - Texte principal blanc, états inactifs gris atténué --- ## 4. Barre de navigation latérale gauche - Largeur : 240px - Arrière-plan : noir presque - É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 à l'état actif --- ## 5. Zone de contenu principale ### 5.1 Carte de résumé utilisateur - Grande carte arrondie en haut - À gauche : - Avatar circulaire - Texte de salutation ("Bonjour…") - Nom d'utilisateur - Blocs d'informations en ligne : - UID (icône de copie) - Statut de vérification d'identité - Niveau de sécurité - Fuseau horaire - Horodatage de la dernière connexion - À droite : - Bouton "Masquer les informations" Style : - Ombres internes subtiles --- ### 5.2 Carte de 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 avec flèche (accent or) --- ### 5.3 Carte d'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 de niveau VIP - Affiche le niveau VIP actuel - Frais spot et futures - 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 - Variation 24h - Tendance 4h (graphique en courbes) - Actions (Déposer, Retirer, Négocier) Graphiques en courbes : - Vert pour tendance positive - Rouge pour tendance négative Au survol : - Surbrillance d'arrière-plan subtile par ligne --- ### 5.6 Carte du programme d'affiliation - Carte promotionnelle - Illustration de pièce d'or - Description brève et bouton CTA ("Postuler maintenant") --- ### 5.7 Carte d'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 (principal) - 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 la 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 principaux de l'interface "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" } }

Mevolut dark fintech trading dashboard UI mockup

Médias associés

Contenu du PromptEnregistrer

Utilisation

Références

Discussion