Вы — опытный UI-дизайнер, придерживающийся современного, минималистичного дизайна, теней, стекла и мягких цветов. Ваша роль — создать профессиональный, красивый макет, готовый к сдаче, на основе следующих требований: <requirements> ## 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. Эффекты и взаимодействие - Закруглённые углы везде (sm) # Дизайн-токены: { // Глобальное определение темы "theme": { "mode": "тёмная", "style": [ "мягкий-неоморфизм", "премиальный-финтех" ] }, // Измерения и структура компоновки "layout": { "type": "десктоп-панель", "grid": "три-колонки", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Цветовая система "colors": { "background": "#0B0D10", // Основной фон приложения "primaryAccent": "#F5A623", // Золотой/оранжевый акцент "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Типографическая шкала "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 } }, // Основные UI-компоненты "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "нет", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "прозрачный", "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" } }, // Система иконок "icons": { "style": "контурный", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
