Anda adalah pereka UI berpengalaman yang menggunakan reka bentuk moden, minimalistik, bayang-bayang, kaca, dan warna lembut. Peranan anda adalah untuk mencipta mockup profesional dan cantik yang sedia untuk dihantar berdasarkan keperluan ini: <requirements> ## 1. Gaya Keseluruhan & Bahasa Visual Antara muka ini mewakili papan pemuka dagangan fintech/kripto moden premium menggunakan tema gelap. Bahasa visual menggabungkan **neumorfisme lembut**, dan **estetik Web3 mewah**. Ciri teras: - Sorotan aksen emas/oren hangat - Palet warna monokromatik dengan kesan minimalistik dan bayang-bayang - Susun atur berasaskan kad dengan kedalaman dan latar belakang halus - Sempadan minimum, pemisahan melalui bayang-bayang atau latar belakang cahaya Persepsi sasaran: - Selamat - Profesional - Gred tinggi / institusi - Dioptimumkan untuk pedagang berpengalaman --- ## 2. Struktur Susun Atur ### Susun Atur Global - Papan pemuka desktop-pertama - Perkadaran output: 3:2 - Tiga kawasan utama: 1. Bar navigasi atas (mendatar) 2. Bar sisi navigasi kiri (menegak) 3. Kawasan kandungan utama (grid berbilang lajur kad) Jarak adalah luas, mengutamakan kejelasan dan ruang visual. --- ## 3. Bar Navigasi Atas - Ketinggian: 72px - Kiri: - Teks logo jenama "Mevolut" - "M" bergaya - Aksen emas/oren - Tengah: - Pautan navigasi: Papan Pemuka, Keselamatan, Rujukan, Yuran Dagangan, Pengurusan API - Kanan: - Pautan pesanan - CTA utama: "Deposit" (butang pil emas) - Avatar pengguna (bulat) - Togol tema (ikon bulan) Tipografi: - Sans-serif bersih - Berat sederhana - Teks utama putih, keadaan tidak aktif kelabu malap --- ## 4. Bar Sisi Navigasi Kiri - Lebar: 240px - Latar belakang: hampir hitam - Item navigasi menegak dengan ikon: - Papan Pemuka (aktif) - Keselamatan - Rujukan - Yuran Dagangan - Pengurusan API - Dijajarkan bawah: - Tetapan Item aktif: - Sorotan latar belakang halus - Warna latar belakang sedikit - Bekas bulat Ikon: - Gaya garis luar - Aksen emas pada keadaan aktif --- ## 5. Kawasan Kandungan Utama ### 5.1 Kad Gambaran Keseluruhan Pengguna - Kad bulat besar di atas - Kiri: - Avatar bulat - Teks ucapan ("Hello…") - Nama pengguna - Blok info sebaris: - UID (ikon salin) - Status pengesahan identiti - Tahap keselamatan - Zon waktu - Cap masa log masuk terakhir - Kanan: - Togol "Sembunyikan info" Gaya: - Bayang-bayang dalaman halus --- ### 5.2 Kad Deposit / Beli - Kad bersz sederhana - Teks tajuk yang menjelaskan pilihan deposit - Dua baris tindakan: - Deposit (dolar atau kripto) - Beli saham (mata wang tempatan) - Setiap baris: - Ikon - Label - Butang tindakan anak panah (aksen emas) --- ### 5.3 Kad Jumlah Aset - Memaparkan baki USD dan setara USD - Tanda r simbol Dolar besar dan pudar di latar belakang - Tab tindakan: - Beli saham - Deposit - Pengeluaran - Nil angka adalah besar --- ### 5.4 Kad Tahap VIP - Menunjukkan tahap VIP semasa - Kadar yuran spot dan futures - Bar kemajuan untuk pegangan token - Pautan "Lihat lebih banyak" Bar kemajuan: - Bulat - Trek latar belakang gelap --- ### 5.5 Jadual Pegangan Semasa - Kad mengandungi susun atur jadual - Lajur: - Koin (ikon + nama) - Harga - Perubahan 24j - Trend 4j (sparkline) - Tindakan (Deposit, Pengeluaran, Dagangan) Sparkline: - Hijau untuk trend positif - Merah untuk trend negatif Tuding: - Sorotan latar belakang halus setiap baris --- ### 5.6 Kad Program Afiliasi - Kad promosi - Ilustrasi syiling emas - Penerangan ringkas dan butang CTA ("Mohon sekarang") --- ### 5.7 Kad Maklumat / Berita - Senar menegak pengumuman - Tajuk + cap masa - Pautan "Lihat lebih banyak" di atas --- ## 6. Palet Warna - Latar belakang utama: arang batu dalam / hitam - Permukaan kad: sedikit lebih cerah - Warna aksen: emas hangat - Hierarki teks: - Putih (utama) - Kelabu malap (sekunder) - Kelabu gelap (dilumpuhkan) - Warna status: - Hijau untuk positif - Merah untuk negatif --- ## 7. Kesan & Interaksi - Sudut bulat di seluruh (sm) # Token reka bentuk: { // Definisi tema global "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Pengukuran dan struktur susun atur "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistem warna "colors": { "background": "#0B0D10", // Latar belakang aplikasi utama "primaryAccent": "#F5A623", // Sorotan emas/oren "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Skala tipografi "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 } }, // Komponen UI teras "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" } }, // Sistem ikon "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>