Ikaw ay isang UI designer na may karanasan na pinalaki ang modern, minimalistic na disenyo, mga anino, salamin, at malambot na mga kulay. Ang iyong tungkulin ay lumikha ng isang propesyonal at maganda na mockup na handa na para sa pagpapadala batay sa mga requirement na ito: <requirements> ## 1. Pangkalahatang Estilo at Visual na Wika Ang interface na ito ay kumakatawan sa isang premium, modern na fintech / crypto trading dashboard na gumagamit ng dark theme. Ang visual na wika ay pinagsasama ang **malambot na neumorphism**, at **masanghay na Web3 aesthetics**. Mga pangunahing katangian: - Mga highlight ng warm gold/orange na accent - Monochromatic na color palette na may mga minimalistic na epekto at anino - Layout na batay sa card na may lalim at banayad na mga background - Minimal na mga border, paghihiwalay sa pamamagitan ng mga anino o maliwanag na background Target na pagtingin: - Seguro - Propesyonal - High-end / nasa antas ng institusyon - In-optimize para sa mga may karanasang trader --- ## 2. Estruktura ng Layout ### Pangkalahatang Layout - Desktop-first na dashboard - Mga proporsyon ng output: 3:2 - Tatlong pangunahing rehiyon: 1. Navigation bar sa itaas (pahalang) 2. Navigation ng kaliwang sidebar (patayo) 3. Pangunahing lugar ng nilalaman (multi-column na grid ng mga card) Malawak ang spacing, na pinapriority ang kalinawan at visual na paghinga. --- ## 3. Navigation Bar sa Itaas - Taas: 72px - Kaliwa: - Text ng brand logo na "Mevolut" - Stylized na "M" - Gold/orange na accent - Gitna: - Mga navigation link: Dashboard, Seguridad, Referral, Mga Bayad sa Trading, Pamamahala ng API - Kanan: - Link ng Order - Pangunahing CTA: “Deposit” (gold na pill button) - Avatar ng user (bilog) - Toggle ng tema (icon ng buwan) Typography: - Malinis na sans-serif - Katamtamang timbang - Puting pangunahing text, muted na gray na mga hindi aktibong estado --- ## 4. Navigation ng Kaliwang Sidebar - Lapad: 240px - Background: malapit sa itim - Mga vertical na navigation item na may mga icon: - Dashboard (aktibo) - Seguridad - Referral - Mga Bayad sa Trading - Pamamahala ng API - Naka-align sa ibaba: - Mga Setting Aktibong item: - Banayad na highlight sa background - Bahagyang tint sa background - Rounded na kontner Mga icon: - Outline na estilo - Gold na accent sa aktibong estado --- ## 5. Pangunahing Lugar ng Nilalaman ### 5.1 Card ng Overview ng User - Malaking rounded na card sa itaas - Kaliwa: - Bilog na avatar - Text ng pagbati (“Hello…”) - Pangalan ng user - Mga inline na info block: - UID (icon ng kopya) - Status ng pag-verify ng pagkakakilanlan - Antas ng seguridad - Time zone - Timestamp ng huling login - Kanan: - Toggle ng “Itago ang info” Estilo: - Banayad na mga inner na anino --- ### 5.2 Card ng Deposito / Pagbili - Card na katamtamang laki - Text ng pamagat na nagpapaliwanag ng mga opsyon sa deposito - Dalawang hilera ng aksyon: - Deposito (dollars o crypto) - Bumili ng stocks (local na pera) - Bawat hilera: - Icon - Label - Arrow na action button (gold na accent) --- ### 5.3 Card ng Kabuuang Asset - Nagpapakita ng USD na balanse at katumbas na USD - Malaking, faded na watermark ng simbolo ng Dollar sa background - Mga action tab: - Bumili ng stocks - Mag-deposito - Mag-withdraw - Malaki ang mga numeric na value --- ### 5.4 Card ng Antas na VIP - Nagpapakita ng kasalukuyang antas na VIP - Mga rate ng fee para sa spot at futures - Progress bar para sa mga token holdings - Link ng “Tingnan pa” Progress bar: - Rounded - Dark na background na track --- ### 5.5 Talahanapan ng Kasalukuyang Holdings - Card na naglalaman ng table layout - Mga kolum: - Coin (icon + pangalan) - Presyo - 24h na Pagbabago - 4h na Trend (sparkline) - Mga Aksyon (Deposito, Withdraw, Trade) Mga sparkline: - Berde para sa positibong trend - Pula para sa negatibong trend Hover: - Banayad na highlight sa background bawat hilera --- ### 5.6 Card ng Affiliate Program - Promotional na card - Ilustrasyon ng gold na coin - Mkling deskripsyon at CTA button (“Mag-apply ngayon”) --- ### 5.7 Card ng Impormasyon / Balita - Vertical na listahan ng mga anunsyo - Headline + timestamp - Link ng “Tingnan pa” sa itaas --- ## 6. Color Palette - Pangunahing background: malalim na charcoal / itim - Mga surface ng card: bahagyang mas maliwanag - Kulay ng accent: warm gold - Hierarkiya ng text: - Puti (pangunahing) - Muted na gray (sekundaryo) - Dark na gray (naka-disable) - Mga kulay ng status: - Berde para sa positibo - Pula para sa negatibo --- ## 7. Mga Epekto at Interaksyon - Mga rounded na sulok sa buong interface (sm) # Design tokens: { // Pangkalahatang depinisyon ng tema "theme": { "mode": "madilim", "style": [ "malambot-neumorphism", "premium-fintech" ] }, // Mga sukat at istruktura ng layout "layout": { "type": "desktop-dashboard", "grid": "tatlong-kolum", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistema ng kulay "colors": { "background": "#0B0D10", // Pangunahing background ng app "primaryAccent": "#F5A623", // Highlight ng gold/orange "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Sukat ng typography "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 } }, // Mga pangunahing UI na komponent "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": "konturno" }, "table": { "rowHeight": 56, "divider": "banayad", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Sistema ng icon "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
