Вие сте опитен UI дизайнер, приемащ модерен, минималистичен дизайн, сенки, стъкло и меки цветове. Вашата роля е да създадете професионален, красив макет, готов за доставка, базиран на тези изисквания: <изисквания> ## 1. Общ стил и визуален език Този интерфейс представлява премиум, модерен финтех / крипто търговски панел с тъма тема. Визуалният език комбинира **мек неуморфизъм** и **луксозна Web3 естетика**. Основни характеристики: - Топли златисто-оранжеви акценти - Монохромна цветова палитра с минималистични ефекти и сенки - Макет на база карти с дълбочина и фини фонове - Минимални рамки, разделение чрез сенки или светли фонове Целево възприятие: - Сигурен - Професионален - Висококласов / институционално качество - Оптимизиран за опитни търговци --- ## 2. Структура на макета ### Глобален макет - Панел, оптимизиран за настолни компютри - Пропорции на изхода: 3:2 - Три основни региона: 1. Горна навигационна лента (хоризонтална) 2. Ляво странично меню (вертикално) 3. Основна област за съдържание (многоколонкова мрежа от карти) Разстоянията са големи, с приоритет на яснота и визуален простор за дихание. --- ## 3. Горна навигационна лента - Височина: 72px - Отляво: - Текст на лого на бранда "Mevolut" - Стилизирана буква "M" - Златисто-оранжев акцент - В центъра: - Навигационни връзки: Панел, Сигурност, Препоръка, Такси за търговия, Управление на API - Отдясно: - Връзка за поръчка - Основно CTA: "Депозит" (златиста пилюла бутон) - Аватар на потребителя (кръгъл) - Превключвател на тема (икона на луна) Типография: - Чист безсерифен шрифт - Средна тегло - Бял основен текст, приглушено сиво за неактивни състояния --- ## 4. Ляво странично меню - Ширина: 240px - Фон: почти черен - Вертикални навигационни елементи с икони: - Панел (активен) - Сигурност - Препоръка - Такси за търговия - Управление на API - Подравнени в долната част: - Настройки Активен елемент: - Фино подчертаване на фона - Лека цветна тона на фона - Закръглен контейнер Икони: - Контурен стил - Златист акцент за активно състояние --- ## 5. Основна област за съдържание ### 5.1 Карта за преглед на потребителя - Голяма закръглена карта в горната част - Отляво: - Кръгъл аватар - Текст за поздрав ("Здравейте…") - Име на потребителя - Вградени информационни блокове: - UID (икона за копиране) - Статус на удостоверяване на самоличността - Ниво на сигурност - Часова зона - Време на последно влизане - Отдясно: - Превключвател "Скриване на информация" Стил: - Фини вътрешни сенки --- ### 5.2 Карта за депозит / покупка - Карта с среден размер - Заглавие, обясняващо опциите за депозит - Два реда за действия: - Депозит (долари или криптовалути) - Покупка на акции (местна валута) - Всеки ред: - Икона - Етикет - Бутон за действие със стрелка (златист акцент) --- ### 5.3 Карта за общи активи - Показва баланс в USD и еквивалент в USD - Голяма, бледна водна знак на знака за долар във фона - Карти с действия: - Покупка на акции - Депозит - Теглене - Числовите стойности са големи --- ### 5.4 Карта за VIP ниво - Показва текущо VIP ниво - Такси за спот и фючърс търговия - Лента за прогрес за токен позиции - Връзка "Виж повече" Лента за прогрес: - Закръглена - Пътека с тъмен фон --- ### 5.5 Таблица с текущи позиции - Карта, съдържаща табличен макет - Колони: - Монета (икона + име) - Цена - Промяна за 24 часа - Тенденция за 4 часа (мини графика) - Действия (Депозит, Теглене, Търговия) Мини графики: - Зелени за положителна тенденция - Червени за отрицателна тенденция При задържане на мишката: - Фино подчертаване на фона за всеки ред --- ### 5.6 Карта за партньорска програма - Промоционална карта - Илюстрация на златиста монета - Кратко описание и CTA бутон ("Кандидатствай сега") --- ### 5.7 Карта за информация / новини - Вертикален списък с обяви - Заглавие + времева марка - Връзка "Виж повече" в горната част --- ## 6. Цветова палитра - Основен фон: дълбок въгленчер / черен - Повърхности на карти: леко по-светли - Акцентен цвят: топло златист - Йерархия на текста: - Бял (основен) - Приглушено сиво (вторичен) - Тъмно сиво (деактивиран) - Цветове за статус: - Зелен за положителен - Червен за отрицателен --- ## 7. Ефекти и взаимодействия - Закръглени ъгли навсякъде (малки) # Design tokens: { // Global theme definition "theme": { "mode": "тъмна", "style": [ "мек неуморфизъм", "премиум-финтех" ] }, // Layout measurements and structure "layout": { "type": "настолен-панел", "grid": "триколонков", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Color system "colors": { "background": "#0B0D10", // Mn app background "primaryAccent": "#F5A623", // Gold/orange highlight "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typography scale "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 } }, // Core UI components "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": "контурен" }, "table": { "rowHeight": 56, "divider": "фин", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Icon system "icons": { "style": "контурен", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
