Modal
یک ترمینال فسفرسنت در یک اتاق سرور تاریک - تنها منبع نور، رنگ سبز روشن است
مودال مانند یک ترمینال فسفری در یک اتاق سرور تاریک عمل میکند: یک بوم تقریباً سیاه، تایپ سبز کمرنگ و یک لهجه سبز لیمویی روشن که به عنوان یک نشانگر وضعیت LED عمل میکند. زبان طراحی متمرکز بر توسعهدهنده است - پنجرههای کد تکفاصله با نقاط چراغ راهنمایی، آیکونهای سهبعدی ایزومتریک به رنگ سبز خاص و فضای سفید فراوان که به یک عنصر در هر بخش اجازه درخشش میدهد. تایپوگرافی بین یک فونت سفارشی (Goga) برای عنوانها و یک فونت متغیر (Inter) برای همه عناصر رابط کاربری تقسیم شده است، که هر دو با ردیابی منفی باریک تنظیم شدهاند. رنگها به طور مساوی توزیع شدهاند: اکثر صفحه نمایشها بیرنگ هستند و رنگ سبز لیمویی روشن فقط در عملکردهای کلیدی، لوگو، تصاویر سهبعدی و لحظات تأکید ظاهر میشود. اجزا مسطح و بدون قاب هستند و عمق از طریق حاشیههای سبز ظریف و تاری پسزمینه به جای سایهها ایجاد میشود.
این مودال از یک طرحبندی تیره تمامعرض با حداکثر عرض ۱۲۸۰ پیکسل برای جای دادن محتوا استفاده میکند. پنجره قهرمان در مرکز قرار دارد: عنوان (جمله اول به رنگ سبز لیمویی)، یک زیرعنوان، دو فراخوان برای اقدام و یک شیء سهبعدی به عنوان لنگر بصری - بدون جدا کردن طرحبندی از نوار کناری. بخشهای محتوا از یک ریتم یکنواخت پیروی میکنند: برچسب ابرو (حروف بزرگ، Moss 70) → عنوان Goga → متن بدنه بیصدا، سپس یا یک طرحبندی دو ستونی با شرح ویژگی (متن + کد/کارت تصویری) یا یک شبکه سه ستونی از کارتها. فاصله بین بخشها زیاد است - ۸۰ پیکسل. صفحه بین نوارهای کاملاً خالی (#۰۰۰۰۰۰) و پسزمینه کمی روشنتر (#۱۸۱۸۱۸) متناوب است، و یک بخش روشن (#def0dd) در وسط صفحه به عنوان یک فضای تنفس بصری ظاهر میشود. ناوبری شامل یک نوار بالایی ثابت با پسزمینه تار است - بدون نوار کناری یا مگامنو. پاورقی جمع و جور و تیره است و ستونهای لینک سبز کمرنگی دارد. تراکم متن مناسب است: به هر بخش فضای کافی داده شده است و شبکههای کارتی بیش از سه ستون استفاده نمیکنند.
زبان بصری مودال به دو حالت تقسیم میشود: رندرهای محصول درخشان سهبعدی و ماکتهای پنجره کد تاریک. نقطه کانونی یک مکعب سهبعدی واحد است که با استفاده از یک گرادیان بازاریابی (از سبز لیمویی تا زمردی) رندر شده است، که در یک هاله گرادیان شعاعی قرار دارد که فضای خالی را در نور سبز غرق میکند - سبک بصری امضای برند. کارتهای حجم کار حاوی آیکونهای سهبعدی ایزومتریک (یک مکعب قاب سیمی، یک راه پله توپر، لایهها) هستند که با همان رنگ سبز لیمویی در پسزمینه تیره رندر شدهاند. نتایج کد و بنچمارک به صورت کارتهای پنجره ترمینال با نقاط چراغ راهنمایی، هایلایت سینتکس تک فاصلهای در یک پالت فسفری و یک حاشیه سبز کمرنگ ارائه میشوند - آنها شبیه اسکرینشاتهای یک رابط خط فرمان واقعی هستند. لوگوهای مشتری به صورت برچسبهای سبز-خاکستری اشباع نشده در یک ردیف با کنتراست کم نمایش داده میشوند که نشاندهنده اعتماد بدون رقابت بصری است. تراکم کلی کم است - اکثر صفحات عمدتاً حاوی متن هستند و تصاویر به عنوان نقاط کانونی منفرد به جای شبکههای عکس ارائه میشوند. هیچ عکسی وجود ندارد. کل سیستم بصری رندر شده، هندسی و درخشان است.
پالت
برند
- Lime Pulse
#7fee64— عناصر اصلی هویت سازمانی عبارتند از لوگو، فراخوان اصلی برای اقدام (CTA)، پر کردن تگها، حالتهای فعال و رنگ پایه تصویر.
خنثی
- Phosphor White
#ddffdc— متن اصلی، رنگ عنوان، طرح کلی آیکون و متن دکمه پر شده، سطوح اصلی قابل خواندن هستند. - Void Black
#000000— بوم صفحه، عمیقترین لایه پسزمینه - Ground Iron
#181818— پر کردن دکمه اصلی، سطوح کارت در نواحی تیره، سطح پایه رابط کاربری. - Carbon Veil
#212525— سطوح مرتفع، پسزمینه ناوبری، کمی روشنتر از زمین. - Circuit Border
#485346— قاب اکشن/شبح، خط نازک تعاملی اصلی، سایهای سبز-خاکستری ملایم دارد. - Phosphor Blue-Black
#1f2a33— خطوط علامتگذاری نازک ثانویه، که خطوط را بین نوارهای تیره تقسیم میکنند.
تایپوگرافی
از ۱۲ تا ۶۴ پیکسل · ۸ مرحله
- Goga — جایگزینی: Inter Tight or Space Grotesk · طرح کلی 400, 500 · فونت عنوان و زیرعنوان - برای همه عنوانها و کارتهای H1 تا H4 استفاده میشود. گوگا یک فونت سنسسریف هندسی سفارشی با روزنههای باریک و ترمینالهای کمی مربعی است. وزن متوسط (500) برای برجسته کردن عنوانهای سطح کارت در نظر گرفته شده است؛ وزن معمولی (400) برای عنوانهای قهرمان و بخش استفاده میشود. برای دسترسی به شکلهای گلیف جایگزین که هویت مودال را تعریف میکنند، مجموعه سبکی 'ss01' آن باید فعال باشد. فاصله منفی حروف به تدریج از -0.007em در 48px به -0.017em در 21px کاهش مییابد.
- Inter Variable — جایگزینی: Inter · طرح کلی 400, 500 · رابط کاربری و متن بدنه - ناوبری، دکمهها، متن بدنه، برچسبها، پاورقی. وزن متوسط (500) به طور پیشفرض برای عناصر تعاملی و ناوبری استفاده میشود؛ وزن معمولی (400) برای پاراگرافها استفاده میشود. فاصله حروف حتی در اندازههای کوچک به طور قابل توجهی کاهش مییابد (-0.026em در 14px، -0.022em در 16px)، که به رابط کاربری تراکم فشرده و پایانی میدهد. برای نقطهگذاری جایگزین، نوع کاراکتر 'cv11' باید گنجانده شود. برچسبهای تماماً بزرگ در 12px از فاصله حروف +0.05em برای متعادل کردن تراکم متن بدنه استفاده میکنند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 20px |
| شعاع دکمه | 12px |
| شعاع کارت | 8px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80px |
| عرض صفحه | 1280px |
هوش مصنوعی وبسایت شما را به سبک Modal میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Slash — گاوصندوق نیمهشب با دفاتر کل طلاکاری شده
- AgentQL — شفق قطبی بر فراز ترمینال در شب
- GitHub — یک پنل فرماندهی فضایی با نقاط کنترل زیستتابی - یک فضای کاری تاریک و اتمسفریک که در آن یک درخشش سبز، مسیر پیش رو را نشان میدهد.
- Doppler — نورپردازی بنفش خزانه در نیمهشب. بوم تقریباً سیاه با یک سیگنال بنفش کمرنگ و یک نور تأیید سبز میدرخشد، هر سطح به اندازه کافی خمیده است که بتوان آن را گرفت.
- Basedash — یک ترمینال داده نیمهشب با فونت مات. یک رصدخانه تاریک که در آن معیارها به رنگ بنفش و سبز میدرخشند، تیترهای سریف بالای نویز شناورند و دکمههای قرصی شکل سفید تنها اشیاء روشن در اتاقی با سطوح سیاه ملایم هستند.
- Superwhisper — شفقهای قطبی بر فراز شیشهی نیمهشب محو میشوند
- Better Stack — کنسول نیمهشب SRE
- Langbase — کنسول شفق قطبی نیمهشب
- Astro — مرکز کنترل ماموریت اعماق فضا با یک تابش بنفش از یک سحابی
- Wayfinder — یک صفحه نمایش فیلم سیاه با عنوانی که به سختی شنیده میشود و بالای یک تصویر زنده معلق است. رابط کاربری به جای یک پنل کنترل، یک اسلایدر روشنایی است.
- HashiCorp — اتاق کنترل در نیمهشب با نئون بنفش، یک سطح فنی تیره است که در آن یک مکعب ششضلعی درخشان به عنوان تنها مرجع رنگی عمل میکند.
- Umbrel — یک آتشدان دنج در اتاق سرور شبانه - اتاق تاریکی که در آن یک درخشش هلویی رنگ، نکات واقعاً مهم را برجسته میکند.