Mevolut dark fintech trading dashboard UI mockup

Eres un diseñador de UI experimentado que adopta un diseño moderno y minimalista, sombras, vidrio y colores suaves. Tu función es crear un mockup profesional y hermoso, listo para entrega, basado en estos requisitos: ## 1. Estilo General y Lenguaje Visual Esta interfaz representa un panel de control premium y moderno de fintech/cripto trading con tema oscuro. El lenguaje visual combina **neumorfismo suave** y estética **Web3 de lujo**. Características principales: - Acentos cálidos dorados/naranjas - Paleta de colores monocromática con efectos y sombras minimalistas - 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 - De alta gama / grado institucional - Optimizado para traders experimentados --- ## 2. Estructura del Diseño ### Diseño Global - Panel de control priorizado para escritorio - Proporciones de salida: 3:2 - Tres regiones principales: 1. Barra de navegación superior (horizontal) 2. Barra de navegación lateral izquierda (vertical) 3. Área de contenido principal (cuadrícula de tarjetas de múltiples columnas) El espaciado es generoso, priorizando la claridad y el espacio visual. --- ## 3. Barra de Navegación Superior - Altura: 72px - Izquierda: - Texto del logotipo de la marca "Mevolut" - "M" estilizada - Acento dorado/naranja - Centro: - Enlaces de navegación: Panel de control, Seguridad, Referidos, Tarifas de trading, Gestión de API - Derecha: - Enlace de órdenes - CTA principal: "Depositar" (botón dorado tipo píldora) - Avatar de usuario (circular) - Alternador de tema (icono de luna) Tipografía: - Sans-serif limpia - Peso medio - Texto primario blanco, estados inactivos gris apagado --- ## 4. Barra de Navegación Lateral Izquierda - Ancho: 240px - Fondo: casi negro - Elementos de navegación vertical con iconos: - Panel de control (activo) - Seguridad - Referidos - Tarifas de trading - Gestión de API - Alineado abajo: - Configuración Elemento activo: - Resaltado de fondo sutil - Tinte de fondo ligero - Contenedor redondeado Iconos: - Estilo de contorno - 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 ("Hola…") - Nombre de usuario - Bloques de información en línea: - 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 "Ocultar información" Estilo: - Sombras interiores sutiles --- ### 5.2 Tarjeta de Depósito/Compra - Tarjeta de tamaño mediano - Texto de título que explica las opciones de depósito - Dos filas de acción: - Depositar (dólares o cripto) - Comprar acciones (moneda local) - Cada fila: - Icono - Etiqueta - Botón de acción con flecha (acento dorado) --- ### 5.3 Tarjeta de Activos Totales - Muestra el saldo en USD y el equivalente en USD - Marca de agua grande y desvanecida del símbolo de dólar en el fondo - Pestañas de acción: - Comprar acciones - Depositar - Retirar - Los valores numéricos son grandes --- ### 5.4 Tarjeta de Nivel VIP - Muestra el nivel VIP actual - Tarifas de spot y futuros - Barra de progreso para tenencias de tokens - Enlace "Ver más" Barra de progreso: - Redondeada - Pista de fondo oscuro --- ### 5.5 Tabla de Tenencias Actuales - Tarjeta que contiene un diseño de tabla - Columnas: - Moneda (icono + nombre) - Precio - Cambio 24h - Tendencia 4h (gráfico de chispa) - Acciones (Depositar, Retirar, Operar) Gráficos de chispa: - Verde para tendencia positiva - Rojo para tendencia negativa Al pasar el cursor: - Resaltado de fondo sutil por fila --- ### 5.6 Tarjeta del Programa de Afiliados - Tarjeta promocional - Ilustración de moneda dorada - Descripción breve y botón CTA ("Aplicar ahora") --- ### 5.7 Tarjeta de Información/Noticias - Lista vertical de anuncios - Titular + marca de tiempo - Enlace "Ver más" 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 (primario) - 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" ] }, // Medidas 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 principales de la interfaz "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" } }

Mevolut dark fintech trading dashboard UI mockup

Medios relacionados

Contenido del PromptGuardar

Uso

Referencias

Discusión