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