Du er en erfaren UI-designer som omfavner moderne, minimalistisk design, skygger, glass og myke farger. Din oppgave er å lage en profesjonell, vakker mockup som er klar for levering basert på disse kravene: <krav> ## 1. Generell stil og visuelt språk Dette grensesnittet representerer et premium, moderne fintech / kryptovaluta handelsdashboard med mørkt tema. Det visuelle språket kombinerer **myk neumorfisme** og **luksuriøs Web3-estetikk**. Kjernedetaljer: - Varme gull/oransje aksentfremhevinger - Monokromatisk fargepalett med minimalistiske effekter og skygger - Kortbasert layout med dybde og subtile bakgrunner - Minimale kanter, separasjon via skygger eller lyse bakgrunner Ønsket inntrykk: - Sikkert - Profesjonelt - High-end / institusjonell kvalitet - Optimalisert for erfarne tradere --- ## 2. Layoutstruktur ### Global layout - Desktop-først dashboard - Outputproporsjoner: 3:2 - Tre hovedregioner: 1. Toppnavigasjonslinje (horisontal) 2. Venstre sidemenynavigasjon (vertikal) 3. Hovedinnholdsområde (flerkolonnerett grid av kort) Mellomrommet er generøst, med prioritet på klarhet og visuelt pusterom. --- ## 3. Toppnavigasjonslinje - Høyde: 72px - Venstre: - Merkelogo-tekst "Mevolut" - Stilisert "M" - Gull/oransje aksent - Midten: - Navigasjonslenker: Dashboard, Sikkerhet, Referanse, Handelsgebyrer, API-håndtering - Høyre: - Bestillingslenke - Primær CTA: "Innskudd" (gull pilleknapp) - Brukeravatar (sirkulær) - Temaveksler (måneikon) Typografi: - Rens sans-serif - Medium vekt - Hvit primærtekst, dempet grå inaktive tilstander --- ## 4. Venstre sidemenynavigasjon - Bredde: 240px - Bakgrunn: nesten svart - Vertikale navigasjonselementer med ikoner: - Dashboard (aktiv) - Sikkerhet - Referanse - Handelsgebyrer - API-håndtering - Bunnalignert: - Innstillinger Aktivt element: - Subtil bakgrunnfremheving - Lett bakgrunnfarge - Avrundet beholder Ikoner: - Kontur stil - Gull aksent på aktiv tilstand --- ## 5. Hovedinnholdsområde ### 5.1 Brukeroversiktskort - Stort avrundet kort øverst - Venstre: - Sirkulær avatar - Helsetekst ("Hei…") - Brukernavn - Inline infoblokker: - UID (kopieringsikon) - Identitetsverifiseringsstatus - Sikkerhetsnivå - Tidssone - Siste innloggingstidspunkt - Høyre: - "Skjul info"-veksler Stil: - Subtile indre skygger --- ### 5.2 Innskudd / Kjøpskort - Middelsstort kort - Titteltekst som forklarer innskuddsalternativer - To handlingsrader: - Innskudd (dollar eller kryptovaluta) - Kjøp aksjer (lokal valuta) - Hver rad: - Ikon - Etikett - Pil handlingsknapp (gull aksent) --- ### 5.3 Total formueskort - Viser USD-saldo og USD-ekvivalent - Stort, utydelig dollartegn-vannmerke i bakgrunnen - Handlingsfaner: - Kjøp aksjer - Innskudd - Ta ut - Numeriske verdier er store --- ### 5.4 VIP-nivåkort - Viser gjeldende VIP-nivå - Spot- og futures-gebyrsatser - Fremgangslinje for tokenbeholdning - "Vis mer"-lenke Fremgangslinje: - Avrundet - Mørk bakgrunnsbane --- ### 5.5 Gjeldende beholdningstabell - Kort som inneholder en tabellayout - Kolonner: - Mynt (ikon + navn) - Pris - 24t endring - 4t trend (sparkline) - Handlinger (Innskudd, Ta ut, Handle) Sparklinjer: - Grønn for positiv trend - Rød for negativ trend Svev: - Subtil bakgrunnfremheving per rad --- ### 5.6 Affiliateprogramkort - Promokort - Gullmyntillustrasjon - Kort beskrivelse og CTA-knapp ("Søk nå") --- ### 5.7 Informasjons / nyhetskort - Vertikal liste med kunngjøringer - Overskrift + tidsstempel - "Vis mer"-lenke øverst --- ## 6. Fargepalett - Primær bakgrunn: dyp kull / svart - Kortoverflater: litt lysere - Aksentfarge: varm gull - Teksthierarki: - Hvit (primær) - Dempet grå (sekundær) - Mørk grå (deaktivert) - Statusfarger: - Grønn for positiv - Rød for negativ --- ## 7. Effekter og interaksjon - Avrundede hjørner overalt (sm) # Designtokens: { // Global temadefinisjon "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 }, // Fargesystem "colors": { "background": "#0B0D10", // Hovedappbakgrunn "primaryAccent": "#F5A623", // Gull/oransje fremheving "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typografisk 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 } }, // Kjerne 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" } }, // Ikon system "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </krav>