Du är en erfaren UI-designer som omfamnar modern, minimalistisk design, skuggor, glas och mjuka färger. Din roll är att skapa en professionell, vacker mockup som är redo för leverans baserat på dessa krav: <requirements> ## 1. Övergripande stil & visuellt språk Detta gränssnitt representerar en premium, modern fintech / krypto-handelsinstrumentpanel med ett mörkt tema. Det visuella språket kombinerar **mjuk neumorfism** och **lyxig Web3-estetik**. Kärnegenskaper: - Varma guld/orange accentmarkeringar - Monokromatisk färgpalett med minimalistiska effekter och skuggor - Kortbaserad layout med djup och subtila bakgrunder - Minimala kanter, separation via skuggor eller ljusa bakgrunder Måluppfattning: - Säker - Professionell - Högklassig / institutionell kvalitet - Optimerad för erfarna handlare --- ## 2. Layoutstruktur ### Global layout - Skrivbords-första instrumentpanel - Utmatningsproportioner: 3:2 - Tre huvudregioner: 1. Toppnavigeringsfält (horisontellt) 2. Vänster sidonavigering (vertikal) 3. Huvudinnehållsområde (flerkolumnsrutnät av kort) Avståndet är generöst, med prioritet på tydlighet och visuellt andningsutrymme. --- ## 3. Toppnavigeringsfält - Höjd: 72px - Vänster: - Varumärkeslogotext "Mevolut" - Stiliserat "M" - Guld/orange accent - Centrum: - Navigeringslänkar: Instrumentpanel, Säkerhet, Hänvisning, Handelsavgifter, API-hantering - Höger: - Orderlänk - Primär CTA: "Insättning" (guldpillerknapp) - Användaravatar (cirkulär) - Temaväxlare (månikon) Typografi: - Ren sans-serif - Medium vikt - Vit primärtext, dämpad grå inaktiva tillstånd --- ## 4. Vänster sidonavigering - Bredd: 240px - Bakgrund: nästan svart - Vertikala navigeringsobjekt med ikoner: - Instrumentpanel (aktiv) - Säkerhet - Hänvisning - Handelsavgifter - API-hantering - Bottenjusterat: - Inställningar Aktivt objekt: - Subtil bakgrundsmarkering - Lätt bakgrundston - Rundad behållare Ikoner: - Konturstil - Guldaccent på aktivt tillstånd --- ## 5. Huvudinnehållsområde ### 5.1 Användaröversiktskort - Stort rundat kort högst upp - Vänster: - Cirkulär avatar - Hälsningstext ("Hej…") - Användarnamn - Inline-informationsblock: - UID (kopieringsikon) - Identitetsverifieringsstatus - Säkerhetsnivå - Tidszon - Senaste inloggningstidsstämpel - Höger: - "Dölj info"-växling Stil: - Subtila inre skuggor --- ### 5.2 Insättning / Köp-kort - Medelstort kort - Titeltext som förklarar insättningsalternativ - Två åtgärdsrader: - Insättning (dollar eller krypto) - Köp aktier (lokal valuta) - Varje rad: - Ikon - Etikett - Pilåtgärdsknapp (guldaccent) --- ### 5.3 Totalt tillgångskort - Visar USD-balans och USD-ekvivalent - Stor, blek Dollarsymbol vattenstämpel i bakgrunden - Åtgärdsflikar: - Köp aktier - Insättning - Uttag - Numeriska värden är stora --- ### 5.4 VIP-nivåkort - Visar aktuell VIP-nivå - Spot- och terminsavgiftssatser - Förloppsindikator för tokeninnehav - "Visa mer"-länk Förloppsindikator: - Rundad - Mörk bakgrundsspår --- ### 5.5 Aktuella innehavstabell - Kort som innehåller en tabellayout - Kolumner: - Mynt (ikon + namn) - Pris - 24h förändring - 4h trend (sparkline) - Åtgärder (Insättning, Uttag, Handel) Sparklines: - Grön för positiv trend - Röd för negativ trend Hovra: - Subtil bakgrundsmarkering per rad --- ### 5.6 Affiliate-programkort - Kampanjkort - Guldmyntillustration - Kort beskrivning och CTA-knapp ("Ansök nu") --- ### 5.7 Information / Nyhetskort - Vertikal lista med tillkännagivanden - Rubrik + tidsstämpel - "Visa mer"-länk högst upp --- ## 6. Färgpalett - Primär bakgrund: djup kol / svart - Kortytor: något ljusare - Accentfärg: varm guld - Texthierarki: - Vit (primär) - Dämpad grå (sekundär) - Mörkgrå (inaktiverad) - Statusfärger: - Grön för positiv - Röd för negativ --- ## 7. Effekter & interaktion - Rundade hörn genomgående (sm) # Designtokens: { // Global temadefinition "theme": { "mode": "mörk", "style": [ "mjuk-neumorfism", "premium-fintech" ] }, // Layoutmått och struktur "layout": { "type": "skrivbords-instrumentpanel", "grid": "tre-kolumn", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Färgsystem "colors": { "background": "#0B0D10", // Huvudappbakgrund "primaryAccent": "#F5A623", // Guld/orange markering "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 } }, // Kärn UI-komponenter "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "ingen", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "kontur" }, "table": { "rowHeight": 56, "divider": "subtil", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Ikon-system "icons": { "style": "kontur", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
