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 — Цэнтр кіравання палётамі апоўначы з фасфарасцыруючымі зялёнымі акцэнтамі