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 — Түнкүсүн жумуш агымынын кыймылдаткычы – караңгы сервер бөлмөсүндөгү реалдуу убакыттагы автоматташтыруу полотносунун сезими, абал индикаторлору жана маалымат агымдары менен жарыктандырылган