Mercury
Mga pampang ng Alpine sa dapit-hapon
Ang Mercury ay gumagana sa loob ng isang estetika ng pagbabangko sa Alpine: isang halos itim na canvas (#171721) ang lumilikha ng isang sinematiko, mala-obserbatoryong kapaligiran, kung saan ang mga ibabaw ng nilalaman ay lumulutang bilang bahagyang mas magaan na mga graphite card. Ang interface ay pangunahing monochrome—ivory text sa onyx, na may isang matingkad na cobalt (#5266eb) na elemento na eksklusibong ginagamit para sa pangunahing operasyon ng "Open Account". Ang tipograpiya ay nagtataglay ng pangunahing pagpapahayag: ang isang custom display font na 480 (hindi bold o light) na ipinares sa isang banayad na body font na 400 ay lumilikha ng isang kumpiyansa ngunit hindi kailanman magarbo na istilo. Ang mga bahagi ay patag at walang frame, umaasa sa isang 12px graphite card radius at mga kontrol na hugis kapsula upang tukuyin ang istraktura sa halip na mga anino. Ang pangunahing elemento ng larawan, na sumasakop sa buong ibabaw ng pahina—mga malabong bundok laban sa isang nag-iisang mesa—ay nagtatakda ng tono bago magsimula ang user interface, at ang bawat kasunod na elemento ay nagpapanatili ng tahimik at premium na kadiliman.
Ang lahat ng nilalaman ay dinisenyo sa madilim at buong lapad na istilo. Ang pangunahing screen ay isang 100px na buong lapad na larawan na may nakasentrong headline, subtext, at isang form block para sa pagkolekta ng impormasyon sa pakikipag-ugnayan sa email (maximum na lapad na ~640px). Sa ibaba ng pangunahing screen, ang nilalaman ay nakaayos sa mga seksyon na may maximum na lapad na 1200px na may 72px na patayong margin, na nagpapalitan sa pagitan ng layout ng teksto na may dalawang hanay sa kaliwa at isang larawan sa kanan, at mga card ng paglalarawan ng produkto na may tatlong hanay. Ang nabigasyon ay isang transparent na bar sa itaas na nakapatong sa pangunahing screen, na, habang nag-i-scroll ka, ay lumilipat sa isang solidong madilim na laman na nakapagpapaalaala sa frosted glass (blur sa background). Madilim ang footer na may teksto ng tala. Malawak ang patayong ritmo—maluwag ang densidad na may maraming espasyo sa pagitan ng mga seksyon. Walang nabigasyon sa gilid; lahat ng nabigasyon ay matatagpuan sa itaas na bar.
Ang pangunahing seksyon ay pinangungunahan ng mga full-width na sinematikong litrato—mga atmospera at nakaka-inspire na tanawin (mga maulap na bundok, mga liblib na lugar ng trabaho sa kalikasan)—na nagpoposisyon sa pagbabangko bilang isang mapagnilay-nilay at kahanga-hangang karanasan. Ang mga litrato ay may mataas na kalidad, bahagyang desaturated, na may malamig na mga tono at isang banayad na madilim na overlay upang mapanatili ang madaling mabasang teksto. Sa ibaba ng pangunahing seksyon, ang mga imahe ay nagpapalitan ng mga screenshot ng user interface ng produkto at mga abstract, atmospheric na background. Walang mga ilustrasyon, walang mga icon na kahawig ng mga likhang sining—ang mga visual na elemento ay alinman sa photographic o purong functional. Ang istilo ng icon sa buong user interface ay isang minimalist, kulay-garing na istilo ng linya/glyph na ginagamit sa nabigasyon, mga buton, at mga elemento ng anyo.
Paleta
Tatak
- Cobalt
#5266eb— Ginagamit ang lila para sa mga napunang buton, mga piling estado ng nabigasyon, at mga sandali ng conversion na hinimok ng pokus.
Neutral
- Onyx Canvas
#171721— Background ng pangunahing pahina, pangunahing overlay para sa home screen, mga canvas para sa footer at mga seksyon. - Graphite Card
#1e1e2a— Ang nakataas na mga ibabaw ng karton at mga seksyon ay isang hakbang na mas magaan kaysa sa canvas, na lumilikha ng isang maayos na paghihiwalay. - Obsidian Button
#272735— Karagdagang mga pagpuno ng butones, mga naka-embed na background ng form, mga hindi nakakahawang interactive na ibabaw. - Slate Border
#70707d— Mga panghati na may katamtamang kapal at mga hangganang istruktural sa pagitan ng mga bloke ng nilalaman. - Mist Border
#e2e3ed— Manipis, halos hindi mapapansing mga hangganan, halos hindi mapapansing mga balangkas ng buton, mga gilid ng input field - isang mapusyaw na hangganan sa isang madilim na background. - Ash Text
#c3c3cc— Pangunahing teksto, pantulong na teksto, karagdagang mga label - pinasimpleng hirarkiya nang walang pagkawala ng kakayahang mabasa.
Tipograpiya
mula 12 hanggang 65px · 9 na hakbang
- arcadia — kapalit: Inter · mga balangkas 360, 400, 420, 480 · Pangunahin at Interface ng Gumagamit - Isang font para sa nabigasyon, katawan ng teksto, mga buton, mga input field, mga label, at pantulong na teksto, na may bigat na 400 para sa katawan ng teksto at 480 para sa diin. Ang intermediate weight scale (360, 420, 480) sa halip na ang pamantayan (300/400/600) ay nagbibigay sa teksto ng Mercury ng isang natatanging balanseng hitsura—hindi kailanman matapang, hindi kailanman manipis, palaging sinusukat.
- arcadiaDisplay — kapalit: Söhne Breit · mga balangkas 360, 480, 530 · Ang font para sa mga heading at pandekorasyon na elemento ay ginagamit sa 480 weight para sa lahat ng laki ng heading mula 28px hanggang 65px, habang ang 530 ay nakalaan para sa pinakamalaking pandekorasyon na elemento. Ang mababang taas ng linya (1.1–1.2) at positibong pagitan ng mga letra (0.01–0.02em) ay nagbibigay sa pandekorasyon na teksto ng malawak at arkitektural na hitsura, sa halip na ang naka-compress na istruktura na makikita sa tekstong editoryal.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 12px |
| Radius ng buton | 32px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 72px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Mercury at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Origin Financial — Isang hatinggabi na galeriya ng tahimik na karangyaan. Isang tahimik, halos madilim na silid kung saan ang malalaking serif font at ilang maliwanag na kulay na mga panel ay lumilikha ng pakiramdam na ang pananalapi ay isang maingat na inayos na likhang sining.
- Air — eskultura na "Hatinggabing Langit sa Pamamagitan ng Salamin"
- Slash — Hatinggabing vault na may ginintuang mga ledger
- dope.security — Terminal ng hatinggabi na may mga lilang beacon
- Modal — Isang phosphorescent terminal sa isang madilim na silid ng server - ang tanging pinagmumulan ng liwanag ay isang matingkad na berdeng kulay
- Giga — Hatinggabi na abot-tanaw sa ibabaw ng nagyelong obsidian
- Dovetail — Sentro ng Kontrol ng Blueprint sa Hatinggabi
- Dovetail — Isang blueprint sa ilalim ng itim na buwan—halos hindi nakikitang mga linya ng graph, puting font, isang lilang kislap
- AgentQL — Mga Northern Lights sa ibabaw ng terminal sa gabi
- Supabase — Isang code editor sa hatinggabi na may berdeng tuldok na parang posporesente—isang chromatic pulse sa dagat ng alikabok ng karbon
- Changelog — Ang obserbatoryo console sa likod ng maitim na salamin
- GitHub — Isang space command panel na may mga bioluminescent control point—isang madilim at maaliwalas na workspace kung saan ang isang berdeng liwanag ay nagtuturo sa daan pasulong.