Eres un diseñador de UI experimentado que adopta el diseño moderno, minimalista, sombras, cristal y colores suaves. Tu rol es crear un mockup profesional y hermoso, listo para entrega, basado en estos requisitos: <requirements> ## 1. Estilo General y Lenguaje Visual Esta interfaz representa un panel de trading de fintech / cripto premium y moderno usando un tema oscuro. El lenguaje visual combina **neumorfismo suave** y **estética Web3 de lujo**. Características principales: - Acentos cálidos en dorado/naranja - Paleta de colores monocromática con efectos minimalistas y sombras - Diseño basado en tarjetas con profundidad y fondos sutiles - Bordes mínimos, separación mediante sombras o fondos claros Percepción objetivo: - Seguro - Profesional - Alta gama / grado institucional - Optimizado para traders experimentados --- ## 2. Estructura del Diseño ### Diseño Global - Panel desktop-first - Proporciones de salida: 3:2 - Tres regiones principales: 1. Barra de navegación superior (horizontal) 2. Navegación lateral izquierda (vertical) 3. Área de contenido principal (cuadrícula de tarjetas multicolumna) El espaciado es generoso, priorizando la claridad y el espacio visual de respiración. --- ## 3. Barra de Navegación Superior - Altura: 72px - Izquierda: - Texto del logo de marca "Mevolut" - "M" estilizada - Acento dorado/naranja - Centro: - Enlaces de navegación: Dashboard, Security, Referral, Trading Fees, API management - Derecha: - Enlace de orden - CTA principal: "Deposit" (botón píldora dorado) - Avatar del usuario (circular) - Alternador de tema (icono de luna) Tipografía: - Sans-serif limpia - Peso medio - Texto principal blanco, estados inactivos en gris apagado --- ## 4. Navegación Lateral Izquierda - Ancho: 240px - Fondo: casi negro - Elementos de navegación vertical con iconos: - Dashboard (activo) - Security - Referral - Trading Fees - API management - Alineado al fondo: - Settings Elemento activo: - Resaltado sutil de fondo - Tinte de fondo ligero - Contenedor redondeado Iconos: - Estilo outline - Acento dorado en estado activo --- ## 5. Área de Contenido Principal ### 5.1 Tarjeta de Resumen del Usuario - Tarjeta grande redondeada en la parte superior - Izquierda: - Avatar circular - Texto de saludo ("Hello…") - Nombre del usuario - Bloques de información inline: - UID (icono de copiar) - Estado de verificación de identidad - Nivel de seguridad - Zona horaria - Marca de tiempo del último inicio de sesión - Derecha: - Alternador "Hide info" Estilo: - Sombras internas sutiles --- ### 5.2 Tarjeta de Depósito / Compra - Tarjeta de tamaño mediano - Texto de título explicando opciones de depósito - Dos filas de acción: - Deposit (dólares o cripto) - Buy stocks (moneda local) - Cada fila: - Icono - Etiqueta - Botón de acción de flecha (acento dorado) --- ### 5.3 Tarjeta de Activo Total - Muestra saldo USD y equivalente USD - Símbolo de dólar grande y desvanecido como marca de agua en el fondo - Pestañas de acción: - Buy stocks - Deposit - Withdraw - Los valores numéricos son grandes --- ### 5.4 Tarjeta de Nivel VIP - Muestra el nivel VIP actual - Tasas de comisión spot y futuros - Barra de progreso para tenencias de tokens - Enlace "View more" Barra de progreso: - Redondeada - Pista de fondo oscuro --- ### 5.5 Tabla de Tenencias Actuales - Tarjeta que contiene un diseño de tabla - Columnas: - Coin (icono + nombre) - Price - 24h Change - 4h Trend (sparkline) - Actions (Deposit, Withdraw, Trade) Sparklines: - Verde para tendencia positiva - Rojo para tendencia negativa Hover: - Resaltado sutil de fondo por fila --- ### 5.6 Tarjeta del Programa de Afiliados - Tarjeta promocional - Ilustración de moneda dorada - Descripción corta y botón CTA ("Apply now") --- ### 5.7 Tarjeta de Información / Noticias - Lista vertical de anuncios - Titular + marca de tiempo - Enlace "View more" en la parte superior --- ## 6. Paleta de Colores - Fondo principal: carbón profundo / negro - Superficies de tarjetas: ligeramente más claras - Color de acento: dorado cálido - Jerarquía de texto: - Blanco (principal) - Gris apagado (secundario) - Gris oscuro (deshabilitado) - Colores de estado: - Verde para positivo - Rojo para negativo --- ## 7. Efectos e Interacción - Esquinas redondeadas en todo (sm) # Design tokens: { // Definición global del tema "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Mediciones y estructura del diseño "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistema de colores "colors": { "background": "#0B0D10", // Fondo principal de la aplicación "primaryAccent": "#F5A623", // Resaltado dorado/naranja "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Escala tipográfica "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 } }, // Componentes UI principales "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" } }, // Sistema de iconos "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
