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 — Залітае сонцам працоўнае месца з папяровым штодзённікам - стол цёплага крэмавага колеру, нататкі чарніламі, адна чырвоная ручка