Authkit
അർദ്ധരാത്രിയിലെ ഫ്രോസ്റ്റഡ് ഗ്ലാസ് കത്തീഡ്രൽ
AuthKit രാത്രിയിലെ ഉൽപ്പന്ന അവതരണത്തിന്റെ ഒരു സൗന്ദര്യാത്മകത സൃഷ്ടിക്കുന്നു: മഞ്ഞുമൂടിയ ഗ്ലാസ് പ്രതലങ്ങളുള്ള ഏതാണ്ട് കറുത്ത ക്യാൻവാസ്, കാണാനാവാത്ത വരകളുടെ ഒരു ഗ്രിഡ്, ഒരു ഗ്ലാസ് പാളിയാൽ പ്രകാശിതമായി കാണപ്പെടുന്ന തിളങ്ങുന്ന വാചകം. ഇരുണ്ട പശ്ചാത്തലത്തിൽ ടൈപ്പ്ഫേസ് ഏതാണ്ട് പൂർണ്ണമായും വെളുത്തതാണ്, ഒരേയൊരു തിളക്കമുള്ള പർപ്പിൾ ആക്സന്റ് മാത്രമാണ് പ്രവർത്തന ഘടകം - ഓരോ സംവേദനാത്മക പ്രതലത്തിലും ഒരു കർക്കശമായ ഫ്രെയിമിനേക്കാൾ മൃദുവായതും നേർത്തതുമായ തണുത്ത നീല-വെളുത്ത വരയുണ്ട്. ഘടകങ്ങൾ അർദ്ധസുതാര്യ പാളികളിലാണ് ക്രമീകരിച്ചിരിക്കുന്നത്, ഒരു ആംബിയന്റ് ഗ്ലോയിൽ പാളികളായി, കാർഡുകൾ പേപ്പർ പാനലുകളേക്കാൾ താഴെ നിന്ന് പ്രകാശിപ്പിക്കുന്ന ഗ്ലാസ് പ്ലേറ്റുകളായി ദൃശ്യമാകും. അകലം വലുതും താളാത്മകവുമാണ്; പ്രധാന ഘടകം പേജിന്റെ മുഴുവൻ വീതിയിലും വ്യാപിച്ചുകിടക്കുന്ന ഒരു ഒറ്റ പ്രകാശമുള്ള ലോഗോയാണ്, പരമ്പരാഗത സ്പ്ലിറ്റ്-സ്ക്രീൻ ലേഔട്ടിനേക്കാൾ, ഫ്ലോട്ടിംഗ് ഗ്ലാസ് കാർഡുകളാൽ ചുറ്റപ്പെട്ടിരിക്കുന്നു.
ഒരു പൂർണ്ണ വീതിയുള്ള, ഇരുണ്ട ക്യാൻവാസ്, പരമാവധി 1200px വീതിയുള്ള ഒരു കേന്ദ്രീകൃത ഉള്ളടക്ക കണ്ടെയ്നർ. പ്രധാന ഘടകം ഒരു ചെറിയ പുരികത്തിന്റെ ആകൃതിയിലുള്ള വാചകത്തിന് കീഴിൽ ഒരു ഒറ്റ, കേന്ദ്രീകൃത, പ്രകാശിത ലോഗോ (ഗ്രേഡിയന്റ് ഫോണ്ടിലുള്ള "AuthKit") ആണ്, അതിന് പിന്നിൽ/താഴെ മൂന്ന് ഫ്ലോട്ടിംഗ് ഗ്ലാസ് കാർഡുകൾ ഒരു ലോഗിൻ ഫോം ഫാൻ ഔട്ട് ഉള്ളതാണ് (ഇടത് കാർഡ് ഇടത്തേക്ക് ചരിഞ്ഞത്, മധ്യ കാർഡ് പരമാവധിയാക്കി, വലത് കാർഡ് വലത്തേക്ക് ചരിഞ്ഞത്). പ്രധാന ഘടകത്തിന് താഴെ ഒരു ലൈറ്റ്/ഡാർക്ക് തീം ടോഗിൾ കേന്ദ്രീകരിച്ചിരിക്കുന്നു. വൃത്താകൃതിയിലുള്ള ഐക്കണുകൾക്കിടയിൽ നേർത്ത കണക്റ്റിംഗ് ലൈനുകളുള്ള 6 ഐക്കണുകളുടെ ഒരു തിരശ്ചീന ടൈംലൈനാണ് ഫീച്ചർ റോ. സെക്ഷൻ റിഥം: ഓരോ വിഭാഗവും മങ്ങുന്ന തിരശ്ചീന വരകളാൽ ഫ്രെയിം ചെയ്ത ഒരു കേന്ദ്രീകൃത പുരികത്തിന്റെ ആകൃതിയിലുള്ള വാചകത്തോടെ ആരംഭിക്കുന്നു, തുടർന്ന് ഒരു വലിയ, കേന്ദ്രീകൃത ശീർഷകം (44-48px), തുടർന്ന് ഒരു മ്യൂട്ട് ബോഡി കോപ്പിയുടെ ഒറ്റ വരി (16-18px), പരമാവധി വീതി ~640px. കസ്റ്റമൈസ് വിഭാഗം, ഒരു ഡിസൈൻ ടൂൾസ് വർക്ക്സ്പെയ്സ് പോലെ, ക്യാൻവാസിന്റെ കോണുകളിൽ സ്ഥാപിച്ചിരിക്കുന്ന ഫ്ലോട്ടിംഗ് UI ഇൻസ്പെക്ടർ പാനലുകളാൽ (കളർ പാലറ്റുകൾ, റേഡിയസ് സ്ലൈഡറുകൾ, ലോഗോ ഐക്കൺ സെലക്ടർ, ബട്ടൺ ടെക്സ്റ്റ് ഫീൽഡ്, പേജ് പശ്ചാത്തല ഫീൽഡ്) കേന്ദ്രീകൃതമായി സ്ഥിതി ചെയ്യുന്ന ലോഗിൻ കാർഡുള്ള ഒരു ബ്രൗസർ വിൻഡോയുടെ ഒരു മോക്കപ്പ് പ്രദർശിപ്പിക്കുന്നു.
വിഷ്വൽ ഡിസൈനിൽ ആധിപത്യം പുലർത്തുന്നത് ലോഗിൻ ഫോം മോക്കപ്പുകളാണ്, അവ "ഗ്ലാസ് മോർഫോളജി" ശൈലിയിൽ (ഇമെയിൽ/പാസ്വേഡ് ഇൻപുട്ട് ഫീൽഡുകൾ, സോഷ്യൽ മീഡിയ ലോഗിൻ ബട്ടണുകൾ, പാസ്വേഡ് ഇല്ലാത്ത കോഡ് എൻട്രി) രൂപകൽപ്പന ചെയ്തിരിക്കുന്നു, ഇത് ഒരു അർദ്ധരാത്രി ക്യാൻവാസിൽ ഫ്ലോട്ടിംഗ്, അർദ്ധസുതാര്യ കാർഡുകളായി അവതരിപ്പിക്കുന്നു. ഫീച്ചർ ഐക്കണുകൾ വൃത്താകൃതിയിലുള്ള, മാറ്റ് ടൈലുകൾക്കുള്ളിൽ #d1e4fa-യിലെ മോണോക്രോം ലീനിയർ ഗ്ലിഫുകളാണ്. ഒരു സൂക്ഷ്മ ഗ്രിഡ് (rgba-യിലെ 1px വരികൾ (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 ബ്രാൻഡിംഗ്, സെക്ഷൻ ഹെഡിംഗുകൾ, ബോഡി ടെക്സ്റ്റ് എന്നിങ്ങനെയുള്ള ഹെഡിംഗുകൾ മാത്രം പ്രദർശിപ്പിക്കുന്നത് 44-48px-ൽ 500-പോയിന്റ് ഫോണ്ട് വെയ്റ്റ് ബ്രാൻഡിംഗിന് ഒരു മിന്നുന്ന ആക്സന്റിനുപകരം വിശാലവും ലളിതവുമായ ഒരു ലുക്ക് നൽകുന്നു.
- dotDigital — മാറ്റിസ്ഥാപിക്കൽ: JetBrains Mono · രൂപരേഖകൾ 400 · ഓൾ-ക്യാപ്സ് ടെക്സ്റ്റ് ("ഇൻട്രൂഡിംഗ്," "എക്സ്പാൻഡബിൾ ഡിസൈൻ," "ഷൈൻ ബ്രൈറ്റ്") - 0.10em സ്പെയ്സിംഗ് ഉള്ള മോണോസ്പേസ്ഡ് ഓൾ-ക്യാപ്സ് ടെക്സ്റ്റ് ബോഡി ടെക്സ്റ്റിനും ഹെഡിംഗിനും ഇടയിൽ സൂക്ഷ്മമായ വിഭജനങ്ങളായി വർത്തിക്കുന്നു.
ഇടവേളകളും രൂപവും
| ഉദ്ദേശ്യം | അർത്ഥം |
|---|---|
| സാന്ദ്രത | വിശാലമായ |
| അടിസ്ഥാന ഘട്ടം | 16px |
| ബട്ടൺ ആരം | 999px |
| കാർഡ് ആരം | 16px |
| ഷാഡോകൾ | ഷാഡോകൾക്ക് പകരം ബോർഡറുകൾ ഇല്ല |
| വിഭാഗങ്ങൾക്കിടയിൽ | 120px |
| പേജ് വീതി | 1200px |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Authkit ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- Resend — പർപ്പിൾ നിയോൺ നിറമുള്ള കറുത്ത വെൽവെറ്റ്
- Gsap — ഒരു ഡിസൈൻ സ്റ്റുഡിയോയിലെ ഒരു ആനിമേറ്റഡ് വൈറ്റ്ബോർഡ്. ഏതാണ്ട് കറുത്ത നിറത്തിലുള്ള ഒരു ചുവർ, ചൂടുള്ള ക്രീം ചോക്ക്, അഞ്ച് നിറങ്ങളിലുള്ള മാർക്കറുകൾ - ഓരോ ആനിമേഷൻ വിഭാഗത്തിനും ഒന്ന്.
- Slash — സ്വർണ്ണം പൂശിയ ലെഡ്ജറുകളുള്ള അർദ്ധരാത്രി നിലവറ
- Raycast — മിഡ്നൈറ്റ് കമാൻഡ് സെന്റർ, കോറൽ നിയോൺ
- Dimension — ഫ്രോസ്റ്റഡ് ഗ്ലാസ് പാനലുകളുള്ള ഒരു സന്ധ്യാ വെളിച്ചമുള്ള വർക്ക്സ്റ്റേഷൻ
- Modal — ഇരുണ്ട സെർവർ മുറിയിലെ ഒരു ഫോസ്ഫോറസെന്റ് ടെർമിനൽ - ഒരേയൊരു പ്രകാശ സ്രോതസ്സ് തിളക്കമുള്ള പച്ച നിറമാണ്.
- Reflect Notes — നക്ഷത്രനിബിഡമായ വയലറ്റ് സ്പേസ് ഒരു ഇരുണ്ട നിരീക്ഷണാലയമാണ്, അവിടെ കറുത്ത ഇൻഡിഗോ ശൂന്യതയുടെ പശ്ചാത്തലത്തിൽ നക്ഷത്രരാശികൾ പോലെ നോട്ടുകൾ പൊങ്ങിക്കിടക്കുന്നു.
- LaunchDarkly — നിയോൺ കൺട്രോൾ റൂം ഒരു ഇരുണ്ട കോക്ക്പിറ്റാണ്, അവിടെ പർപ്പിൾ സിഗ്നലുകൾ ജെറ്റ്-കറുത്ത പാനലുകളിലൂടെ സ്പന്ദിക്കുന്നു.
- Ameba — അർദ്ധരാത്രിയിലെ കൺട്രോൾ റൂം - ഫ്രോസ്റ്റഡ് ഗ്ലാസ് പാനലുകൾക്കുള്ളിൽ ഒരു വൈദ്യുത നീല സ്പന്ദനം.
- AgentQL — രാത്രിയിൽ ടെർമിനലിന് മുകളിലുള്ള വടക്കൻ വിളക്കുകൾ
- Neon — ഇരുട്ടിന് ശേഷം ഒരു സെർവർ റൂം. ഡാറ്റയിൽ നിന്നും ഉപയോക്തൃ ഇടപെടലുകളിൽ നിന്നും മാത്രം വെളിച്ചം വരുന്ന ഇരുട്ട്.
- N8n — അർദ്ധരാത്രിയിലെ വർക്ക്ഫ്ലോ എഞ്ചിൻ - ഇരുണ്ട സെർവർ മുറിയിലെ ഒരു തത്സമയ ഓട്ടോമേഷൻ ക്യാൻവാസിന്റെ അനുഭവം, സ്റ്റാറ്റസ് സൂചകങ്ങളും ഡാറ്റ സ്ട്രീമുകളും കൊണ്ട് പ്രകാശിക്കുന്നു.