Jste zkušený UI designér, který přijímá moderní, minimalistický design, stíny, sklo a měkké barvy. Vaše role je vytvořit profesionální, krásný mockup připravený k dodání na základě těchto požadavků: <requirements> ## 1. Celkový styl a vizuální jazyk Toto rozhraní představuje prémiový, moderní fintech / crypto trading dashboard s použitím tmavého tématu. Vizuální jazyk kombinuje **měkký neumorfismus** a **luxusní Web3 estetiku**. Základní charakteristiky: - Teplé zlaté/oranžové akcentní zvýraznění - Monochromatická barevná paleta s minimalistickými efekty a stíny - Layout založený na kartách s hloubkou a jemnými pozadími - Minimální okraje, oddělení pomocí stínů nebo světlých pozadí Cílové vnímání: - Bezpečné - Profesionální - High-end / institucionální úroveň - Optimalizované pro zkušené obchodníky --- ## 2. Struktura layoutu ### Globální layout - Dashboard primárně pro desktop - Poměry výstupu: 3:2 - Tři hlavní oblasti: 1. Horní navigační lišta (horizontální) 2. Levá boční navigace (vertikální) 3. Hlavní obsahová oblast (vícesloupcová mřížka karet) Mezery jsou velkorysé, upřednostňující jasnost a vizuální prostor pro dýchání. --- ## 3. Horní navigační lišta - Výška: 72px - Vlevo: - Text loga značky "Mevolut" - Stylizované "M" - Zlatý/oranžový akcent - Střed: - Navigační odkazy: Dashboard, Zabezpečení, Referral, Obchodní poplatky, Správa API - Vpravo: - Odkaz na objednávky - Primární CTA: “Vklad” (zlaté pill tlačítko) - Avatar uživatele (kruhový) - Přepínač tématu (ikona měsíce) Typografie: - Čistý sans-serif - Střední tloušťka - Bílý primární text, tlumená šedá pro neaktivní stavy --- ## 4. Levá boční navigace - Šířka: 240px - Pozadí: téměř černé - Vertikální navigační položky s ikonami: - Dashboard (aktivní) - Zabezpečení - Referral - Obchodní poplatky - Správa API - Zarovnané dole: - Nastavení Aktivní položka: - Jemné zvýraznění pozadí - Mírný odstín pozadí - Zaoblený kontejner Ikony: - Styl outline - Zlatý akcent v aktivním stavu --- ## 5. Hlavní obsahová oblast ### 5.1 Karta přehledu uživatele - Velká zaoblená karta nahoře - Vlevo: - Kruhový avatar - Text pozdravu (“Ahoj…”) - Jméno uživatele - Inline info bloky: - UID (ikona kopírování) - Stav ověření identity - Úroveň zabezpečení - Časové pásmo - Časové razítko posledního přihlášení - Vpravo: - Přepínač “Skrýt info” Styl: - Jemné vnitřní stíny --- ### 5.2 Karta vkladu / nákupu - Středně velká karta - Text nadpisu vysvětlující možnosti vkladu - Dva řádky akcí: - Vklad (dolary nebo krypto) - Koupit akcie (místní měna) - Každý řádek: - Ikona - Štítek - Tlačítko akce se šipkou (zlatý akcent) --- ### 5.3 Karta celkových aktiv - Zobrazuje zůstatek v USD a ekvivalent v USD - Velký, vybledlý symbol dolaru jako vodoznak na pozadí - Akční záložky: - Koupit akcie - Vklad - Výběr - Numerické hodnoty jsou velké --- ### 5.4 Karta VIP úrovně - Zobrazuje aktuální VIP úroveň - Sazby poplatků pro spot a futures - Progress bar pro držbu tokenů - Odkaz “Zobrazit více” Progress bar: - Zaoblený - Tmavá dráha pozadí --- ### 5.5 Tabulka aktuálních držeb - Karta obsahující layout tabulky - Sloupce: - Mince (ikona + název) - Cena - Změna za 24h - Trend za 4h (sparkline) - Akce (Vklad, Výběr, Obchodovat) Sparklines: - Zelená pro pozitivní trend - Červená pro negativní trend Hover: - Jemné zvýraznění pozadí na řádek --- ### 5.6 Karta partnerského programu - Propagační karta - Ilustrace zlaté mince - Krátký popis a CTA tlačítko (“Přihlásit se nyní”) --- ### 5.7 Karta informací / novinek - Vertikální seznam oznámení - Nadpis + časové razítko - Odkaz “Zobrazit více” nahoře --- ## 6. Barevná paleta - Primární pozadí: hluboký uhlíkový / černá - Povrchy karet: mírně světlejší - Akcentní barva: teplá zlatá - Hierarchie textu: - Bílá (primární) - Tlumená šedá (sekundární) - Tmavá šedá (zakázané) - Stavové barvy: - Zelená pro pozitivní - Červená pro negativní --- ## 7. Efekty a interakce - Zaoblené rohy všude (sm) # Design tokeny: { // Definice globálního tématu "theme": { "mode": "tmavý", "style": [ "měkký-neumorfismus", "premiový-fintech" ] }, // Měření layoutu a struktura "layout": { "type": "desktop-dashboard", "grid": "třísloupcová", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Barevný systém "colors": { "background": "#0B0D10", // Hlavní pozadí aplikace "primaryAccent": "#F5A623", // Zlaté/oranžové zvýraznění "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typografická škála "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 } }, // Základní UI komponenty "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": "jemný", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Systém ikon "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
