Anda adalah desner UI berpengalaman yang mengadopsi desn modern, minimalis, bayangan, kaca, dan warna lembut. Peran Anda adalah membuat mockup profesional dan indah yang siap untuk dikirim berdasarkan persyaratan ini: <requirements> ## 1. Gaya Keseluruhan & Bahasa Visual Antarmuka ini mewakili dashboard trading fintech / crypto modern premium menggunakan tema gelap. Bahasa visual menggabungkan **soft neumorphism**, dan **estetika Web3 mewah**. Karakteristik inti: - Sorotan aksen emas/oranye hangat - Palet warna monokromatik dengan efek minimalis dan bayangan - Tata letak berbasis kartu dengan kedalaman dan latar belakang halus - Border minimal, pemisahan melalui bayangan atau latar belakang terang Persepsi target: - Aman - Profesional - Kelas atas / tingkat institusional - Dioptimalkan untuk trader berpengalaman --- ## 2. Struktur Tata Letak ### Tata Letak Global - Dashboard desktop-first - Proporsi output: 3:2 - Tiga wilayah utama: 1. Bilah navigasi atas (horizontal) 2. Navigasi sidebar kiri (vertikal) 3. Area konten utama (grid multi-kolom dari kartu) Spasi yang generus, memprioritaskan kejelasan dan ruang visual. --- ## 3. Bilah Navigasi Atas - Tinggi: 72px - Kiri: - Teks logo merek "Mevolut" - "M" yang distilisasi - Aksen emas/oranye - Tengah: - Tautan navigasi: Dashboard, Security, Referral, Trading Fees, API management - Kanan: - Tautan Order - CTA Utama: “Deposit” (tombol pill emas) - Avatar pengguna (melingkar) - Toggle tema (ikon bulan) Tipografi: - Sans-serif bersih - Berat medium - Teks primer putih, status tidak aktif abu-abu redup --- ## 4. Navigasi Sidebar Kiri - Lebar: 240px - Latar belakang: hampir hitam - Item navigasi vertikal dengan ikon: - Dashboard (aktif) - Security - Referral - Trading Fees - API management - Sejajar bawah: - Settings Item aktif: - Sorotan latar belakang halus - Sedikit tint latar belakang - Kontner membulat Ikon: - Gaya outline - Aksen emas pada status aktif --- ## 5. Area Konten Utama ### 5.1 Kartu Ikhtisar Pengguna - Kartu bulat besar di atas - Kiri: - Avatar melingkar - Teks salam (“Hello…”) - Nama pengguna - Blok info inline: - UID (ikon salin) - Status verifikasi identitas - Level keamanan - Zona waktu - Timestamp login terakhir - Kanan: - Toggle “Hide info” Gaya: - Bayangan dalam halus --- ### 5.2 Kartu Deposit / Beli - Kartu berukuran sedang - Teks judul yang menjelaskan opsi deposit - Dua baris aksi: - Deposit (dolar atau crypto) - Beli saham (mata uang lokal) - Setiap baris: - Ikon - Label - Tombol aksi panah (aksen emas) --- ### 5.3 Kartu Total Aset - Menampilkan saldo USD dan setara USD - Simbol Dolar besar yang pudar sebag watermark di latar belakang - Tab aksi: - Beli saham - Deposit - Withdraw - Nil numerik besar --- ### 5.4 Kartu Level VIP - Menunjukkan level VIP saat ini - Tarif biaya spot dan futures - Progress bar untuk kepemilikan token - Tautan “View more” Progress bar: - Membulat - Track latar belakang gelap --- ### 5.5 Tabel Kepemilikan Saat Ini - Kartu yang berisi tata letak tabel - Kolom: - Coin (ikon + nama) - Price - 24h Change - 4h Trend (sparkline) - Actions (Deposit, Withdraw, Trade) Sparklines: - Hijau untuk tren positif - Merah untuk tren negatif Hover: - Sorotan latar belakang halus per baris --- ### 5.6 Kartu Program Afiliasi - Kartu promosi - Ilustrasi koin emas - Deskripsi singkat dan tombol CTA (“Apply now”) --- ### 5.7 Kartu Informasi / Berita - Daftar vertikal pengumuman - Headline + timestamp - Tautan “View more” di atas --- ## 6. Palet Warna - Latar belakang primer: charcoal dalam / hitam - Permukaan kartu: sedikit lebih terang - Warna aksen: emas hangat - Hierarki teks: - Putih (primer) - Abu-abu redup (sekunder) - Abu-abu gelap (disabled) - Status colors: - Hijau untuk positif - Merah untuk negatif --- ## 7. Efek & Interaksi - Sudut membulat di seluruh (sm) # Design tokens: { // Definisi tema global "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Pengukuran dan struktur tata letak "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/oranye "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 inti "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>