Mercury
Альпійські банки в сутінках
Mercury працює в альпійській банківській естетиці: майже чорне полотно (#171721) створює кінематографічну, обсерваторну атмосферу, де поверхні контенту ширяють у вигляді трохи світліших графітових карток. Інтерфейс переважно монохромний — текст кольору слонової кістки на оніксі, з єдиним яскравим кобальтовим (#5266eb) елементом, який використовується виключно для основної операції «Відкрити рахунок». Типографіка несе на собі основну виразність: шрифт для відображення тексту середньої товщини 480 (ні жирний, ні світлий) в поєднанні з витонченим шрифтом для основного тексту товщиною 400 створює впевнений, але ніколи не кричить стиль. Компоненти плоскі та без рамок, покладаючись на графітову картку радіусом 12px та елементи керування у формі капсул для визначення структури, а не тіней. Головний фотоелемент, що займає всю поверхню сторінки, — туманні гори на фоні одинокого столу — задає тон, перш ніж почне працювати інтерфейс користувача, і кожен наступний елемент зберігає цю тиху, преміальну темряву.
Весь контент виконаний у темному стилі з повним наповненням. Головний екран – це фотографія розміром 100 пікселів з повним заповненням, центрованим заголовком, підтекстом та блоком форми для збору контактних даних електронної пошти (максимальна ширина ~640px). Під головним екраном контент розташований у секціях максимальної ширини 1200px з вертикальними відступами 72px, чергуючись між двоколоночним поділом тексту зліва та зображення праворуч та триколоночними картками з описом товарів. Навігація є прозорою верхньою панеллю, накладеною на головний екран, яка при прокручуванні переходить у суцільну темну заливку, що нагадує матове скло (розмиття фону). Нижній колонтитул темний із текстом-приміткою. Вертикальний ритм щедрий – простора щільність із великим простором між секціями. Бічна навігація відсутня; вся навігація знаходиться у верхній панелі.
У головному розділі домінують кінематографічні фотографії на всю ширину сторінки — атмосферні пейзажі, що надихають (туманні гори, відокремлені робочі місця на природі), які позиціонують банківську справу як споглядальний, піднесений досвід. Фотографії високої якості, трохи знебарвлені, з холодними тонами та оброблені тонким темним накладенням для збереження читання тексту. Нижче головного розділу зображення змінюються скріншотами інтерфейсу користувача продукту і абстрактними атмосферними фонами. Жодних ілюстрацій, жодних іконок як творів мистецтва — візуальні елементи або фотографічні, або чисто функціональні. Стиль іконок у всьому інтерфейсі користувача — мінімалістичний лінійний/гліфовий стиль кольору слонової кістки, що використовується в навігації, кнопках і елементах форм.
Палітра
Бренд
- Cobalt
#5266eb— Фіолетовий колір використовується для зафарбованих кнопок, вибраних станів навігації та моментів конверсії, на які спрямована увага.
Нейтральні
- Onyx Canvas
#171721— Основне тло сторінки, базове накладення для головного екрану, полотна для нижнього колонтитула та розділів. - Graphite Card
#1e1e2a— Підняті поверхні картону та секцій — на один крок світліше за полотно, що створює плавний поділ. - Obsidian Button
#272735— Додаткові заливки кнопок, фони вбудованих форм, ненав'язливі інтерактивні поверхні. - Slate Border
#70707d— Розділювачі середньої товщини та структурні межі між блоками контенту. - Mist Border
#e2e3ed— Тонкі, ледь помітні межі, ледь помітні контури кнопок, краї поля введення — світла межа на темному тлі. - Ash Text
#c3c3cc— Основний текст, допоміжний текст, додаткові мітки – спрощена ієрархія без втрати читання.
Друкарня
від 12 до 65px · 9 ступенів
- arcadia — заміна: Inter · зображення 360, 400, 420, 480 · Основний і інтерфейс користувача - шрифт для навігації, основного тексту, кнопок, полів введення, міток і допоміжного тексту з товщиною 400 для основного тексту і 480 для акцентного. Проміжна шкала товщини (360, 420, 480) замість стандартної (300/400/600) надає тексту Mercury чітко збалансований вигляд - ніколи не жирний, ніколи не тонкий, завжди розмірений.
- arcadiaDisplay — заміна: Söhne Breit · зображення 360, 480, 530 · Шрифт для заголовків та декоративних елементів – використовується у товщині 480 для всіх розмірів заголовків від 28px до 65px, а 530 зарезервовано для найбільших декоративних елементів. Мала міжрядкова висота (1,1-1,2) і позитивна міжлітерна відстань (0,01-0.02em) надають декоративному тексту широкий, архітектурний вигляд, а не стислу, як у редакційних текстах, структуру.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 12px |
| Радіус кнопок | 32px |
| Радіус карток | 12px |
| Тіні | ні — межі замість тіней |
| Між секціями | 72px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Mercury і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Origin Financial — Північна галерея тихого багатства. Тиха, майже темна кімната, де великі шрифти з засічками і кілька кольорових панелей, що світяться, створюють відчуття, що фінансова сфера – це ретельно відібраний витвір мистецтва
- Air — скульптура «Опівнічне небо крізь скло»
- Slash — Опівнічне сховище з позолоченими лініями бухгалтерських книг
- dope.security — Опівнічний термінал з фіолетовими маяками
- Modal — Фосфорний термінал у затемненій серверній кімнаті – єдиним джерелом світла є яскраво-зелений колір
- Giga — Опівнічний обрій над матовим обсидіаном
- Dovetail — Центр управління кресленнями опівночі
- Dovetail — Схема креслення під чорним місяцем – ледь помітні лінії графіка, білий шрифт, одна фіолетова іскра
- AgentQL — Північне сяйво над нічним терміналом
- Supabase — Редактор коду опівночі з фосфоресційною зеленою точкою — одиночний хроматичний імпульс на морі вугільного пилу
- Changelog — Консоль обсерваторії за темним склом
- GitHub — Космічна командна панель із біолюмінесцентними контрольними точками — темний, атмосферний робочий простір, де єдине зелене свічення вказує шлях уперед