Olet kokenut UI-suunnittelija, joka hyväksyy modernia, minimalistista muotoilua, varjoja, lasia ja pehmeitä värejä. Roolisi on luoda ammattimnen, kaunis mockup, joka on valmis toimitukseen näiden vaatimusten perusteella: <requirements> ## 1. Yleinen tyyli ja visuaalinen kieli Tämä käyttöliittymä edustaa premium, modernia fintech / kryptovaluuttakaupankäyntipaneelia, joka käyttää tummaa teemaa. Visuaalinen kieli yhdistää **pehmeä neumorfismi**, ja **ylellinen Web3-estetiikka**. Pääominsuudet: - Lämpimät kulta/oranssi accent-korostukset - Yksivärinen väripaletti minimalistisine tehosteineen ja varjoineen - Korttipohjnen asettelu syvyydellä ja hienoilla taustoilla - Minimirajat, erottelu varjojen t vaaleiden taustojen kautta Tavoitevkutelma: - Turvallinen - Ammattimnen - Korkealuokknen / instituutioiden tasoinen - Rientojen kauppiden käyttöön optimoitu --- ## 2. Asettelun rakenne ### Yleinen asettelu - Työpöytä ensin -paneeli - Lähtösuhteet: 3:2 - Kolme pääaluetta: 1. Ylänavigointipalkki (vaaka) 2. Vasen sivupalkin navigointi (pysty) 3. Pääsisältöalue (monisarakkeinen korttiruudukko) Välistys on runsas, priorisoiden selkeyttä ja visuaalista hengitystilaa. --- ## 3. Ylänavigointipalkki - Korkeus: 72px - Vasen: - Brändin logoteksti "Mevolut" - Stlattu "M" - Kulta/oranssi accent - Keskellä: - Navigointilinkit: Dashboard, Tietoturva, Suosittelu, Kaupankäyntimaksut, API-hallinta - Oikea: - Tilaustlinkki - Päätoimintanappi (CTA): "Talleta" (kulta-pillerinappi) - Käyttäjäavatar (pyöreä) - Teeman vhtaja (kuun kuvake) Typografia: - Puhdas sans-serif - Keskiraskas - Valkoinen pääteksti, hiljnen harmaa epäaktiiviset tilat --- ## 4. Vasen sivupalkin navigointi - Leveys: 240px - Tausta: lähes musta - Pystysuorat navigointikohteet kuvakkeilla: - Dashboard (aktiivinen) - Tietoturva - Suosittelu - Kaupankäyntimaksut - API-hallinta - Alhaalla kohdistettu: - Asetukset Aktiivinen kohde: - Hieno taustakorostus - Hieno taustaväripintaus - Pyöreä säilö Kuvakkeet: - Ääriviivatyylinen - Kulta-accent aktiivisessa tilassa --- ## 5. Pääsisältöalue ### 5.1 Käyttäjäyhteenvetokortti - Suuri pyöreä kortti ylhäällä - Vasen: - Pyöreä avatar - Tervehdysteksti ("Hei...") - Käyttäjän nimi - Rivissä olevat tietoblokit: - Käyttäjätunnus (kopiointikuvake) - Henkilöllisyyden vahvistuksen tila - Tietoturvataso - kavyöhyke - Viimeinen kirjautumiskaleima - Oikea: - "Piilota tiedot" -vhdin Tyyli: - Hienot sisävarjot --- ### 5.2 Talletus / Ostop kortti - Keskikokoinen kortti - Otsikkoteksti, joka selittää talletusvhtoehdot - Kaksi toimintoriviä: - Talleta (dollareita t kryptovaluuttaa) - Osta osakkeita (pkallisvaluutta) - Joknen rivi: - Kuvake - Selite - Nuolitoimintanappi (kulta-accent) --- ### 5.3 Kokonsomsuuskortti - Näyttää USD-saldo ja USD-vasta-arvo - Suuri, häivytetty dollarimerkkivesileima taustalla - Toimintavälilehdet: - Osta osakkeita - Talleta - Nosta - Numeriset arvot ovat suuria --- ### 5.4 VIP-tasokortti - Näyttää nykyisen VIP-tason - Spot- ja futuurimaksujen hinnat - Edistymispalkki token-omistuksille - "Katso lisää" -linkki Edistymispalkki: - Pyöreä - Tumma taustarata --- ### 5.5 Nykyiset omistukset -taulukko - Kortti, joka sisältää taulukkoasettelun - Sarakkeet: - Kolikko (kuvake + nimi) - Hinta - 24h muutos - 4h trendi (sparkline) - Toiminnot (Talleta, Nosta, Kaupankäynti) Sparkline-kaaviot: - Vihreä positiiviselle trendille - Punnen negatiiviselle trendille Hiiren osoitin: - Hieno taustakorostus joka riville --- ### 5.6 Kumppanuusohjelmakortti - Promootiokortti - Kulta kolikon kuvitus - Lyhyt kuvaus ja CTA-nappi ("Hae nyt") --- ### 5.7 Tiedote / Uutiskortti - Pystysuora ilmoituslista - Otsikko + kaleima - "Katso lisää" -linkki ylhäällä --- ## 6. Väripaletti - Päätausta: syvä hiilimusta / musta - Kortin pinnat: hieman vaaleammat - Accent-väri: lämmin kulta - Tekstihierarkia: - Valkoinen (pää) - Hiljnen harmaa (toissijnen) - Tumma harmaa (pois käytöstä) - Tilavärit: - Vihreä positiiviselle - Punnen negatiiviselle --- ## 7. Tehosteet ja vuorovkutus - Pyöreät kulmat kkkialla (sm) # Suunnittelutunnisteet: { // Global theme definition "theme": { "mode": "tumma", "style": [ "pehmeä-neumorfismi", "premium-fintech" ] }, // Layout measurements and structure "layout": { "type": "työpöytä-kaupankäyntipaneeli", "grid": "kolme-saraketta", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Color system "colors": { "background": "#0B0D10", // Mn app background "primaryAccent": "#F5A623", // Kulta/oranssi korostus "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": "ei mitään", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "läpinäkyvä", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "ääriviiva" }, "table": { "rowHeight": 56, "divider": "hieno", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Icon system "icons": { "style": "ääriviiva", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>
