Premium-Fintech-Krypto-Handels-Dashboard-UI-Mockup

Sie sind ein erfahrener UI-Designer, der modernes, minimalistisches Design, Schatten, Glas und weiche Farben einsetzt. Ihre Rolle besteht darin, ein professionelles, schönes Mockup zu erstellen, das zur Lieferung bereit ist, basierend auf diesen Anforderungen: <requirements> ## 1. Gesamtstil & visuelle Sprache Diese Oberfläche repräsentiert ein Premium-, modernes Fintech-/Krypto-Handels-Dashboard mit dunklem Thema. Die visuelle Sprache kombiniert **weichen Neumorphismus** und **luxuriöse Web3-Ästhetik**. Kernmerkmale: - Warme Gold-/Orange-Akzente - Monochrome Farbpalette mit minimalistischen Effekten und Schatten - Kartenbasiertes Layout mit Tiefe und subtilen Hintergründen - Minimale Ränder, Trennung durch Schatten oder helle Hintergründe Zielwahrnehmung: - Sicher - Professionell - High-End / institutionelle Qualität - Für erfahrene Trader optimiert --- ## 2. Layout-Struktur ### Globales Layout - Desktop-first Dashboard - Ausgabeproportionen: 3:2 - Drei Hauptbereiche: 1. Obere Navigationsleiste (horizontal) 2. Linke Seitenleisten-Navigation (vertikal) 3. Hauptinhaltsbereich (mehrspaltiges Kartenraster) Der Abstand ist großzügig und priorisiert Klarheit und visuelle Atmungsfreiheit. --- ## 3. Obere Navigationsleiste - Höhe: 72px - Links: - Markenlogo-Text "Mevolut" - Stilisiertes "M" - Gold-/Orange-Akzent - Mitte: - Navigationslinks: Dashboard, Sicherheit, Empfehlung, Handelsgebühren, API-Verwaltung - Rechts: - Aufträge-Link - Primärer CTA: "Einzahlen" (goldener Pill-Button) - Benutzeravatar (rund) - Theme-Umschalter (Mond-Symbol) Typografie: - Saubere Sans-Serif - Mittlere Schriftstärke - Weißer Primärtext, gedämpfte graue inaktive Zustände --- ## 4. Linke Seitenleisten-Navigation - Breite: 240px - Hintergrund: fast schwarz - Vertikale Navigationselemente mit Symbolen: - Dashboard (aktiv) - Sicherheit - Empfehlung - Handelsgebühren - API-Verwaltung - Unten ausgerichtet: - Einstellungen Aktives Element: - Subtile Hintergrundhervorhebung - Leichter Hintergrundton - Abgerundeter Container Symbole: - Umrissstil - Goldakzent im aktiven Zustand --- ## 5. Hauptinhaltsbereich ### 5.1 Benutzerübersicht-Karte - Große abgerundete Karte oben - Links: - Runder Avatar - Begrüßungstext ("Hallo…") - Benutzername - Inline-Informationsblöcke: - UID (Kopieren-Symbol) - Identitätsprüfungsstatus - Sicherheitsstufe - Zeitzone - Zeitstempel der letzten Anmeldung - Rechts: - "Info ausblenden"-Umschalter Stil: - Subtile Innenschatten --- ### 5.2 Einzahlungs-/Kauf-Karte - Mittelgroße Karte - Titeltext erklärt Einzahlungsoptionen - Zwei Aktionszeilen: - Einzahlen (Dollar oder Krypto) - Aktien kaufen (lokale Währung) - Jede Zeile: - Symbol - Beschriftung - Pfeil-Aktionsbutton (Goldakzent) --- ### 5.3 Gesamtvermögens-Karte - Zeigt USD-Guthaben und USD-Äquivalent - Großes, verblasstes Dollarzeichen-Wasserzeichen im Hintergrund - Aktions-Tabs: - Aktien kaufen - Einzahlen - Abheben - Zahlenwerte sind groß --- ### 5.4 VIP-Level-Karte - Zeigt aktuelles VIP-Level - Spot- und Futures-Gebühren - Fortschrittsbalken für Token-Bestände - "Mehr ansehen"-Link Fortschrittsbalken: - Abgerundet - Dunkle Hintergrundspur --- ### 5.5 Aktuelle Bestände-Tabelle - Karte mit Tabellenlayout - Spalten: - Münze (Symbol + Name) - Preis - 24h-Änderung - 4h-Trend (Sparkline) - Aktionen (Einzahlen, Abheben, Handeln) Sparklines: - Grün für positiven Trend - Rot für negativen Trend Hover: - Subtile Hintergrundhervorhebung pro Zeile --- ### 5.6 Partnerprogramm-Karte - Werbekarte - Goldmünzen-Illustration - Kurze Beschreibung und CTA-Button ("Jetzt bewerben") --- ### 5.7 Informations-/Nachrichten-Karte - Vertikale Liste von Ankündigungen - Schlagzeile + Zeitstempel - "Mehr ansehen"-Link oben --- ## 6. Farbpalette - Primärer Hintergrund: tiefes Anthrazit / Schwarz - Kartenoberflächen: etwas heller - Akzentfarbe: warmes Gold - Texthierarchie: - Weiß (primär) - Gedämpftes Grau (sekundär) - Dunkelgrau (deaktiviert) - Statusfarben: - Grün für positiv - Rot für negativ --- ## 7. Effekte & Interaktion - Abgerundete Ecken überall (sm) # Design-Tokens: { // Globale Themendefinition "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Layout-Maße und Struktur "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Farbsystem "colors": { "background": "#0B0D10", // Haupt-App-Hintergrund "primaryAccent": "#F5A623", // Gold-/Orange-Hervorhebung "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typografie-Skala "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 } }, // Kern-UI-Komponenten "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" } }, // Symbolsystem "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>