Deneyimli bir UI tasarımcısısınız, modern, minimalist tasarım, gölgeler, cam ve yumuşak renkleri benimsiyorsunuz. Göreviniz, bu gereksinimlere dayalı olarak teslimata hazır, profesyonel ve güzel bir maket oluşturmaktır: <gereksinimler> ## 1. Genel Stil ve Görsel Dil Bu arayüz, karanlık temalı premium, modern bir finansal teknoloji / kripto para ticaret gösterge panelini temsil ediyor. Görsel dil, **yumuşak neumorfizm** ve **lüks Web3 estetiğini** birleştiriyor. Temel özellikler: - Sıcak altın/turuncu aksan vurguları - Minimalistik efektler ve gölgelerle tek renkli renk paleti - Derinlik ve incelikli arka planlarla kart tabanlı düzen - Minimal sınırlar, gölgeler veya açık arka planlar ile ayrım Hedef algı: - Güvenli - Profesyonel - Yüksek seviye / kurumsal düzeyde - Deneyimli tüccarlar için optimize edilmiş --- ## 2. Düzen Yapısı ### Genel Düzen - Masaüstü öncelikli gösterge paneli - Çıktı oranları: 3:2 - Üç ana bölge: 1. Üst gezinme çubuğu (yatay) 2. Sol kenar çubuğu gezinmesi (dikey) 3. Ana içerik alanı (kartlardan oluşan çok sütunlu ızgara) Aralama bol, netlik ve görsel nefes alanına öncelik veriyor. --- ## 3. Üst Gezinme Çubuğu - Yükseklik: 72px - Sol: - Marka logo metni "Mevolut" - Stilize "M" - Altın/turuncu aksan - Orta: - Gezinme bağlantıları: Gösterge Paneli, Güvenlik, Referans, Ticaret Ücretleri, API Yönetimi - Sağ: - Sipariş bağlantısı - Birincil CTA: "Para Yatır" (altın hap buton) - Kullanıcı avatarı (dresel) - Tema değiştirici (ay ikonu) Tipografi: - Temiz sans-serif - Orta kalınlık - Beyaz birincil metin, sönük gri pasif durumlar --- ## 4. Sol Kenar Çubuğu Gezinmesi - Genişlik: 240px - Arka plan: neredeyse siyah - İkonlu dikey gezinme öğeleri: - Gösterge Paneli (aktif) - Güvenlik - Referans - Ticaret Ücretleri - API Yönetimi - Alt hizalanmış: - Ayarlar Aktif öğe: - İnce arka plan vurgusu - Hafif arka plan tonu - Yuvarlatılmış kapsayıcı İkonlar: - Kontur stili - Aktif durumda altın aksan --- ## 5. Ana İçerik Alanı ### 5.1 Kullanıcı Özet Kartı - Üstte büyük yuvarlatılmış kart - Sol: - Dresel avatar - Selamlama metni (“Merhaba…”) - Kullanıcı adı - Satır içi bilgi blokları: - Kullanıcı ID'si (kopyalama ikonu) - Kimlik doğrulama durumu - Güvenlik seviyesi - Saat dilimi - Son giriş zaman damgası - Sağ: - "Bilgiyi gizle" değiştirici Stil: - İnce iç gölgeler --- ### 5.2 Para Yatırma / Alış Kartı - Orta boyutlu kart - Para yatırma seçeneklerini açıklayan başlık metni - İki eylem satırı: - Para Yatır (dolar veya kripto para) - Hisse al (yerel para birimi) - Her satır: - İkon - Etiket - Ok eylem butonu (altın aksan) --- ### 5.3 Toplam Varlık Kartı - USD bakiyesi ve USD eşdeğerini gösterir - Arka planda büyük, soldurulmuş Dolar sembolu filigranı - Eylem sekmeleri: - Hisse Al - Para Yatır - Çek - Sayısal değerler büyüktür --- ### 5.4 VIP Seviye Kartı - Mevcut VIP seviyesini gösterir - Spot ve vadeli işlem ücret oranları - Token varlıkları için ilerleme çubuğu - "Daha fazla gör" bağlantısı İlerleme çubuğu: - Yuvarlatılmış - Koyu arka plan şeridi --- ### 5.5 Mevcut Varlıklar Tablosu - Tablo düzeni içeren kart - Sütunlar: - Coin (ikon + ad) - Fiyat - 24s Değişim - 4s Trend (sparkline) - Eylemler (Para Yatır, Çek, İşlem Yap) Sparkline'lar: - Pozitif trend için yeşil - Negatif trend için kırmızı Hover: - Satır başına ince arka plan vurgusu --- ### 5.6 Ortaklık Programı Kartı - Promosyon kartı - Altın coin çizimi - Kısa açıklama ve CTA butonu ("Şimdi başvur") --- ### 5.7 Bilgi / Haber Kartı - Duyuruların dikey listesi - Başlık + zaman damgası - Üstte "Daha fazla gör" bağlantısı --- ## 6. Renk Paleti - Birincil arka plan: derin kömür / siyah - Kart yüzeyleri: biraz daha açık - Aksan rengi: sıcak altın - Metin hiyerarşisi: - Beyaz (birincil) - Sönük gri (ikincil) - Koyu gri (devre dışı) - Durum renkleri: - Pozitif için yeşil - Negatif için kırmızı --- ## 7. Efektler ve Etkileşim - Her yerde yuvarlatılmış köşeler (sm) # Tasarım jetonları: { // Genel tema tanımı "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Düzen ölçümleri ve yapısı "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Renk sistemi "colors": { "background": "#0B0D10", // Ana uygulama arka planı "primaryAccent": "#F5A623", // Altın/turuncu vurgu "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Tipografi ölçeği "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 } }, // Temel UI bileşenleri "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" } }, // İkon sistemi "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </gereksinimler>
