Authkit
Шөнө дундын царцсан шилэн сүм
AuthKit нь шөнийн цагаар бүтээгдэхүүний танилцуулгын гоо зүйг бий болгодог: бараг хар өнгийн даавуу, царцсан шилэн гадаргуутай, бараг харагдахгүй шугамын тор, шилэн давхаргаар гэрэлтсэн мэт гэрэлтсэн текст. Үсгийн хэв нь бараан дэвсгэр дээр бараг бүхэлдээ цагаан өнгөтэй бөгөөд цорын ганц функциональ элемент болох ганц тод нил ягаан өнгийн өргөлттэй - интерактив гадаргуу бүр нь хатуу хүрээний оронд хүйтэн хөх-цагаан өнгийн зөөлөн, нимгэн шугамтай. Бүрэлдэхүүн хэсгүүдийг тунгалаг давхаргууд дээр байрлуулж, орчны гэрэл дээр давхарласан бөгөөд картууд нь цаасан хавтангийн оронд доороос гэрэлтсэн шилэн хавтан шиг харагдаж байна. Зай нь том бөгөөд хэмнэлтэй; гол элемент нь хуудасны бүх өргөнийг хамарсан нэг гэрэлтсэн лого бөгөөд уламжлалт хуваасан дэлгэцийн зохион байгуулалтын оронд хөвөгч шилэн картуудаар хүрээлэгдсэн байдаг.
Төвлөрсөн контент контейнер бүхий бүрэн өргөн, бараан өнгийн зураг, хамгийн ихдээ 1200 пиксел өргөн. Үндсэн элемент нь хөмсөг хэлбэртэй жижиг текстийн доор байрлах ганц, төвлөрсөн, гэрэлтсэн лого ("AuthKit" градиент фонтоор) бөгөөд түүний ард/доор нэвтрэх маягтын сэнстэй гурван хөвөгч шилэн карт байрладаг (зүүн карт зүүн тийш хазайсан, төвийн карт хамгийн томдсон, баруун карт баруун тийш хазайсан). Гэрэл/бараан сэдвийн товчлуур нь үндсэн элементийн доор төвлөрсөн байна. Онцлогийн мөр нь дугуй дүрсүүдийн хооронд нимгэн холбогч шугам бүхий 6 дүрсний хэвтээ цагийн хуваарь юм. Хэсгийн хэмнэл: хэсэг бүр бүдгэрсэн хэвтээ шугамаар хүрээлэгдсэн төвлөрсөн хөмсөг хэлбэртэй текстээр эхэлж, дараа нь том, төвлөрсөн гарчиг (44-48 пиксел), дараа нь дуугүй үндсэн хуулбарын нэг мөр (16-18 пиксел), хамгийн ихдээ ~640 пиксел өргөнтэй. Тохируулах хэсэг нь дизайны хэрэгслийн ажлын талбар шиг зурагны буланд байрлуулсан хөвөгч UI байцаагчийн самбарууд (өнгөний палитр, радиус гулсагч, лого дүрс сонгогч, товчлуурын текст талбар, хуудасны дэвсгэр талбар)-аар хүрээлэгдсэн төвд байрлах нэвтрэх карт бүхий хөтчийн цонхны загварыг харуулдаг.
Харааны дизайнд нэвтрэх маягтын загварууд давамгайлж, "шилэн морфологи" хэв маягаар бүтээгдсэн (имэйл/нууц үг оруулах талбарууд, сошиал медиа нэвтрэх товчлуурууд, нууц үггүй код оруулах), шөнө дундын зурагтай дэвсгэр дээр хөвөгч, тунгалаг карт хэлбэрээр дүрслэгдсэн. Онцлог дүрсүүд нь дугуй, царцсан хавтангийн доторх #d1e4fa монохром шугаман глифүүд юм. Нарийн тор (rgba (186,215,247,0.06) 1px шугамууд) хуудсыг бүхэлд нь хамарч, уур амьсгалыг бүрдүүлдэг бол конус хэлбэрийн градиент гэрэл нь гол элементийн дээд хэсэгт гялалздаг. Зураг байхгүй, амьдралын хэв маягийн зураг байхгүй, бүтээгдэхүүний дэлгэцийн зураг байхгүй - бүтээгдэхүүн өөрөө харааны элемент юм: харанхуй студид шилэн загварууд шиг байрлуулсан нэвтрэх талбарууд.
Палетт
Брэнд
- 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 — Шөнө дундын ажлын урсгалын хөдөлгүүр – харанхуй серверийн өрөөнд бодит цагийн автоматжуулалтын зураг мэт мэдрэмж төрүүлж, төлөвийн үзүүлэлт болон өгөгдлийн урсгалаар гэрэлтдэг