Huly
Північне сяйво в опівнічній обсерваторії — головний герой є вертикальним променем фіолетового кольору, що переходить у кораловий, і кожна тиха ділянка нижче за нього запозичує ту ж двоколірну історію, розказану в більш приглушеному тоні
Huly створює атмосферу космічного робочого простору: майже чорне полотно з єдиним фіолетово-бурштиновим сяйвом, що прорізає головний елемент, а нижче спокійніша сітка для підвищення продуктивності. Система працює у вузькому колірному діапазоні - один яскраво-синій і один кораловий кольори виконують всю роботу з просування бренду на тлі багатошарових графітових поверхонь, тому темний режим ніколи не здається нейтральним. Типографіка виконана в стилі Inter для всього функціонального, з шрифтом користувача (Esbuild), зарезервованим для ключових моментів, з кроком 80-84px і агресивною негативною міжлітерною відстанню. Компоненти мають форму капсули: радіуси 9999px на елементах управління, 12px на картках, мінімальна тінь і градієнтні лінії, що світяться, як основний декор. Сторінка чергується між темними ділянками, що займають всю сторінку, і спокійними світлими секціями, тому будь-який новий екран повинен визначитися з режимом роботи, перш ніж вибирати кольори.
Головна сторінка на всю ширину сторінки з вертикальним променем північного сяйва і заголовком, вирівняним по лівому краю, а також скріншотом продукту, розташованим внизу праворуч. Під головною сторінкою знаходиться область контенту максимальної ширини 1200px, що чергується з темними та світлими смугами. Кожен розділ є єдиним вертикальним блоком: заголовок + 3- або 4-колонова сітка карток, розділених 96px проміжками. Розділ «MetaBrain» порушує сітку центрованим заголовком та мозаїкою з карток різного розміру (велика головна картка + менші допоміжні картки). Сторінка насичена контентом стандартів SaaS, але використовує чергування темних і світлих смуг, щоб дати кожному розділу простір для «дихання». Навігація є єдиною прозорою верхньою панеллю, яка стає непрозорою при прокручуванні.
Головний елемент – це чистий градієнт північного сяйва, без фотографій. Всі ілюстрації - це реальні скріншоти інтерфейсу користувача продукту (канбан в темному режимі, вхідні повідомлення, календар), укладені в рамки карток, які служать одночасно доказом і прикрасою. Жодних фотографій у стилі лайфстайл, жодних стокових зображень, жодних 3D-рендерів. Єдиний візуальний елемент, що не відноситься до інтерфейсу користувача, - це тепле радіальне світіння у вигляді сонячних променів біля основи північного сяйва, намальоване у вигляді градієнта CSS. Іконки є монохромні лінійні іконки в кольорі #95979 або білий, ніколи не кольорові. Система розглядає свій власний темний інтерфейс користувача як головний елемент — продуктом є фотографії.
Палітра
Бренд
- Electric Iris
#5683da— Основне тло, індикатор активної навігації, ефектний акцент у вигляді північного сяйва — яскравий фіолетово-синій колір на вугільно-чорному фоні створює враження залученості, а не корпоративної активності. - Ember Pulse
#ff8964— Вторинний акцент, тепла зона північного сяйва, точка повідомлення, виділення ілюстрації — бурштиновий відтінок, який порушує стриманість синього кольору та надає теплоту променю.
Нейтральні
- Obsidian Canvas
#303236— Фон сторінки, що домінує поверхня - майже чорний колір з легким відтінком тепла, стандартне середовище для всього контенту. - Void
#090a0c— Глибокий поверхневий шар для градієнтів на головному екрані, модальних фонів і рамок, які повинні зливатися з полотном. - Charcoal Card
#111111— Підняті поверхні з картону та панелей, розташовані на одну сходинку вище за полотно. - Slate Edge
#4a4b50— Тонкі межі та роздільники на темних поверхнях - Iron Veil
#6b6c6d— Приглушений фон для тегів, заливки списку елементів і заливки у відключеному стані. - Smoke
#95979e— Обведення іконок, додатковий текст та неактивні елементи керування – основний робочий елемент середньо-сірого кольору.
Друкарня
від 11 до 80px · 8 ступенів
- Inter — заміна: DM Sans · зображення 300, 400, 500, 600, 700 · Весь функціональний текст інтерфейсу користувача — основний текст, навігація, кнопки, елементи списків, підписи, невеликі заголовки. Використовується з товщиною шрифту 500-600 для виділення, 400 для основного тексту, 300 - економно для ненав'язливих метаданих.
- Esbuild — заміна: Sora · зображення 400, 500, 600 · Тільки для відображення: заголовки-заставки, заголовки розділів, заголовки статей MetaBrain. Стиснена геометрія та щільна міжлітерна відстань створюють відчуття, що 84px більше підходить для редакційної роботи, ніж для SaaS-проектів. Ніколи не використовується нижче 28px.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | простора |
| Базовий крок | 12px |
| Радіус кнопок | 9999px |
| Радіус карток | 12px |
| Тіні | м'які тіні |
| Між секціями | 96px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Huly і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- monday — Біла майстерня з пастельними наклейками
- Slack — Сцена баклажанового кольору із білими прожекторами. Глибокий сливовий відтінок домінує в темних ділянках, а майже біле полотно дозволяє великим авангардним заголовкам вільно «дихати»
- Base44 — Блокнот, залитий сонячним світлом, із лаймовим маркером
- Supahub — М'яке денне світло на фіолетовому хребті. В основному біле, повітряне полотно, освітлене єдиним яскравим фіолетовим сонцем, з декоративними градієнтними сферами, що розливають колір у негативний простір, і щедрою округлою геометрією, що надає кожній поверхні приємної, відчутної ваги
- Raycast — Північний командний центр, кораловий неон
- Dimension — робоче місце, освітлене сутінками, з панелями з матового скла
- Wiza — Обсерваторія для пошуку корисних копалин у сутінках, оповита лавандовим туманом
- Paste — Бурштиновий ліхтар на білому мармурі — теплий градієнтний логотип бренду ширяє у величезному білому просторі, немов єдине освітлене вікно у засніженій будівлі
- Reworkd — М'яке денне світло на схемі продукту – єдиний колір, який говорить сам за себе, це кнопка дії та градієнтний заголовок над нею
- Reflect Notes — Зірковий фіолетовий космос — темна обсерваторія, де ноти ширяють, немов сузір'я, на тлі майже чорної індигової порожнечі.
- Ameba — Диспетчерська опівночі - електричний синій пульс усередині матових скляних панелей.
- Todoist — Залите сонцем робоче місце з паперовим щоденником — стіл теплого кремового кольору, нотатки чорнилом, одна червона ручка