Auros
Абісальний термінал з біолюмінесцентними кулями даних
Auros функціонує як фінтех-термінал, розташований у безодні: майже чорне бірюзове полотно з біолюмінесцентними кулями даних та градієнтами світла від бірюзового до рожевого, що створюють відчуття глибини, плинності та потоку. Інтерфейс мінімалістичний і кінематографічний, покладаючись на єдиний дисплей (Matter) середньої товщини з агресивним негативним трекінгом для створення масштабу без зайвої кидкості. Кольори розподілені рівномірно - ахроматичні білі та сріблясті відтінки використовуються майже для всього контенту, у той час як хроматична палітра зарезервована для атмосферних градієнтів, розрізнення поверхонь карт та однієї фірмової кнопки у формі таблетки, яка змінює колір від бірюзово-блакитної доли. Карти ширяють на ледь помітних бірюзових поверхневих виступах (радіус 16px, без тіней), а не за рахунок висоти, тому ієрархія сприймається як глибина води, а не як тінь на папері. Компоненти виглядають продуманими та схожими на інструменти: мітки з трекінгом у верхньому регістрі, тонкі геометричні значки стрілок, великі числові показники блідо-рожевого кольору.
Темне полотно, яке займає всю ширину сторінки, з контентом максимальною шириною 1440px. Головний елемент – це центрований текстовий блок (брова → заголовок → підтекст → заклик до дії), що займає всю висоту області перегляду, з частинкою як фоновий елемент. Розділи являють собою смуги на всю ширину, розділені великими вертикальними проміжками 68px+, що чергуються між полотном і злегка втопленими поверхнями. Розділ «Дослідити» використовує асиметричне двоколонне компонування: ліва колонка містить розташовані один над одним картки з функціями, права колонка містить геометричну молекулярну ілюстрацію. Контент центрується у вузьких колонках (максимум ~600px) для зручності читання, а не розтягується від краю до краю. Нижній колонтитул є утопленою яму (#011d1c) з вертикальним відступом 120px, що створює ефект глибокого басейну. Навігація є тонкою прозорою панеллю з елементами, розташованими на відстані 16-24px один від одного. Загальний ритм кінематографічний і просторий - кожна ділянка дихає, а глибока, як вода, колірна гама створює відчуття, що в кожному проході падаєш все глибше.
Візуальний ряд мінімалістичний та атмосферний. На головній сторінці зображена тривимірна сфера з частинок — тисячі маленьких бірюзово-блакитних і білих крапок, що утворюють кулю, що обертається, яка перегукується з кольором полотна і лавандово-рожевим акцентом по краях, створюючи ефект біолюмінесценції, що нагадує інформаційний об'єкт. Як декоративні елементи у правій колонці використовуються плоскі геометричні молекулярні діаграми (білі кола і тонкі сполучні лінії на темному полотні). Жодних фотографій, жодних зображень, що відображають спосіб життя, жодних людей — візуальна мова ґрунтується на чистій графіці даних та абстрактних формах. Сфера частинок є визначальним візуальним елементом фірмового стилю; вона повинна з'являтися хоча б один раз на будь-якій важливій сторінці, щоб закріпити метафору глибоководдя.
Палітра
Бренд
- Liquid Abyss
#012624— Основний фон – це основа сторінки, заголовок, головний елемент та домінуюче темно-бірюзове поле. Створює атмосферу глибоководного середовища. - Liquid Deep
#011d1c— Поглиблений рівень поверхні — фон нижнього колонтитулу та глибші картонні панелі. Сприймається як на півтону темніше за полотно, створюючи ледь помітний градієнт глибини вниз. - Liquid Kelp
#003734— Піднята поверхня картки і основна заливка кнопки - піднята поверхня, розташована на сходинку вище за прірву. Використовується для карток із функціями, панелей контенту та початкової точки градієнтної кнопки.
Нейтральні
- Liquid Mist
#edfffe— Холодний відтінок білого для виділення основного тексту, заголовків розділів та теплих світлих типографічних моментів. Щойно вловимий блакитний відтінок пов'язує основний текст із бірюзовою кольоровою гамою. - Platinum
#ffffff— Чисто білий колір використовується для заголовків, елементів навігації, обведення піктограм та висококонтрастного тексту. Це основний колір тексту на всіх рівнях заголовків та в основній навігації. - Silver Mist
#bbc7c6— Другий текст, приглушені описи і колір посилань у вихідному стані. Має легкий зелений відтінок, що гармонує з бірюзовим тлом. - Ash
#f2f2f2— Додатковий текст для цитат та відгуків. Нейтральний холодний сірий відтінок, коли бірюзовий підтон Silver Mist здається надто яскравим. - Slate Deep
#707777— Ледве помітний поверхневий відтінок для неактивних або малопомітних фонів. Знаходиться між полотном та картоном, забезпечуючи дуже незначну диференціацію по висоті. - Lavender Phosphor
#fde9ff— Колір підсвічування для великих статистичних даних, цифр лічильників та важливих показників. Рожевий відтінок у градієнті підпису — використовується економно як акценти, що світяться, на темних поверхнях.
Друкарня
від 10 до 96px · 6 ступенів
- Matter — заміна: Inter · зображення 400, 500 · Основний шрифт для заголовків та основного тексту – використовується з товщиною 500 для всіх заголовків (H1–H3) та великого кінетичного тексту (86–295px). Товщина 400 для основного тексту і тексту інтерфейсу користувача. Характеризується агресивною негативною міжлітерною відстанню при великих розмірах (-0.04em при 61px, -0.046em при 86px) і широкою позитивною міжбуквенною відстанню в заголовних великих літерах (0.08em при 20px, 0.12em при 0.12em 10px). Стратегія використання тільки середньої товщини для заголовків є відмінною рисою – немає жирного чи світлого шрифту – що надає шрифту однакову механічну впевненість.
- Arial — заміна: system-ui · зображення 400 · Вторинний резервний варіант для інтерактивних елементів інтерфейсу користувача (навігація, кнопки, мікротекст в заголовку, нижній колонтитул). З'являється лише в 14px - використовується як безпечний універсальний резервний варіант, коли Matter не завантажений, і охоплює мітки форм, текст кнопок і невеликий допоміжний текст.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 20px |
| Радіус кнопок | 6px |
| Радіус карток | 16px |
| Тіні | ні — межі замість тіней |
| Між секціями | 68px |
| Ширина сторінки | 1440px |
ІІ збере ваш сайт у стилі Auros і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Design Full-Time — кінотеатр-студія з одним теплим прожектором
- Air — скульптура «Опівнічне небо крізь скло»
- Slash — Опівнічне сховище з позолоченими лініями бухгалтерських книг
- Raycast — Північний командний центр, кораловий неон
- Dimension — робоче місце, освітлене сутінками, з панелями з матового скла
- Modal — Фосфорний термінал у затемненій серверній кімнаті – єдиним джерелом світла є яскраво-зелений колір
- Giga — Опівнічний обрій над матовим обсидіаном
- Reflect Notes — Зірковий фіолетовий космос — темна обсерваторія, де ноти ширяють, немов сузір'я, на тлі майже чорної індигової порожнечі.
- Ameba — Диспетчерська опівночі - електричний синій пульс усередині матових скляних панелей.
- AgentQL — Північне сяйво над нічним терміналом
- Frame — Кінотеатр для нічних кінопоказів. Темна кімната, де єдиний синій прожектор виконує всю роботу, а інтерфейс користувача відступає на другий план, дозволяючи проектувати креативний контент вперед
- Harness — Центр управління польотами опівночі з фосфоресційними зеленими акцентами