Calendly
جوهر آبی تیره روی مرمر سرد
Calendly حس یک فضای کاری برنامه‌ریزی آرام و مطمئن را القا می‌کند: یک بوم تقریباً سفید با فضای تنفس فراوان، کارت‌های محصول سفید واضح که در پس‌زمینه خاکستری سرد شناور هستند و تمام تایپوگرافی‌ها به جای مشکی خالص با جوهر آبی تیره ارائه شده‌اند. عنصر تعیین‌کننده، رنگ آبی تیره (#0b3558) است که در همه جای متن - تیترها، دکمه‌ها، آیکون‌ها، لینک‌ها - استفاده شده است که کل رابط را ملایم‌تر می‌کند و آن را گرم‌تر و شیک‌تر از صفحه فرود معمولی SaaS می‌کند. یک آبی روشن واحد (#006bff) برای همه اقدامات اصلی استفاده شده است و لکه‌های صورتی و آبی تزئینی که فراتر از طرح‌بندی محصول امتداد یافته‌اند، بدون ایجاد شلوغی، به آن گرما می‌بخشند. اجزا ساده نگه داشته شده‌اند: حاشیه‌های نازک ۱ پیکسلی، سایه‌های ظریف آبی رنگ، شعاع‌های بزرگ کارت ۲۴ پیکسلی و گوشه‌های دکمه ۸ پیکسلی، عمدی به نظر می‌رسند تا بی‌روح.
حداکثر عرض ۱۲۰۰ پیکسل، در مرکز، با حاشیه‌های پهن در حالت دسکتاپ. صفحه اصلی به دو ستون تقسیم شده است: ستون سمت چپ شامل یک هدر ۸۰ پیکسلی + متن بدنه + دکمه‌های ورود به سیستم روی هم قرار گرفته است، در حالی که ستون سمت راست شامل یک کارت ویجت رزرو با عناصر تزئینی در پس‌زمینه است. در زیر صفحه اصلی، یک نوار تکی و تمام عرض با لوگوی Trust وجود دارد. بخش‌های بعدی به طور متناوب بین بلوک‌های هدر متمرکز (H2 + زیرمتن + فراخوان اختیاری برای اقدام) قرار می‌گیرند و پس از آن بلوک‌های دو ستونی ویژگی‌ها را توصیف می‌کنند (متن سمت چپ/محصول سمت راست یا محصول سمت چپ/متن سمت راست) با عناصر تزئینی در پشت هر تصویر محصول. شبکه‌های کارت به ندرت استفاده می‌شوند - طرح‌بندی، بخش‌های جفت شده را در کنار هم قرار می‌دهد تا شبکه‌های چند ستونی. فاصله بین بخش‌ها از ۴۸ تا ۶۴ پیکسل متغیر است. ناوبری یک نوار بالای ثابت ۶۴ پیکسلی با لوگو در سمت چپ، یک منوی متمرکز و گروهی از فراخوان‌ها برای اقدام در سمت راست است.
عنصر بصری اصلی، اسکرین‌شات‌های محصول است - ماکت‌های ساده‌ای از رابط کاربری تقویم رزرو، که روی کارت‌های سفید واضح با گوشه‌های پهن و گرد ارائه شده‌اند. طراحی تزئینی: هر کارت محصول با یک نقطه نرم بنفش مرجانی (#e55cff) یا آبی لاجوردی (#0099ff) احاطه شده است، که کمی انحراف و محو شده است و به جای یک اسکرین‌شات مسطح، جلوه‌ای کلاژ ایجاد می‌کند. بدون عکس، بدون تصاویر سبک زندگی - همه عناصر بصری نمایانگر رابط کاربری محصول، اشکال انتزاعی یا لوگوهای تک رنگ شرکا در نوار اعتماد هستند. آیکون‌ها خطی با عرض خط ۱.۵ تا ۲ پیکسل، تک رنگ، به رنگ آبی تیره (Ink Navy) یا آبی (Signal Blue) هستند.
پالت
برند
- Ink Navy
#0b3558— متن اصلی، سرتیترها، آیکون‌ها، پس‌زمینه تیره برای فراخوان‌ها، لینک‌های ناوبری. - Signal Blue
#006bff— فراخوان اولیه برای اقدام (CTA)، ناوبری فعال، تأکید بر لینک، ایالت‌های منتخب
خنثی
- Carbon
#0a0a0a— متن به رنگ مشکی خالص (جایگزین)، لوگو گلیف، آیکون پر شده. - Slate Gray
#476788— متن اصلی اضافی، متن پشتیبان، برچسب‌های بی‌صدا. - Mist Gray
#a6bbd1— متن غیرفعال، برچسب‌های عملکرد غیرفعال، طرح کلی آیکون‌های روشن - Cloud
#f8f9fb— بوم صفحه، پس‌زمینه پاورقی، سطح اضافی - Paper
#ffffff— سطوح کارت، پنل‌های برجسته، متن دکمه روی پس‌زمینه تیره. - Pebble
#f0f3f8— تصاویر پس‌زمینه برای آیکون‌ها، سایه‌بندی فیلد ورودی، جداکننده‌های ظریف، جلوه‌های شناور.
تایپوگرافی
از ۱۲ تا ۸۰ پیکسل · ۱۰ مرحله
- Gilroy — جایگزینی: Manrope · طرح کلی 400, 500, 600, 700 · تمام متن رابط. گیلروی یک فونت سنس‌سریف اومانیستی هندسی با دیافراگم‌های باز و کنتراست یکنواخت است؛ وزن‌های پررنگ آن (700) برای عنوان‌ها استفاده می‌شود، در حالی که وزن‌های 500 تا 600 برای دکمه‌ها و زیرعنوان‌ها استفاده می‌شوند. با Manrope یا Inter جایگزین کنید.
- Gilroy — جایگزینی: Inter · طرح کلی 400 · متن بدنه و برچسب‌های رابط کاربری عمومی - وزن فونت ۴۰۰ پوینت، خوانایی متن‌های طولانی را بدون ایجاد حس سنگینی تضمین می‌کند.
- Gilroy — جایگزینی: Inter · طرح کلی 500 · عنوان‌های ثانویه و متن بدنه هایلایت شده - فونت ۱۴/۵۰۰ ابزار اصلی برای عنوان‌های کارت و برچسب‌های درون‌خطی است.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 8-16px |
| شعاع دکمه | 8px |
| شعاع کارت | 24px |
| سایه‌ها | بدون حاشیه به جای سایه |
| بین بخش‌ها | 48-64px |
| عرض صفحه | 1200px |
هوش مصنوعی وب‌سایت شما را به سبک Calendly می‌سازد و آن را پر می‌کند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پست‌ها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینه‌سازی سئو از پیش آماده.
- بهینه‌سازی سئو کاملاً خودکار برای نتایج جستجو و توصیه‌های شبکه عصبی.
سبک‌های مشابه
- Mollie — یک پیشخوان ترمه، یک دفتر کل تیره. فضای سفید کافی برای طراحی سرمقاله در اطراف متن سیاه بگذارید، سپس نکات مربوط به محصول را با کرم‌های گرم، قهوه‌ای‌های اسپرسو و عکس‌های لمسی از روش‌های پرداخت واقعی تقویت کنید.
- Kagi — یک اتاق مطالعه جداگانه. یک فضای سفید باز در اطراف متن گرافیتی پررنگ ایجاد کنید، با استفاده از لهجه‌های بنفش ظریف و سطوح پاستلی گرم برای شکستن آرامش.
- Milanote — میلانوت یک استودیوی خلاق اختصاصی است. با استفاده از تابلوهای بصری شناور، صفحاتی به سبک گالری سرمقاله ایجاد کنید: دیوارهایی با قاب تیره، فضای نمایش سفید و اسکرین‌شات‌هایی که با عمق ملایم مانند اشیاء واقعی به نظر می‌رسند.
- Co2 — یک اطلس اقلیمی در نور زمستانی. صفحاتی مانند یک سند هوایی منظره ایجاد کنید، جایی که سرتیترهای سریف، داده‌های کدگذاری شده با دسته‌بندی و تصاویر یخی حاشیه‌های سفید پهن را برجسته می‌کنند.
- GitButler — فیروزه‌ای در انتهای متن. ترکیبی از تیترهای سریف با کنتراست بالا با شبکه‌های فنی ظریف، سطوح گرافیتی گرم و یک لهجه فیروزه‌ای ملایم.
- ElevenLabs — یک مقاله تصویری با تُن‌های کرم گرم با تیترهای ظریف. یک دفترچه یادداشت به سبک باوهاوس - کاغذ به رنگ پوست تخم‌مرغ، جوهر مشکی و یک تکه رنگ بنفش و نارنجی برای نمایش محصول.
- Awesomic — توری زینک تحریریه با علائم نگارشی نارنجی که یادآور پولک‌های رنگی است
- Monad — مجله فنی سرمقاله در مورد پوست گرم
- Dub — پنل کنترل کاغذ برنج مات لینک
- Seline Analytics — یک میز تحلیلی آرام روی کاغذ گرم
- Notion — یک دفترچه یادداشت کاغذی گرم در آفتاب ظهر
- Anthropic — یک ژورنال علمی میدانی روی پوست گرم - سطوح عاجی آرام، سربرگ‌های سرصفحه‌دار و یک لهجه گلی که فقط در صورت نیاز به اقدام ظاهر می‌شود.