Authkit
کلیسای جامع شیشهای مات در نیمهشب
AuthKit یک حس زیباییشناسی برای ارائه محصول در شب ایجاد میکند: یک بوم تقریباً سیاه با سطوح شیشهای مات، شبکهای از خطوط به سختی قابل مشاهده و متن درخشانی که به نظر میرسد توسط یک لایه شیشهای روشن شده است. این فونت تقریباً کاملاً سفید در برابر یک پسزمینه تیره است و تنها عنصر کاربردی آن یک لهجه بنفش روشن است - هر سطح تعاملی به جای یک قاب سفت و سخت، یک خط نرم و نازک از آبی-سفید سرد دارد. اجزا روی لایههای شفاف چیده شدهاند، روی یک درخشش محیطی قرار گرفتهاند و کارتها به جای پنلهای کاغذی، مانند صفحات شیشهای روشن شده از زیر به نظر میرسند. فاصلهگذاری بزرگ و ریتمیک است. عنصر اصلی یک لوگوی روشن شده است که تمام عرض صفحه را پوشانده و توسط کارتهای شیشهای شناور احاطه شده است، نه یک طرح سنتی صفحه تقسیم شده.
یک بوم تمام عرض و تیره با یک محفظه محتوای مرکزی، حداکثر ۱۲۰۰ پیکسل عرض. عنصر اصلی یک لوگوی مرکزی و روشن ("AuthKit" با فونت گرادیان) در زیر یک متن کوچک ابرو شکل است که در پشت/زیر آن سه کارت شیشهای شناور با فرم ورود به سیستم قرار گرفتهاند (کارت چپ به سمت چپ کج شده، کارت وسط به حداکثر رسیده، کارت راست به سمت راست کج شده). یک دکمه تغییر تم روشن/تیره در زیر عنصر اصلی قرار دارد. ردیف ویژگیها یک جدول زمانی افقی از ۶ آیکون با خطوط اتصال نازک بین آیکونهای دایرهای است. ریتم بخش: هر بخش با یک متن ابرو شکل مرکزی که توسط خطوط افقی محو قاب گرفته شده است، شروع میشود و به دنبال آن یک عنوان بزرگ و مرکزی (۴۴-۴۸ پیکسل) و به دنبال آن یک خط متن بدنه بیصدا (۱۶-۱۸ پیکسل)، حداکثر عرض حدود ۶۴۰ پیکسل قرار میگیرد. بخش سفارشیسازی، ماکتی از یک پنجره مرورگر را با یک کارت ورود به سیستم در مرکز، که توسط پنلهای شناور بازرس رابط کاربری (پالتهای رنگ، اسلایدرهای شعاع، انتخابگر آیکون لوگو، فیلد متن دکمه، فیلد پسزمینه صفحه) احاطه شده است، مانند یک فضای کاری ابزارهای طراحی، نمایش میدهد.
طراحی بصری تحت سلطهی ماکتهای فرم ورود به سیستم است که با سبک «ریختشناسی شیشهای» (فیلدهای ورودی ایمیل/رمز عبور، دکمههای ورود به شبکههای اجتماعی، ورود کد بدون رمز عبور) ساخته شدهاند و به صورت کارتهای شناور و شفاف در برابر بوم نقاشی نیمهشب ارائه میشوند. آیکونهای ویژگی، گلیفهای خطی تکرنگ با کد #d1e4fa در کاشیهای گرد و مات هستند. یک شبکه ظریف (خطوط ۱ پیکسلی در rgba(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 و تیترهای کلیدی استفاده شده است.
تایپوگرافی
از ۱۲ تا ۴۸ پیکسل · ۸ مرحله
- Untitled Sans — جایگزینی: Inter · طرح کلی 400, 500, 600, 700 · متن اصلی، رابط کاربری، دکمهها، فیلدهای ورودی، آیکونها، سرتیترهای کوچک - یک فونت جهانی برای همه چیز کاربردی.
- aeonikPro — جایگزینی: Space Grotesk · طرح کلی 400, 500 · نمایش فقط عنوانها - برند AuthKit، عنوانهای بخشها و متن بدنه - با وزن فونت ۵۰۰ نقطهای در ۴۴-۴۸ پیکسل، به برند ظاهری پهن و ساده میدهد، نه یک جلوه پر زرق و برق.
- dotDigital — جایگزینی: JetBrains Mono · طرح کلی 400 · متن تماماً بزرگ ("معرفی"، "طراحی قابل گسترش"، "درخشش درخشان") - متن تماماً بزرگ تکفاصله با فاصله 0.10em به عنوان جداکنندههای ظریف بین متن اصلی و عنوان عمل میکند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | جادار |
| گام اساسی | 16px |
| شعاع دکمه | 999px |
| شعاع کارت | 16px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 120px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Authkit میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Resend — مخمل مشکی با رنگ نئونی بنفش
- Gsap — یک تخته سفید متحرک در یک استودیوی طراحی. یک دیوار تقریباً سیاه، گچ کرم گرم و پنج ماژیک رنگی - یکی برای هر رشته انیمیشن.
- Slash — گاوصندوق نیمهشب با دفاتر کل طلاکاری شده
- Raycast — مرکز فرماندهی نیمهشب، نئون مرجانی
- Dimension — یک ایستگاه کاری با نور غروب و پنلهای شیشهای مات
- Modal — یک ترمینال فسفرسنت در یک اتاق سرور تاریک - تنها منبع نور، رنگ سبز روشن است
- Reflect Notes — فضای بنفش پرستاره، رصدخانهای تاریک است که در آن نتها مانند صورتهای فلکی در پسزمینهای از تهی نیلی تقریباً سیاه شناورند.
- LaunchDarkly — اتاق کنترل نئونی، یک کابین خلبان تاریک است که در آن سیگنالهای بنفش از طریق پنلهای مشکی براق ساطع میشوند.
- Ameba — اتاق کنترل در نیمهشب - یک پالس آبی الکتریکی درون پنلهای شیشهای مات
- AgentQL — شفق قطبی بر فراز ترمینال در شب
- Neon — یک اتاق سرور پس از تاریکی مطلق. تاریکی محض، جایی که تنها نور از دادهها و تعاملات کاربر میآید.
- N8n — موتور گردش کار در نیمهشب - حس یک بوم اتوماسیون بلادرنگ در یک اتاق سرور تاریک، که با نشانگرهای وضعیت و جریانهای داده روشن شده است