Je bent een ervaren UI-ontwerper die moderne, minimalistische ontwerpen, schaduwen, glas en zachte kleuren omarmt. Jouw rol is om een professionele, mooie mockup te maken die klaar is voor levering op basis van deze vereisten: <vereisten> ## 1. Algemene stijl & visuele taal Deze interface vertegenwoordigt een premium, modern fintech / crypto handelsdashboard met een donker thema. De visuele taal combineert **zachte neumorfisme** en **luxueuze Web3-esthetiek**. Kernkenmerken: - Warme gouden/oranje accentmarkeringen - Monochrome kleurenpalet met minimalistische effecten en schaduwen - Kaartgebaseerde opmaak met diepte en subtiele achtergronden - Minimale randen, scheiding via schaduwen of lichte achtergronden Beoogde indruk: - Veilig - Professioneel - High-end / institutionele kwaliteit - Geoptimaliseerd voor ervaren traders --- ## 2. Opmaakstructuur ### Globale opmaak - Desktop-first dashboard - Uitvoerverhoudingen: 3:2 - Drie hoofdgebieden: 1. Bovenste navigatiebalk (horizontaal) 2. Linker zijbalknavigatie (verticaal) 3. Hoofdinhoudsgebied (multikolom raster van kaarten) De ruimtelijke indeling is genereus, met prioriteit voor duidelijkheid en visuele ademruimte. --- ## 3. Bovenste navigatiebalk - Hoogte: 72px - Links: - Merklogotekst "Mevolut" - Gestileerde "M" - Gouden/oranje accent - Midden: - Navigatielinks: Dashboard, Beveiliging, Referral, Handelskosten, API-beheer - Rechts: - Bestellink - Primre CTA: "Storten" (gouden pill-knop) - Gebruikersavatar (circulr) - Thema-wisselknop (maanicoon) Typografie: - Schone sans-serif - Medium gewicht - Witte primre tekst, gedempt grijze inactieve staten --- ## 4. Linker zijbalknavigatie - Breedte: 240px - Achtergrond: bijna-zwart - Verticale navigatie-items met iconen: - Dashboard (actief) - Beveiliging - Referral - Handelskosten - API-beheer - Onderin uitgelijnd: - Instellingen Actief item: - Subtiele achtergrondmarkering - Lichte achtergrondvervaging - Afgeronde contner Iconen: - Outline-stijl - Gouden accent bij actieve staat --- ## 5. Hoofdinhoudsgebied ### 5.1 Gebruikersoverzichtskaart - Grote afgeronde kaart bovenaan - Links: - Circulre avatar - Begroetingstekst ("Hallo…") - Gebruikersnaam - Inline informatieblokken: - UID (kopieericoon) - Identiteitsverificatiestatus - Beveiligingsniveau - Tijdzone - Laatste inlogtijdstip - Rechts: - "Verberg info" wisselknop Stijl: - Subtiele innerlijke schaduwen --- ### 5.2 Stort- / Aankoopkaart - Middelgrote kaart - Titeltekst die stortopties uitlegt - Twee actierijen: - Storten (dollars of crypto) - Koop aandelen (lokale valuta) - Elke rij: - Icoon - Label - Pijl-actieknop (gouden accent) --- ### 5.3 Totale Actakaart - Toont USD-saldo en USD-equivalent - Grote, vervaagde Dollarsymbool watermerk in achtergrond - Actietabs: - Koop aandelen - Storten - Opnemen - Numerieke waarden zijn groot --- ### 5.4 VIP-niveaukaart - Toont huidig VIP-niveau - Spot- en futures tarieven - Voortgangsbalk voor tokenbezit - "Bekijk meer" link Voortgangsbalk: - Afgerond - Donkere achtergrondtrack --- ### 5.5 Huidige Bezitstabel - Kaart met tabelopmaak - Kolommen: - Munt (icoon + naam) - Prijs - 24u Verandering - 4u Trend (sparkline) - Acties (Storten, Opnemen, Handelen) Sparklines: - Groen voor positieve trend - Rood voor negatieve trend Hover: - Subtiele achtergrondmarkering per rij --- ### 5.6 Affiliate-programmakaart - Promotiekaart - Gouden muntillustratie - Korte beschrijving en CTA-knop ("Nu solliciteren") --- ### 5.7 Informatie-/nieuwskaart - Verticale lijst van aankondigingen - Kop + tijdstip - "Bekijk meer" link bovenaan --- ## 6. Kleurenpalet - Primre achtergrond: diepe kolenkleur / zwart - Kaartoppervlakken: iets lichter - Accentkleur: warm goud - Teksthiërarchie: - Wit (primr) - Gedempt grijs (secundr) - Donkergrijs (uitgeschakeld) - Statuskleuren: - Groen voor positief - Rood voor negatief --- ## 7. Effecten & Interactie - Afgeronde hoeken overal (sm) # Ontwerp tokens: { // Globale themadefinitie "theme": { "mode": "donker", "style": [ "zachte-neumorfisme", "premium-fintech" ] }, // Opmaakmetingen en structuur "layout": { "type": "desktop-handelsdashboard", "grid": "driedelig", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Kleurensysteem "colors": { "background": "#0B0D10", // Hoofd app-achtergrond "primaryAccent": "#F5A623", // Gouden/oranje highlight "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typografie schaal "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-componenten "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": "subtiel", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Iconensysteem "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </vereisten>
