Du er en erfaren UI-designer, der omfavner moderne, minimalistisk design, skygger, glas og bløde farver. Din rolle er at skabe en professionel, smuk mockup, der er klar til levering baseret på disse krav: <requirements> ## 1. Overordnet stil & visuelt sprog Denne grænseflade repræsenterer et premium, moderne fintech / krypto-handelsdashboard ved brug af et mørkt tema. Det visuelle sprog kombinerer **blød neumorfisme** og **luksus Web3-æstetik**. Kernekarakteristika: - Varme guld/orange accent-højdepunkter - Monokromatisk farvepalet med minimalistiske effekter og skygger - Kortbaseret layout med dybde og subtile baggrunde - Minimale kanter, adskillelse via skygger eller lyse baggrunde Målopfattelse: - Sikker - Professionel - High-end / institutionel-kvalitet - Optimeret til erfarne handlende --- ## 2. Layoutstruktur ### Globalt layout - Desktop-først dashboard - Outputproportioner: 3:2 - Tre hovedregioner: 1. Topnavigationsbjælke (horisontal) 2. Venstre sidebjælkenavigation (vertikal) 3. Hovedindholdsområde (multi-kolonne gitter af kort) Afstand er generøs, prioriterer klarhed og visuel åndedrætsrum. --- ## 3. Topnavigationsbjælke - Højde: 72px - Venstre: - Brandlogo-tekst "Mevolut" - Styliseret "M" - Guld/orange accent - Center: - Navigationslinks: Dashboard, Sikkerhed, Henvisning, Handelsgebyrer, API-administration - Højre: - Ordre-link - Primær CTA: “Indbetal” (guld pille-knap) - Brugeravatar (cirkulær) - Tema-toggle (måne-ikon) Typografi: - Ren sans-serif - Medium vægt - Hvid primær tekst, dæmpet grå inaktive tilstande --- ## 4. Venstre sidebjælkenavigation - Bredde: 240px - Baggrund: næsten-sort - Vertikale navigationspunkter med ikoner: - Dashboard (aktiv) - Sikkerhed - Henvisning - Handelsgebyrer - API-administration - Bundjusteret: - Indstillinger Aktivt punkt: - Subtil baggrundshøjdepunkt - Let baggrundstone - Afrundet contner Ikoner: - Outline-stil - Guldaccent på aktiv tilstand --- ## 5. Hovedindholdsområde ### 5.1 Brugeroversigtskort - Stort afrundet kort øverst - Venstre: - Cirkulær avatar - Hilsenstekst (“Hej…”) - Brugernavn - Inline-infoblokke: - UID (kopier-ikon) - Identitetsverifikationsstatus - Sikkerhedsniveau - Tidszone - Sidste login-tidsstempel - Højre: - “Skjul info” toggle Stil: - Subtile indre skygger --- ### 5.2 Indbetal / Køb-kort - Mellemstort kort - Titeltekst, der forklarer indbetalingsmuligheder - To handlingsrækker: - Indbetal (dollars eller krypto) - Køb aktier (lokal valuta) - Hver række: - Ikon - Etiket - Pil-handlingsknap (guldaccent) --- ### 5.3 Total aktiv-kort - Viser USD-saldo og USD-ækvivalent - Stort, falmet Dollar-symbol vandmærke i baggrunden - Handlingsfaner: - Køb aktier - Indbetal - Hæv - Numeriske værdier er store --- ### 5.4 VIP-niveau-kort - Viser nuværende VIP-niveau - Spot- og futures-gebyrsatser - Fremskridtsbjælke for token-beholdninger - “Se mere” link Fremskridtsbjælke: - Afrundet - Mørk baggrundsspor --- ### 5.5 Nuværende beholdningstabel - Kort indeholdende et tabellayout - Kolonner: - Mønt (ikon + navn) - Pris - 24t ændring - 4t trend (sparkline) - Handlinger (Indbetal, Hæv, Handel) Sparklines: - Grøn for positiv trend - Rød for negativ trend Hover: - Subtil baggrundshøjdepunkt pr. række --- ### 5.6 Affiliate-program-kort - Promotionskort - Guldmønt-illustration - Kort beskrivelse og CTA-knap (“Ansøg nu”) --- ### 5.7 Information / Nyheds-kort - Vertikal liste over meddelelser - Overskrift + tidsstempel - “Se mere” link øverst --- ## 6. Farvepalet - Primær baggrund: dyb kul / sort - Kortoverflader: lidt lysere - Accentfarve: varm guld - Teksthierarki: - Hvid (primær) - Dæmpet grå (sekundær) - Mørkegrå (deaktiveret) - Statusfarver: - Grøn for positiv - Rød for negativ --- ## 7. Effekter & interaktion - Afrundede hjørner overalt (sm) # Design tokens: { // Global temadefinition "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Layoutmålinger og struktur "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Farvesystem "colors": { "background": "#0B0D10", // Hovedapp-baggrund "primaryAccent": "#F5A623", // Guld/orange højdepunkt "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typografiskala "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 } }, // Kerne-UI-komponenter "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" } }, // Ikonsystem "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
