تو یک طراح رابط کاربری باتجربهای که طراحی مدرن و مینیمال، سایه، شیشه و رنگهای نرم را در آغوش میگیرد. نقش تو ساختن یک ماکاپ حرفهای و زیبای آمادهٔ تحویل بر اساس این الزامات است: ## ۱. سبک کلی و زبان بصری این رابط یک داشبورد لوکس و مدرن فینتک / معاملات کریپتو با تم تیره را بازنمایی میکند. زبان بصری **نئومورفیسم نرم** و **زیباییشناسی لوکس Web3** را ترکیب میکند. ویژگیهای اصلی: - هایلایتهای تاکیدی طلایی/نارنجی گرم - پالت رنگ تکرنگ با افکتها و سایههای مینیمال - چیدمان کارتمحور با عمق و پسزمینههای ظریف - حاشیههای حداقلی، جداسازی از طریق سایه یا پسزمینهٔ روشن ادراک هدف: امن، حرفهای، سطحبالا / در سطح نهادی، بهینه برای معاملهگران باتجربه. ## ۲. ساختار چیدمان ### چیدمان کلی - داشبورد دسکتاپ-اول - تناسبات خروجی: ۳:۲ - سه ناحیهٔ اصلی: ۱. نوار ناوبری بالا (افقی) ۲. نوار کناری ناوبری چپ (عمودی) ۳. ناحیهٔ محتوای اصلی (گرید چندستونی کارتها) فاصلهگذاری سخاوتمندانه است و وضوح و فضای تنفس بصری را در اولویت میگذارد. ## ۳. نوار ناوبری بالا - ارتفاع: ۷۲ پیکسل - چپ: متن لوگوی برند «Mevolut»، «M» استایلایزشده، تاکید طلایی/نارنجی - مرکز: لینکهای ناوبری: Dashboard, Security, Referral, Trading Fees, API management - راست: لینک Order، دکمهٔ اصلی: «Deposit» (دکمهٔ قرصی طلایی)، آواتار کاربر (دایرهای)، کلید تم (آیکون ماه) تایپوگرافی: سنسسریف تمیز، وزن متوسط، متن اصلی سفید، حالتهای غیرفعال خاکستری کمرنگ. ## ۴. نوار کناری ناوبری چپ - عرض: ۲۴۰ پیکسل - پسزمینه: نزدیک به مشکی - آیتمهای ناوبری عمودی با آیکون: Dashboard (فعال)، Security، Referral، Trading Fees، API management - همترازشده در پایین: Settings آیتم فعال: هایلایت ظریف پسزمینه، تهرنگ اندک پسزمینه، کانتینر گردشده. آیکونها: سبک خطی، تاکید طلایی در حالت فعال. ## ۵. ناحیهٔ محتوای اصلی ### ۵.۱ کارت نمای کلی کاربر - کارت گرد بزرگ در بالا - چپ: آواتار دایرهای، متن خوشآمد («Hello…»)، نام کاربر - بلوکهای اطلاعاتی درونخطی: UID (آیکون کپی)، وضعیت احراز هویت، سطح امنیت، منطقهٔ زمانی، زمان آخرین ورود - راست: کلید «Hide info» سبک: سایههای داخلی ظریف. ### ۵.۲ کارت واریز / خرید - کارت با اندازهٔ متوسط - متن عنوان که گزینههای واریز را توضیح میدهد - دو ردیف کنش: واریز (دلار یا کریپتو)، خرید سهام (ارز محلی) - هر ردیف: آیکون، برچسب، دکمهٔ کنش فلشی (تاکید طلایی) ### ۵.۳ کارت دارایی کل - نمایش موجودی دلاری و معادل دلاری - نماد دلار بزرگ و محو بهعنوان واترمارک پسزمینه - تبهای کنش: Buy stocks، Deposit، Withdraw - مقادیر عددی بزرگاند ### ۵.۴ کارت سطح VIP - سطح VIP فعلی را نشان میدهد - نرخ کارمزد اسپات و فیوچرز - نوار پیشرفت برای دارایی توکن - لینک «View more» نوار پیشرفت: گردشده، مسیر پسزمینهٔ تیره. ### ۵.۵ جدول داراییهای فعلی - کارتی حاوی چیدمان جدول - ستونها: کوین (آیکون + نام)، قیمت، تغییر ۲۴ساعته، روند ۴ساعته (اسپارکلاین)، کنشها (Deposit، Withdraw، Trade) اسپارکلاینها: سبز برای روند مثبت، قرمز برای منفی. هاور: هایلایت ظریف پسزمینه در هر ردیف. ### ۵.۶ کارت برنامهٔ همکاری - کارت تبلیغاتی، تصویرسازی سکهٔ طلایی، توضیح کوتاه و دکمهٔ کنش («Apply now») ### ۵.۷ کارت اطلاعات / اخبار - فهرست عمودی اعلانها، تیتر + زمانمهر، لینک «View more» در بالا ## ۶. پالت رنگ - پسزمینهٔ اصلی: زغالی/مشکی عمیق - سطوح کارت: اندکی روشنتر - رنگ تاکیدی: طلایی گرم - سلسلهمراتب متن: سفید (اصلی)، خاکستری کمرنگ (ثانویه)، خاکستری تیره (غیرفعال) - رنگهای وضعیت: سبز برای مثبت، قرمز برای منفی ## ۷. افکتها و تعامل - گوشههای گردشده در سراسر (کوچک) # توکنهای طراحی: { // تعریف تم سراسری "theme": { "mode": "dark", "style": ["soft-neumorphism", "premium-fintech"] }, // اندازهها و ساختار چیدمان "layout": { "type": "desktop-dashboard", "grid": "three-column", "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 } }, // کامپوننتهای اصلی رابط "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" } }, // سیستم آیکون "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </الزامات>