Ets un dissenyador d'UI experimentat que adopta un disseny modern, minimalista, ombres, vidre i colors suaus. El teu rol és crear un maquet professional i bell, a punt per lliurar, basat en aquests requisits: <requirements> ## 1. Estil general i llenguatge visual Aquesta interfície representa un tauler de negociació fintech / criptomonedes premium i modern que utilitza un tema fosc. El llenguatge visual combina **neumorfisme suau** i **estètica Web3 de luxe**. Característiques principals: - Ressaltats d'accent daurados / taronja càlids - Paleta de colors monocromàtica amb efectes minimalistes i ombres - Disseny basat en targetes amb profunditat i fons subtils - Vores mínimes, separació mitjançant ombres o fons clars Percepció objectiu: - Segur - Professional - Alta gamma / grau institucional - Optimitzat per a comerciants experimentats --- ## 2. Estructura de disseny ### Disseny global - Tauler orientat a escriptori - Proporcions de sortida: 3:2 - Tres regions principals: 1. Barra de navegació superior (horitzontal) 2. Navegació lateral esquerra (vertical) 3. Àrea de contingut principal (quadrícula multicolumna de targetes) L'espat és generós, prioritzant la claredat i l'esp visual respirable. --- ## 3. Barra de navegació superior - Alçada: 72px - Esquerra: - Text del logotip de la marca "Mevolut" - "M" estilitzat - Accent daurad / taronja - Centre: - Enllaços de navegació: Tauler, Seguretat, Referències, Comissions de negociació, Gestió d'API - Dreta: - Enllaç de comanda - CTA principal: "Dipòsit" (botó pastilla daurada) - Avatar de l'usuari (circular) - Commutador de tema (icona de lluna) Tipografia: - Sans-serif neta - Pes mitjà - Text principal blanc, estats inactius en gris apagat --- ## 4. Navegació lateral esquerra - Amplada: 240px - Fons: grebé negre - Elements de navegació vertical amb icones: - Tauler (actiu) - Seguretat - Referències - Comissions de negociació - Gestió d'API - Alineat a la part inferior: - Configuració Element actiu: - Ressaltat de fons subtil - Tint de fons lleu - Contenidor arrodonit Icones: - Estil contorn - Accent daurada a l'estat actiu --- ## 5. Àrea de contingut principal ### 5.1 Targeta de visió general de l'usuari - Targeta gran arrodonida a la part superior - Esquerra: - Avatar circular - Text de salutació ("Hola…") - Nom d'usuari - Blocs d'informació en línia: - UID (icona de còpia) - Estat de verificació d'identitat - Nivell de seguretat - Zona horària - Data i hora de l'últim inici de sessió - Dreta: - Commutador "Amagar informació" Estil: - Ombres interiors subtils --- ### 5.2 Targeta de dipòsit / compra - Targeta de mida mitjana - Text del títol que explica les opcions de dipòsit - Dos files d'acció: - Dipòsit (dòlars o criptomonedes) - Comprar accions (moneda local) - Cada fila: - Icona - Etiqueta - Botó d'acció fletxa (accent daurada) --- ### 5.3 Targeta de total d'actius - Mostra el saldo USD i l'equivalent en USD - Marca d'gua gran i esvaïda del símbol del dòlar al fons - Pestanyes d'acció: - Comprar accions - Dipòsit - Retirar - Els valors numèrics són grans --- ### 5.4 Targeta de nivell VIP - Mostra el nivell VIP actual - Comissions de spot i futurs - Barra de progrés per a participacions en tokens - Enllaç "Veure més" Barra de progrés: - Arrodonida - Pista de fons fosc --- ### 5.5 Taula de participacions actuals - Targeta que conté una disposició de taula - Columnes: - Moneda (icona + nom) - Preu - Canvi 24h - Tendència 4h (gràfic de línia) - Accions (Dipòsit, Retirar, Negociar) Gràfics de línia: - Verd per a tendència positiva - Vermell per a tendència negativa En passar el cursor: - Ressaltat de fons subtil per fila --- ### 5.6 Targeta del programa d'afiliats - Targeta promocional - Il·lustració de moneda daurada - Descripció curta i botó CTA ("Sol·licita ara") --- ### 5.7 Targeta d'informació / notícies - Llista vertical d'anuncis - Titular + marca de temps - Enllaç "Veure més" a la part superior --- ## 6. Paleta de colors - Fons principal: carbó profund / negre - Superfícies de targetes: lleugerament més clares - Color d'accent: daurad càlid - Jerarquia de text: - Blanc (principal) - Gris apagat (secundari) - Gris fosc (desactivat) - Colors d'estat: - Verd per a positiu - Vermell per a negatiu --- ## 7. Efectes i interacció - Cantonades arrodonides a tot arreu (sm) # Design tokens: { // Definició global del tema "theme": { "mode": "fosc", "style": [ "neumorfisme-suau", "fintech-premium" ] }, // Mesures i estructura de disseny "layout": { "type": "tauler-d'escriptori", "grid": "tres-columnes", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistema de colors "colors": { "background": "#0B0D10", // Fons principal de l'aplicació "primaryAccent": "#F5A623", // Ressaltat daurad / taronja "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 } }, // Components principals de la UI "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 d'icones "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
