Þú ert reyndur notendaviðmótshönnuður sem samþykkir nútíma, einfalda hönnun, skugga, gler og mjúka liti. Hlutverk þitt er að búa til faglegt, fallegt sýnishorn sem er tilbúið til afhendingar byggt á þessum kröfum: <requirements> ## 1. Heildarstíll og sjónrænt mál Þetta viðmót táknar fyrsta flokkar, nútímalegan fjármálatækni / kryptogjaldmiðla viðskiptastjórnunarpall sem notar dökkt þema. Sjónræna málið sameinar **mjúka neumorphism**, og **lúxusleg Web3 útlit**. Aðaleinkennir: - Hlý gulln/ appelsínulitir sem draga úr - Einlits litapalletti með einföldum áhrifum og skugga - Spjaldabyggt uppsetningu með dýpt og hægum bakgrunni - Lágmark af jaðrum, aðskilnaður með skugga eða ljósum bakgrunni Markmiðsmynd: - Öruggt - Faglegt - Hágæða / stofnstigsgæði - Hönnuð fyrir reyndari viðskiptamenn --- ## 2. Uppsetningarskipulag ### Heildaruppsetning - Skjáborðsviðmót fyrst - Úttaks hlutföll: 3:2 - Þrjár aðal svæði: 1. Toppstýringarstika (lárétt) 2. Vinstri hliðarstýring (lóðrétt) 3. Aðal innihaldssvæði (fjöldadálka rúðu af spjöldum) Bil eru stór, með áherslu á skýrleika og sjónrænt andræmi. --- ## 3. Toppstýringarstika - Hæð: 72px - Vinstri: - Vörumerkja texti "Mevolut" - Stílhæft "M" - Gulln/ appelsínulitur sem dregur úr - Miðja: - Stýringar tenglar: Stjórnunarpallur, Öryggi, Tilvísun, Viðskiptagjöld, API stjórnun - Hægri: - Pöntunartengill - Aðal aðgerðarhnappur: “Innborgun” (gullur pillu hnappur) - Notanda auðkennismynd (hringlaga) - Þemu rofi (tungl tákn) Leturgerð: - Hreinn stafalaus leturgerð - Miðlungs þyngd - Hvítur aðal texti, dökkur gráur óvirkur stöður --- ## 4. Vinstri hliðarstýring - Breidd: 240px - Bakgrunnur: nær svartur - Lóðréttar stýringar atriði með tákn: - Stjórnunarpallur (virkt) - Öryggi - Tilvísun - Viðskiptagjöld - API stjórnun - Neðst staðsett: - Stillingar Virkt atriði: - Hægur bakgrunnurlitningur - Lítil bakgrunnsblæming - Rúðaður geymir Tákn: - Útlínustíll - Gulln litur á virkum stöðum --- ## 5. Aðal innihaldssvæði ### 5.1 Yfirlitsspjald notanda - Stórt rúðað spjald efst - Vinstri: - Hringlaga auðkennismynd - Kveðjutexti (“Halló…”) - Notandanafn - Innfelldar upplýsingablokkir: - Notandaauðkenni (afritunartákn) - Staða auðkenningar - Öryggisstig - Tímabelti - Tímamerki síðustu innskráningar - Hægri: - “Fela upplýsingar” rofi Stíll: - Hægir innri skuggar --- ### 5.2 Innborgunar / Kaupaspjald - Miðlungs stærð spjald - Titiltexti sem útskýrir innborgunarmöguleika - Tvær aðgerðarlínur: - Innborgun (dollari eða kryptogjaldmiðlar) - Kaup á hlutabréfum (staða gjaldmiðill) - Hver lína: - Tákn - Merki - Ör aðgerðarhnappur (gulln litur) --- ### 5.3 Heildareignaspjald - Sýnir USD jöfnuð og USD jafngildi - Stórt, dauf Dollara tákn sem vatnsmerki í bakgrunni - Aðgerðarflipar: - Kaup á hlutabréfum - Innborgun - Uttaka - Töluleg gildi eru stór --- ### 5.4 VIP-stigsspjald - Sýnir núverandi VIP-stig - Spot og framtíðargjöld - Framvindumælir fyrir token eignir - “Sjá meira” tengill Framvindumælir: - Rúðaður - Dökkur bakgrunnur slóð --- ### 5.5 Núverandi eignatöflu - Spjald sem inniheldur töfluuppsetningu - Dálkar: - Mynt (tákn + nafn) - Verð - 24 klst breyting - 4 klst trend (sparkline) - Aðgerðir (Innborgun, Uttaka, Viðskipti) Sparkline línur: - Grænt fyrir jákvæðan trend - Rautt fyrir neikvæðan trend Yfirsvif: - Hægur bakgrunnurlitningur per röð --- ### 5.6 Tengiliðaforritsspjald - Kynningarspjald - Gull mynt teikning - Stutt lýsing og aðgerðarhnappur (“Sækja um núna”) --- ### 5.7 Upplýsinga / Fréttaspjald - Lóðréttur listi yfir tilkynningar - Fyrirsögn + tímamerki - “Sjá meira” tengill efst --- ## 6. Litapallett - Aðalbakgrunnur: dökkur kolgraf / svartur - Spjald yfirborð: örlítið ljósari - Áherslulitur: hlýr gulln - Textastig: - Hvítur (aðal) - Dökkur gráur (auka) - Dökkur gráur (óvirkt) - Stöðulitir: - Grænt fyrir jákvætt - Rautt fyrir neikvætt --- ## 7. Áhrif og gagnvirkni - Rúðuð horn alls staðar (sm) # Design tokens: { // Global theme definition "theme": { "mode": "dökkt", "style": [ "mjúkur-neumorphism", "fyrsta-flokkar-fjármálatækni" ] }, // Layout measurements and structure "layout": { "type": "skjáborðs-stjórnunarpallur", "grid": "þriggja-dálka", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Color system "colors": { "background": "#0B0D10", // Mn app background "primaryAccent": "#F5A623", // Gold/orange highlight "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Typography scale "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 } }, // Core UI components "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "enginn", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "gegnsætt", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "útlína" }, "table": { "rowHeight": 56, "divider": "hægur", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Icon system "icons": { "style": "útlína", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>