Mercury
Alpejskie brzegi o zmierzchu
Mercury działa w alpejskim stylu bankowym: niemal czarne płótno (#171721) tworzy kinową, przypominającą obserwatorium atmosferę, gdzie treści unoszą się niczym nieco jaśniejsze grafitowe karty. Interfejs jest w przeważającej mierze monochromatyczny – tekst w kolorze kości słoniowej na onyksie, z pojedynczym, żywym kobaltowym elementem (#5266eb) używanym wyłącznie do głównej operacji „Otwórz konto”. Typografia niesie ze sobą główną ekspresję: niestandardowa czcionka displayowa o rozmiarze 480 (ani pogrubiona, ani jasna) w połączeniu z subtelną czcionką body o rozmiarze 400 tworzy pewny, ale nie krzykliwy styl. Komponenty są płaskie i bezramkowe, wykorzystując promień grafitowej karty o rozmiarze 12 pikseli i kontrolki w kształcie kapsułek do definiowania struktury, a nie cieni. Główny element fotograficzny, zajmujący całą powierzchnię strony – mgliste góry na tle samotnego stołu – nadaje ton przed uruchomieniem interfejsu użytkownika, a każdy kolejny element utrzymuje tę cichą, wyjątkową ciemność.
Cała treść jest zaprojektowana w ciemnym stylu, na całą szerokość. Główny ekran to zdjęcie o wymiarach 100 px, na całą szerokość, z wyśrodkowanym nagłówkiem, podtekstem i blokiem formularza do zbierania danych kontaktowych e-mail (maksymalna szerokość ~640 px). Poniżej głównego ekranu treść jest zorganizowana w sekcjach o maksymalnej szerokości 1200 px z 72 px pionowymi marginesami, naprzemiennie z dwukolumnowym układem tekstu po lewej stronie i obrazem po prawej stronie oraz trzykolumnowymi kartami opisu produktu. Nawigacja to przezroczysty górny pasek nałożony na główny ekran, który podczas przewijania przechodzi w jednolite ciemne wypełnienie przypominające matowe szkło (rozmycie tła). Stopka jest ciemna z tekstem notatki. Pionowy rytm jest hojny — przestrzenna gęstość z dużą ilością miejsca między sekcjami. Nie ma nawigacji bocznej; cała nawigacja znajduje się na górnym pasku.
W sekcji głównej dominują pełnoekranowe zdjęcia filmowe – nastrojowe, inspirujące krajobrazy (mgliste góry, ustronne miejsca pracy na łonie natury) – które przedstawiają bankowość jako kontemplacyjne, wzniosłe doświadczenie. Zdjęcia są wysokiej jakości, lekko przyciemnione, o chłodnych barwach i subtelnej, ciemnej warstwie, aby zachować czytelność tekstu. Poniżej sekcji głównej, obrazy przeplatają się ze zrzutami ekranu interfejsu użytkownika produktu i abstrakcyjnymi, nastrojowymi tłami. Brak ilustracji i ikon przypominających dzieła sztuki – elementy wizualne są albo fotograficzne, albo czysto funkcjonalne. Styl ikon w całym interfejsie użytkownika to minimalistyczny, w kolorze kości słoniowej styl linii/glifów, używany w nawigacji, przyciskach i elementach formularzy.
Paleta
Marka
- Cobalt
#5266eb— Kolor fioletowy jest używany w przypadku przycisków wypełnionych, wybranych stanów nawigacji i momentów konwersji opartych na skupieniu uwagi.
Neutralny
- Onyx Canvas
#171721— Tło strony głównej, podstawowa nakładka na ekran startowy, płótna dla stopki i sekcji. - Graphite Card
#1e1e2a— Podniesione powierzchnie tektury i sekcji są o jeden stopień jaśniejsze od płótna, co pozwala na uzyskanie płynnego podziału. - Obsidian Button
#272735— Dodatkowe wypełnienia przycisków, osadzone tła formularzy, dyskretne interaktywne powierzchnie. - Slate Border
#70707d— Średniej grubości podziały i granice strukturalne między blokami treści. - Mist Border
#e2e3ed— Cienkie, ledwo zauważalne obramowania, ledwo zauważalne kontury przycisków, krawędzie pól wprowadzania danych - jasna obwódka na ciemnym tle. - Ash Text
#c3c3cc— Tekst główny, tekst pomocniczy, etykiety dodatkowe - uproszczona hierarchia bez utraty czytelności.
Typografia
od 12 do 65px · 9 kroków
- arcadia — wymiana: Inter · wytyczne 360, 400, 420, 480 · Interfejs główny i użytkownika – czcionka do nawigacji, tekstu głównego, przycisków, pól wprowadzania, etykiet i tekstu pomocniczego, o grubości 400 dla tekstu głównego i 480 dla podkreślenia. Średnia skala grubości (360, 420, 480) zamiast standardowej (300/400/600) nadaje tekstowi Mercury wyraźnie zrównoważony wygląd – nigdy pogrubiony, nigdy cienki, zawsze wyważony.
- arcadiaDisplay — wymiana: Söhne Breit · wytyczne 360, 480, 530 · Czcionka do nagłówków i elementów dekoracyjnych ma grubość 480 dla wszystkich rozmiarów nagłówków od 28 do 65 pikseli, natomiast 530 jest zarezerwowana dla największych elementów dekoracyjnych. Niska wysokość linii (1,1–1,2 em) i dodatnie odstępy między literami (0,01–0,02 em) nadają tekstowi dekoracyjnemu szeroki, architektoniczny wygląd, w przeciwieństwie do ściśniętej struktury występującej w tekstach redakcyjnych.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 12px |
| Promień przycisku | 32px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 72px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Mercury i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Origin Financial — Północnoniebieska galeria cichego przepychu. Ciche, niemal ciemne pomieszczenie, w którym duże czcionki szeryfowe i kilka podświetlonych, kolorowych paneli stwarza wrażenie, że finanse to starannie wyselekcjonowane dzieło sztuki.
- Air — rzeźba „Północne niebo przez szkło”
- Slash — Skarbiec północny ze złoconymi księgami
- dope.security — Terminal północny z fioletowymi sygnalizatorami
- Modal — Terminal fosforyzujący w zaciemnionej serwerowni – jedynym źródłem światła jest jasnozielony kolor
- Giga — Północny horyzont nad zmrożonym obsydianem
- Dovetail — Centrum sterowania Blueprint o północy
- Dovetail — Plan pod czarnym księżycem – ledwo widoczne linie wykresu, biała czcionka, jeden fioletowy błysk
- AgentQL — Zorza polarna nad terminalem nocą
- Supabase — Edytor kodu o północy z fosforyzującą zieloną kropką – pojedynczym impulsem chromatycznym na morzu pyłu węglowego
- Changelog — Konsola obserwatorium za ciemnym szkłem
- GitHub — Kosmiczny panel dowodzenia z bioluminescencyjnymi punktami kontrolnymi — ciemna, nastrojowa przestrzeń robocza, w której pojedyncza zielona poświata wskazuje drogę naprzód.