Bạn là một nhà thiết kế UI giàu kinh nghiệm, theo đuổi phong cách thiết kế hiện đại, tối giản, bóng đổ, kính và màu sắc nhẹ nhàng. V trò của bạn là tạo ra một bản mô phỏng chuyên nghiệp, đẹp mắt, sẵn sàng bàn giao dựa trên các yêu cầu sau: <yêu cầu> ## 1. Phong cách Tổng thể & Ngôn ngữ Hình ảnh Giao diện này đại diện cho một bảng điều khiển giao dịch fintech / tiền điện tử cao cấp, hiện đại sử dụng chủ đề tối. Ngôn ngữ hình ảnh kết hợp **neumorphism mềm mại** và **thẩm mỹ Web3 sang trọng**. Đặc điểm cốt lõi: - Điểm nhấn vàng/cam ấm áp - Bảng màu đơn sắc với hiệu ứng tối giản và bóng đổ - Bố cục dạng thẻ với chiều sâu và nền nhẹ nhàng - Đường viền tối thiểu, phân cách bằng bóng đổ hoặc nền sáng Cảm nhận mục tiêu: - An toàn - Chuyên nghiệp - Cao cấp / cấp tổ chức - Tối ưu hóa cho nhà giao dịch giàu kinh nghiệm --- ## 2. Cấu trúc Bố cục ### Bố cục Tổng thể - Bảng điều khiển ưu tiên máy tính để bàn - Tỷ lệ đầu ra: 3:2 - Ba khu vực chính: 1. Thanh điều hướng trên cùng (ngang) 2. Thanh bên trái (dọc) 3. Khu vực nội dung chính (lưới nhiều cột gồm các thẻ) Khoảng cách rộng rãi, ưu tiên sự rõ ràng và không gian thở trực quan. --- ## 3. Thanh Điều hướng Trên cùng - Chiều cao: 72px - Bên trái: - Văn bản logo thương hiệu "Mevolut" - Chữ "M" cách điệu - Điểm nhấn vàng/cam - Trung tâm: - Liên kết điều hướng: Bảng điều khiển, Bảo mật, Giới thiệu, Phí giao dịch, Quản lý API - Bên phải: - Liên kết Đơn hàng - CTA chính: “Nạp tiền” (nút hình viên thuốc màu vàng) - Hình đại diện người dùng (hình tròn) - Nút chuyển đổi chủ đề (biểu tượng mặt trăng) Kiểu chữ: - Sans-serif sạch sẽ - Độ đậm trung bình - Văn bản chính màu trắng, trạng thái không hoạt động màu xám nhẹ --- ## 4. Thanh bên Trái - Chiều rộng: 240px - Nền: gần đen - Các mục điều hướng dọc có biểu tượng: - Bảng điều khiển (đang hoạt động) - Bảo mật - Giới thiệu - Phí giao dịch - Quản lý API - Căn dưới: - Cài đặt Mục đang hoạt động: - Điểm nhấn nền nhẹ - Màu nền nhẹ - Vùng chứa bo tròn Biểu tượng: - Kiểu đường viền - Điểm nhấn vàng ở trạng thái hoạt động --- ## 5. Khu vực Nội dung Chính ### 5.1 Thẻ Tổng quan Người dùng - Thẻ bo tròn lớn ở trên cùng - Bên trái: - Hình đại diện tròn - Văn bản chào hỏi (“Xin chào…”) - Tên người dùng - Các khối thông tin nội tuyến: - UID (biểu tượng sao chép) - Trạng thái xác minh danh tính - Mức bảo mật - Múi giờ - Dấu thời gian đăng nhập cuối - Bên phải: - Nút chuyển đổi “Ẩn thông tin” Phong cách: - Bóng đổ bên trong nhẹ --- ### 5.2 Thẻ Nạp tiền / Mua - Thẻ kích thước trung bình - Văn bản tiêu đề giải thích các tùy chọn nạp tiền - H hàng hành động: - Nạp tiền (đô la hoặc tiền điện tử) - Mua cổ phiếu (tiền tệ địa phương) - Mỗi hàng: - Biểu tượng - Nhãn - Nút hành động mũi tên (điểm nhấn vàng) --- ### 5.3 Thẻ Tổng Tài sản - Hiển thị số dư USD và giá trị tương đương USD - Hình mờ biểu tượng Đô la lớn, mờ ở nền - Các tab hành động: - Mua cổ phiếu - Nạp tiền - Rút tiền - Giá trị số lớn --- ### 5.4 Thẻ Cấp VIP - Hiển thị cấp VIP hiện tại - Phí giao dịch giao ngay và hợp đồng tương l - Thanh tiến trình cho số dư token - Liên kết “Xem thêm” Thanh tiến trình: - Bo tròn - Đường ray nền tối --- ### 5.5 Bảng Danh mục Hiện tại - Thẻ chứa bố cục bảng - Các cột: - Coin (biểu tượng + tên) - Giá - Thay đổi 24h - Xu hướng 4h (biểu đồ đường) - Hành động (Nạp, Rút, Giao dịch) Biểu đồ đường: - Màu xanh lá cho xu hướng tích cực - Màu đỏ cho xu hướng tiêu cực Di chuột: - Điểm nhấn nền nhẹ cho mỗi hàng --- ### 5.6 Thẻ Chương trình Liên kết - Thẻ quảng cáo - Hình minh họa đồng xu vàng - Mô tả ngắn và nút CTA (“Đăng ký ngay”) --- ### 5.7 Thẻ Thông tin / Tin tức - Danh sách dọc các thông báo - Tiêu đề + dấu thời gian - Liên kết “Xem thêm” ở trên cùng --- ## 6. Bảng Màu - Nền chính: than chì đậm / đen - Bề mặt thẻ: sáng hơn một chút - Màu nhấn: vàng ấm - Phân cấp văn bản: - Trắng (chính) - Xám nhẹ (phụ) - Xám đậm (vô hiệu hóa) - Màu trạng thái: - Xanh lá cho tích cực - Đỏ cho tiêu cực --- ## 7. Hiệu ứng & Tương tác - Các góc bo tròn xuyên suốt (nhỏ) # Token thiết kế: { // Định nghĩa chủ đề toàn cầu "theme": { "mode": "tối", "style": [ "neumorphism-mềm", "fintech-cao-cấp" ] }, // Đo lường bố cục và cấu trúc "layout": { "type": "bảng-điều-khiển-máy-tính", "grid": "ba-cột", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Hệ thống màu sắc "colors": { "background": "#0B0D10", // Nền ứng dụng chính "primaryAccent": "#F5A623", // Điểm nhấn vàng/cam "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Thang đo kiểu chữ "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 } }, // Các thành phần UI cốt lõi "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "không", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "trong suốt", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "đường-viền" }, "table": { "rowHeight": 56, "divider": "tinh-tế", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Hệ thống biểu tượng "icons": { "style": "đường-viền", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </yêu cầu>
