Du bist ein erfahrener UI-Designer, der modernes, minimalistisches Design, Schatten, Glas und weiche Farben umarmt. Deine Rolle ist es, ein professionelles, schönes Mockup zu erstellen, das basierend auf diesen Anforderungen lieferbereit ist: <requirements> ## 1. Gesamtstil & Visuelle Sprache Diese Oberfläche repräsentiert ein premium, modernes Fintech- / Krypto-Trading-Dashboard mit einem dunklen Theme. Die visuelle Sprache kombiniert **weichen Neumorphismus** und **luxuriöse Web3-Ästhetik**. Kernmerkmale: - Warme Gold-/Orange-Akzent-Highlights - Monochromatische 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 / institutionell - Optimiert für erfahrene Trader --- ## 2. Layout-Struktur ### Globales Layout - Desktop-first Dashboard - Ausgabeproportionen: 3:2 - Drei Hauptregionen: 1. Obere Navigationsleiste (horizontal) 2. Linke Seitenleisten-Navigation (vertikal) 3. Hauptinhaltsbereich (Mehrspalten-Raster von Karten) Der Abstand ist großzügig und priorisiert Klarheit und visuellen Atemraum. --- ## 3. Obere Navigationsleiste - Höhe: 72px - Links: - Markenlogo-Text "Mevolut" - Stilisierte "M" - Gold-/Orange-Akzent - Mitte: - Navigationslinks: Dashboard, Sicherheit, Empfehlung, Trading-Gebühren, API-Verwaltung - Rechts: - Order-Link - Primärer CTA: “Einzahlen” (goldener Pill-Button) - Benutzer-Avatar (kreisförmig) - Theme-Umschalter (Mond-Icon) Typografie: - Saubere Sans-Serif - Mittleres Gewicht - Weißer Primärtext, gedämpftes Grau für inaktive Zustände --- ## 4. Linke Seitenleisten-Navigation - Breite: 240px - Hintergrund: nahezu schwarz - Vertikale Navigationselemente mit Icons: - Dashboard (aktiv) - Sicherheit - Empfehlung - Trading-Gebühren - API-Verwaltung - Unten ausgerichtet: - Einstellungen Aktives Element: - Subtiles Hintergrund-Highlight - Leichte Hintergrundtönung - Abgerundeter Contner Icons: - Outline-Stil - Goldakzent im aktiven Zustand --- ## 5. Hauptinhaltsbereich ### 5.1 Benutzerübersichts-Karte - Große abgerundete Karte oben - Links: - Kreisförmiger Avatar - Begrüßungstext (“Hallo…”) - Benutzername - Inline-Info-Blöcke: - UID (Kopier-Icon) - Identitätsverifizierungsstatus - Sicherheitslevel - Zeitzone - Letzter Login-Zeitstempel - Rechts: - “Info ausblenden”-Umschalter Stil: - Subtile innere Schatten --- ### 5.2 Einzahlungs- / Kauf-Karte - Mittelgroße Karte - Titeltext, der Einzahlungsoptionen erklärt - Zwei Aktionszeilen: - Einzahlen (Dollar oder Krypto) - Aktien kaufen (lokale Währung) - Jede Zeile: - Icon - Label - Pfeil-Aktionsbutton (Goldakzent) --- ### 5.3 Gesamtvermögens-Karte - Zeigt USD-Saldo und USD-Äquivalent - Großes, verblasstes Dollar-Symbol-Wasserzeichen im Hintergrund - Aktions-Tabs: - Aktien kaufen - Einzahlen - Abheben - Numerische Werte sind groß --- ### 5.4 VIP-Level-Karte - Zeigt aktuelles VIP-Level - Spot- und Futures-Gebührenraten - Fortschrittsbalken für Token-Bestände - “Mehr anzeigen”-Link Fortschrittsbalken: - Abgerundet - Dunkler Hintergrund-Track --- ### 5.5 Aktuelle Bestände-Tabelle - Karte mit Tabellenlayout - Spalten: - Coin (Icon + Name) - Preis - 24h-Änderung - 4h-Trend (Sparkline) - Aktionen (Einzahlen, Abheben, Handeln) Sparklines: - Grün für positiven Trend - Rot für negativen Trend Hover: - Subtiles Hintergrund-Highlight pro Zeile --- ### 5.6 Affiliate-Programm-Karte - Werbekarte - Goldmünzen-Illustration - Kurze Beschreibung und CTA-Button (“Jetzt bewerben”) --- ### 5.7 Informations- / News-Karte - Vertikale Liste von Ankündigungen - Überschrift + Zeitstempel - “Mehr anzeigen”-Link oben --- ## 6. Farbpalette - Primärer Hintergrund: tiefes Anthrazit / Schwarz - Kartenoberflächen: etwas heller - Akzentfarbe: warmes Gold - Text-Hierarchie: - Weiß (primär) - Gedämpftes Grau (sekundär) - Dunkles Grau (deaktiviert) - Statusfarben: - Grün für positiv - Rot für negativ --- ## 7. Effekte & Interaktion - Abgerundete Ecken durchgehend (sm) # Design-Tokens: { // Globale Theme-Definition "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-Highlight "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" } }, // Icon-System "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
