Authkit
Сабор з матавага шкла апоўначы
AuthKit стварае эстэтыку начной прэзентацыі прадукта: амаль чорнае палатно з матавымі шклянымі паверхнямі, сетка з ледзь прыкметных ліній чарцяжа і які свеціцца тэкст, які здаецца падсветленым з-за шклянога пласта. Шрыфт амаль цалкам белы на цёмным фоне, з адным яркім фіялетавым акцэнтам у якасці адзінага функцыянальнага элемента - кожная інтэрактыўная паверхня мае мяккую тонкую лінію халоднага сіне-белага колеру, а не цвёрдую рамку. Кампаненты размешчаны на напаўпразрыстых пластах, накладзеных адзін на аднаго па-над навакольным свячэннем, а карткі выглядаюць як шкляныя пласціны, падсветленыя знізу, а не папяровыя панэлі. Інтэрвалы вялікія і рытмічныя; галоўны элемент - гэта адзіны падсветлены лагатып ва ўсю шырыню старонкі, акружаны парылымі шклянымі карткамі, а не традыцыйная падзеленая кампаноўка.
Цёмнае палатно, які займае ўсю шырыню, кантэйнер кантэнту, цэнтраваны па цэнтры, максімальнай шырынёй 1200px. Галоўны элемент - гэта адзін цэнтраваны падсветлены лагатып («AuthKit» градыентным шрыфтам) пад невялікім надпісам у выглядзе бровы, за якім / пад якім веерам перакрываюцца тры плаваюць шкляныя карткі з формай аўтарызацыі (левая картка нахілена налева, цэнтральная картка павялічана да максімальнага памеру, правая картка. Пад галоўным элементам па цэнтры размешчаны перамыкач светлай/цёмнай тэмы. Радок з функцыямі ўяўляе сабой гарызантальную часавую шкалу з 6 абразкоў з тонкімі злучальнымі лініямі паміж круглымі абразкамі. Рытм раздзелаў: кожны раздзел пачынаецца з цэнтраванага надпісу ў выглядзе бровы, апраўленай загасаючымі гарызантальнымі лініямі, затым варта вялікі цэнтраваны загаловак (44-48px), затым адзін радок прыглушанага асноўнага тэксту (16-18px), максімальная шырыня ~640px. У падзеле «Налада» адлюстроўваецца макет акна браўзэра з размешчанай па цэнтры карткай аўтарызацыі, акружанай якія плаваюць панэлямі інспектара карыстацкага інтэрфейсу (каляровыя палітры, паўзункі радыусу, выбар значка лагатыпа, тэкставае поле кнопкі, поле фону старонкі), размешчанымі па кутах хола.
Візуальнае афармленне дамінуюць макеты формаў аўтарызацыі, выкананыя ў стылі «шкляной марфалогіі» (палі ўводу электроннай пошты/пароля, кнопкі ўваходу праз сацыяльныя сеткі, увод кода без пароля), прадстаўленыя ў выглядзе плаваючых напаўпразрыстых картак на фоне паўночнага палатна. Абразкі функцый уяўляюць сабой манахромныя лінейныя гліфы ў #d1e4fa ўнутры круглых матавых плітак. Ледзь прыкметная сетка чарцяжа (1px ліній у rgba(186,215,247,0.06)) пакрывае ўсю старонку, ствараючы атмасферу, а ў верхняй частцы галоўнага элемента свеціцца арэол пражэктара з канічным градыентам. Ніякіх фатаграфій, ніякіх малюнкаў, якія дэманструюць лад жыцця, ніякіх скрыншотаў прадукта - прадукт САМ з'яўляецца візуальным элементам: палі аўтарызацыі, размешчаныя як шкляныя прататыпы ў цёмнай студыі.
Палітра
Брэнд
- Void Violet
#663af3— Асноўны колер для кнопкі закліку да дзеяння (CTA) - адзіны каляровы акцэнт, які выкарыстоўваецца выключна для кнопкі "Працягнуць/Адправіць" усярэдзіне формаў аўтарызацыі; яркі фіялетавы колер на фоне амаль чорнага стварае адчуванне тэрміновасці, не парушаючы манахромную каляровую гаму.
Нейтральныя
- Midnight Canvas
#05060f— Фон старонкі, самая глыбокая паверхня карткі, запаўненне бэйджа - амаль чорная аснова, на якой усё астатняе парыць. - Steel Plate
#2f343e— Прыўзнятая паверхня, кнопкі для фантомных/другасных дзеянняў, незаўважная панэльная падкладка. - Fog Veil
#9da7ba— Асноўны тэкст, тэкст на картцы - чытаны, але адсунуты на другі план у параўнанні з загалоўкамі. - Moon Mist
#c7d3ea— Асноўны тэкст, дадатковыя пазнакі, прыглушаны дапаможны тэкст - Frost Glow
#d1e4fa— Асноўны колер залівання для асноўнага тэксту і спасылак, тэксту значка, залівання абразкоў - пярэдні план, які свеціцца па змаўчанні. - Ice Highlight
#d8ecf8— Светлы тэкст на цёмных паверхнях, інвертаваныя подпісы і высокакантрасныя загалоўкі. Не выкарыстоўвайце яго ў якасці асноўнага колеру закліку да дзеяння; Градыент загалоўка - плыўны пераход зверху ўніз ад светла-блакітнага да далікатна-блакітнага, выкарыстоўваецца ў лагатыпе AuthKit і ключавых загалоўках.
Друкарня
ад 12 да 48px · 8 прыступак
- Untitled Sans — замена: Inter · напісання 400, 500, 600, 700 · Асноўны тэкст, карыстацкі інтэрфейс, кнопкі, палі ўводу, значкі, невялікія загалоўкі - універсальны шрыфт для ўсяго функцыянальнага.
- aeonikPro — замена: Space Grotesk · напісання 400, 500 · Адлюстраванне толькі загалоўкаў - фірмовы знак "AuthKit", загалоўкі раздзелаў, асноўны тэкст; таўшчыня шрыфта 500 пры 44-48px надае фірмоваму знаку шырокі, спакойны выгляд, а не кідкі акцэнт.
- dotDigital — замена: JetBrains Mono · напісання 400 · Надпісы, напісаныя загалоўнымі літарамі ("Уяўляем", "Пашыраемая канструкцыя", "Ззяй ярка") - монашырынныя загалоўныя літары з разметкай 0.10em служаць ненадакучлівымі падзельнікамі паміж асноўным тэкстам і загалоўкам.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | прасторная |
| Базавы крок | 16px |
| Радыус кнопак | 999px |
| Радыус картак | 16px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 120px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Authkit і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Resend — чорны аксаміт з фіялетавым неонавым колерам
- Gsap — Аніміраваная дошка ў дызайн-студыі. Амаль чорная сцяна, цёплы крэмавы мел і пяць каляровых маркераў - па адным для кожнай дысцыпліны анімацыі.
- Slash — Паўночнае сховішча з пазалочанымі лініямі бухгалтарскіх кніг
- Raycast — Паўночны камандны цэнтр, каралавы неон
- Dimension — працоўнае месца, асветленае прыцемкам, з панэлямі з матавага шкла
- Modal — Фосфарны тэрмінал у прыцемненым серверным пакоі - адзінай крыніцай святла з'яўляецца ярка-зялёны колер
- Reflect Notes — Зорны фіялетавы космас - цёмная абсерваторыя, дзе ноты параць, нібы сузор'і, на фоне амаль чорнай індыгавай пустаты.
- LaunchDarkly — Неонавая дыспетчарская - цёмная кабіна пілота, дзе фіялетавыя сігналы пульсуюць скрозь вугальна-чорныя панэлі
- Ameba — Дыспетчарская апоўначы - электрычны сіні пульс усярэдзіне матавых шкляных панэляў
- AgentQL — Паўночнае ззянне над начным тэрміналам
- Neon — Серверны пакой пасля наступлення цемры. Глыбокая цемра, дзе адзінымі крыніцамі святла з'яўляюцца дадзеныя і ўзаемадзеянне паміж карыстальнікамі
- N8n — Рухавічок кіравання працоўнымі працэсамі апоўначы - адчуванне працавальнага ў рэжыме рэальнага часу палатна аўтаматызацыі ў цёмным серверным пакоі, асветленага індыкатарамі стану і струменямі дадзеных