Authkit
သန်းခေါင်ယံတွင် Frosted Glass Cathedral
AuthKit က ညအချိန် ထုတ်ကုန်တင်ဆက်မှု အလှတရားကို ဖန်တီးပေးပါတယ်- ဖန်မျက်နှာပြင်များပါရှိသော အနက်ရောင်နီးပါး ပတ္တူ၊ မမြင်နိုင်သော မျဉ်းကြောင်းများပါရှိသော ဇယားကွက်နှင့် ဖန်အလွှာဖြင့် လင်းလက်တောက်ပနေသော စာသားများပါရှိသော တောက်ပသောစာသားများပါရှိသော စာလုံးမျက်နှာပြင်သည် မှောင်မိုက်သောနောက်ခံတွင် အဖြူရောင်နီးပါးဖြစ်ပြီး တစ်ခုတည်းသော လုပ်ဆောင်နိုင်သော အစိတ်အပိုင်းအဖြစ် တောက်ပသော ခရမ်းရောင်အသားပေးဖြင့် ပြုလုပ်ထားသည်- အပြန်အလှန်တုံ့ပြန်နိုင်သော မျက်နှာပြင်တစ်ခုစီတွင် မာကျောသောဘောင်အစား နူးညံ့ပြီး ပါးလွှာသော အပြာရောင်-အဖြူရောင်မျဉ်းကြောင်းတစ်ခုပါရှိသည်။ အစိတ်အပိုင်းများကို ဖောက်ထွင်းမြင်ရသော အလွှာများပေါ်တွင် စီစဉ်ထားပြီး ပတ်ဝန်းကျင်အလင်းရောင်ပေါ်တွင် အလွှာလိုက်ထားကာ ကတ်များသည် စက္ကူပြားများအစား အောက်မှ လင်းလက်တောက်ပနေသော ဖန်ပြားများအဖြစ် ပေါ်လာသည်။ အကွာအဝေးသည် ကြီးမားပြီး စည်းချက်ညီသည်။ အဓိကအစိတ်အပိုင်းမှာ ရိုးရာ split-screen layout မဟုတ်ဘဲ floating glass card များဖြင့် ဝန်းရံထားသော စာမျက်နှာ၏ အကျယ်တစ်ခုလုံးကို ဖုံးအုပ်ထားသော တောက်ပသော လိုဂိုတစ်ခုတည်းဖြစ်ပြီး floating glass card များဖြင့် ဝန်းရံထားသည်။
အကျယ်အပြည့်၊ မှောင်မိုက်သော ပတ္တူတစ်ခုဖြစ်ပြီး အလယ်ဗဟိုတွင် အများဆုံး 1200px အကျယ်ရှိသည်။ အဓိကဒြပ်စင်မှာ မျက်ခုံးပုံသဏ္ဍာန်စာသားငယ်တစ်ခုအောက်တွင် တစ်ခုတည်းသော၊ အလယ်ဗဟိုတွင် လင်းလက်နေသော လိုဂို ("AuthKit" ဖောင့်ဖြင့်) ဖြစ်ပြီး၊ ၎င်းနောက်/အောက်တွင် login ပုံစံကို အပြင်ဘက်သို့ ဖြန့်ထားသော floating glass ကတ်သုံးခုရှိသည် (ဘယ်ဘက်ကတ်ကို ဘယ်ဘက်သို့စောင်းထားသည်၊ အလယ်ဗဟိုကတ်ကို အမြင့်ဆုံးဖြစ်အောင်ပြုလုပ်ထားသည်၊ ညာဘက်ကတ်ကို ညာဘက်သို့စောင်းထားသည်)။ အလင်း/မှောင်သော theme toggle ကို အဓိကဒြပ်စင်အောက်တွင် အလယ်ဗဟိုတွင် ထားရှိသည်။ feature row သည် စက်ဝိုင်းအိုင်ကွန်များအကြားတွင် ချိတ်ဆက်ထားသော မျဉ်းပါးများပါသည့် အိုင်ကွန် ၆ ခု၏ အလျားလိုက် timeline ဖြစ်သည်။ Section rhythm: အပိုင်းတစ်ခုစီသည် မှိန်ဖျော့နေသော အလျားလိုက်မျဉ်းများဖြင့် ဘောင်ခတ်ထားသော အလယ်ဗဟိုတွင် မျက်ခုံးပုံသဏ္ဍာန်စာသားဖြင့် စတင်ပြီး ၎င်းနောက်တွင် အလယ်ဗဟိုတွင်ရှိသော ခေါင်းစဉ်ကြီး (44-48px)၊ ထို့နောက် အသံတိတ် body copy တစ်ကြောင်း (16-18px)၊ အများဆုံး အကျယ် ~640px။ Customize အပိုင်းသည် ဒီဇိုင်းကိရိယာများ အလုပ်ခွင်ကဲ့သို့ ပတ္တူ၏ထောင့်များတွင် ထားရှိထားသော floating UI inspector panels (color palettes၊ radius sliders၊ logo icon selector၊ button text field၊ page background field) တို့ဝန်းရံထားသော အလယ်ဗဟိုတွင်ရှိသော login ကတ်ပါသည့် browser window ၏ mockup တစ်ခုကို ပြသသည်။
အမြင်အာရုံဒီဇိုင်းကို "ဖန်ပုံသဏ္ဍာန်" ပုံစံ (အီးမေးလ်/စကားဝှက်ထည့်သွင်းသည့်နေရာများ၊ လူမှုမီဒီယာဝင်ရောက်သည့်ခလုတ်များ၊ စကားဝှက်မပါသောကုဒ်ထည့်သွင်းမှု) ဖြင့် ဖန်တီးထားသော login ပုံစံတူများဖြင့် လွှမ်းမိုးထားပြီး သန်းခေါင်ယံပတ္တူပေါ်တွင် မျောနေသော၊ ဖောက်ထွင်းမြင်ရသောကတ်များအဖြစ် တင်ပြထားသည်။ Feature icon များသည် #d1e4fa ရှိ အဝိုင်း၊ မတ်မတ်အုပ်ကြွပ်များအတွင်း monochrome linear glyphs များဖြစ်သည်။ သိမ်မွေ့သော grid (rgba(186,215,247,0.06) ရှိ 1px လိုင်းများ) သည် စာမျက်နှာတစ်ခုလုံးကို ဖုံးအုပ်ထားပြီး လေထုကို ဖန်တီးပေးပြီး အဓိကဒြပ်စင်၏ထိပ်တွင် conical gradient spotlight သည် တောက်ပနေသည်။ ဓာတ်ပုံများ၊ လူနေမှုပုံစံပုံများ၊ ထုတ်ကုန် screenshot များ မရှိပါ - ထုတ်ကုန်ကိုယ်တိုင်က အမြင်အာရုံဒြပ်စင်ဖြစ်သည်- မှောင်မိုက်သောစတူဒီယိုတွင် ဖန်ပုံစံငယ်များကဲ့သို့ စီစဉ်ထားသော login ပုံစံငယ်များကဲ့သို့ စီစဉ်ထားသည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Void Violet
#663af3— call-to-action (CTA) ခလုတ်အတွက် အဓိကအရောင်သည် login form များအတွင်းရှိ "Continue/Submit" ခလုတ်အတွက် သီးသန့်အသုံးပြုသည့် တစ်ခုတည်းသော accent color ဖြစ်သည်။ အနက်ရောင်နောက်ခံပေါ်တွင် တက်ကြွသောခရမ်းရောင်သည် monochromatic အရောင်ပေါင်းစပ်မှုကို မထိခိုက်စေဘဲ အရေးတကြီးဖြစ်မှုကို ဖန်တီးပေးသည်။
ကြားနေ
- Midnight Canvas
#05060f— စာမျက်နှာနောက်ခံ၊ ကတ်၏ အနက်ရှိုင်းဆုံးမျက်နှာပြင်၊ တံဆိပ်၏ အဖြည့်—ကျန်အရာအားလုံး ပေါလောမျောနေသည့် အနက်ရောင်နီးပါးအခြေခံ။ - Steel Plate
#2f343e— မြှင့်တင်ထားသော မျက်နှာပြင်၊ phantom/secondary action ခလုတ်များ၊ မသိမသာ panel backing။ - Fog Veil
#9da7ba— အဓိကစာသား၊ ကတ်ပေါ်ရှိ စာသားကို ဖတ်ရှုနိုင်သော်လည်း ခေါင်းစဉ်များနှင့် နှိုင်းယှဉ်ပါက နောက်ခံတွင်သာ ရှိနေပါသည်။ - Moon Mist
#c7d3ea— အဓိကစာသား၊ အပိုအညွှန်းများ၊ အသံတိတ်ထားသော အရန်စာသား - Frost Glow
#d1e4fa— body နှင့် link text၊ icon text နှင့် icon fill အတွက် primary fill color သည် default glowing foreground ဖြစ်သည်။ - Ice Highlight
#d8ecf8— မှောင်သောမျက်နှာပြင်များ၊ ပြောင်းပြန်လှန်ထားသော အညွှန်းများနှင့် ဆန့်ကျင်ဘက်အရောင်မြင့်မားသော ခေါင်းစဉ်များပေါ်တွင် ပေါ့ပါးသောစာသား။ ၎င်းကို လုပ်ဆောင်ရန် လှုံ့ဆော်မှုများအတွက် အဓိကအရောင်အဖြစ် မသုံးပါနှင့်။ ခေါင်းစဉ် gradient—အပြာဖျော့ဖျော့မှ အပေါ်မှအောက်သို့ ချောမွေ့စွာကူးပြောင်းခြင်း—ကို AuthKit လိုဂိုနှင့် အဓိကခေါင်းစဉ်များတွင် အသုံးပြုထားသည်။
စာလုံးပုံစံ
၁၂ မှ ၄၈px အထိ · အဆင့် ၈ ဆင့်
- Untitled Sans — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 500, 600, 700 · အဓိကစာသား၊ အသုံးပြုသူမျက်နှာပြင်၊ ခလုတ်များ၊ ထည့်သွင်းရန်နေရာများ၊ အိုင်ကွန်များ၊ ခေါင်းစဉ်ငယ်များ - လုပ်ဆောင်နိုင်သော အရာအားလုံးအတွက် አዲስဖောင့်။
- aeonikPro — အစားထိုးခြင်း: Space Grotesk · မျဉ်းကြောင်းများ 400, 500 · ခေါင်းစဉ်များ—AuthKit အမှတ်တံဆိပ်၊ အပိုင်းခေါင်းစဉ်များနှင့် ကိုယ်ထည်စာသား—ကိုသာပြသခြင်းဖြင့် 500-point ဖောင့်အလေးချိန် 44-48px သည် အမှတ်တံဆိပ်ကို တောက်ပြောင်သော အသားပေးဖော်ပြချက်ထက် ကျယ်ပြန့်ပြီး ရိုးရှင်းသော အသွင်အပြင်ကို ပေးစွမ်းသည်။
- dotDigital — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400 · စာလုံးကြီးအားလုံးပါသော စာသား ("မိတ်ဆက်ခြင်း၊" "တိုးချဲ့နိုင်သော ဒီဇိုင်း၊" "တောက်ပသော အလင်း") - 0.10em အကွာအဝေးရှိသော စာလုံးကြီးအားလုံးပါသော စာသားသည် စာသားကိုယ်ထည်နှင့် ခေါင်းစဉ်ကြားတွင် သိမ်မွေ့သော ပိုင်းခြားကိရိယာများအဖြစ် ဆောင်ရွက်သည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ကျယ်ဝန်းသော |
| အခြေခံအဆင့် | 16px |
| ခလုတ်အချင်းဝက် | 999px |
| ကတ်အချင်းဝက် | 16px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 120px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Authkit ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Resend — ခရမ်းရောင်နီယွန်အရောင်နဲ့ အနက်ရောင်ကတ္တီပါ
- Gsap — ဒီဇိုင်းစတူဒီယိုတစ်ခုရှိ ကာတွန်းဝှိုက်ဘုတ်တစ်ခု။ အနက်ရောင်နီးပါးနံရံ၊ နွေးထွေးသော ခရင်မ်ချော့ခဲနှင့် အရောင်ငါးရောင်မာကာများ — ကာတွန်းဘာသာရပ်တစ်ခုစီအတွက် တစ်ခုစီ။
- Slash — ရွှေချထားသော စာရင်းဇယားများပါသည့် သန်းခေါင်ယံ သေတ္တာ
- Raycast — သန်းခေါင်ယံ ကွပ်ကဲရေးစင်တာ၊ ကိုရယ်နီယွန်
- Dimension — မှောင်ရီပျိုးစပြုချိန်တွင် အလင်းရောင်ကောင်းစွာရသော အလုပ်စခန်းတစ်ခု
- Modal — မှောင်မိုက်နေသော ဆာဗာအခန်းရှိ ဖော့စဖောရက်စ် တာမီနယ်တစ်ခု - တစ်ခုတည်းသော အလင်းရောင်ရင်းမြစ်မှာ တောက်ပသော အစိမ်းရောင်ဖြစ်သည်
- Reflect Notes — ကြယ်များပြည့်နှက်နေသော ခရမ်းရောင်အာကာသသည် မှောင်မိုက်သော နက္ခတ်တာရာကြည့်စခန်းတစ်ခုဖြစ်ပြီး အနက်ရောင်အကွက်အကွင်းနောက်ခံတွင် ကြယ်စုများကဲ့သို့ မှတ်စုများ လွင့်မျောနေပါသည်။
- LaunchDarkly — နီယွန်ထိန်းချုပ်ခန်းသည် မှောင်မိုက်သော လေယာဉ်မောင်းခန်းတစ်ခုဖြစ်ပြီး ခရမ်းရောင်မီးများသည် ဂျက်မည်းရောင်ပြားများမှတစ်ဆင့် လင်းလက်နေသည်။
- Ameba — သန်းခေါင်ယံအချိန်တွင် ထိန်းချုပ်ခန်း - အေးခဲနေသော မှန်ပြားများအတွင်းမှ လျှပ်စစ်အပြာရောင် လျှပ်စီးကြောင်းတစ်ခု
- AgentQL — ညအချိန်တွင် ဆိပ်ကမ်းပေါ်ရှိ မြောက်ပိုင်းအလင်းရောင်များ
- Neon — မှောင်ရီပျိုးပြီးနောက် ဆာဗာအခန်း။ ဒေတာနှင့် အသုံးပြုသူ အပြန်အလှန် ဆက်သွယ်မှုများမှ တစ်ခုတည်းသော အလင်းရောင် ထွက်ပေါ်လာသည့် လုံးဝမှောင်မိုက်သော နေရာ။
- N8n — Workflow Engine at Midnight – မှောင်မိုက်သော server အခန်းတစ်ခုတွင် real-time automation canvas တစ်ခု၏ ခံစားချက်၊ status indicator များနှင့် data stream များဖြင့် လင်းလက်တောက်ပနေမှု