Letters
یک قرار ملاقات صبحگاهی در یک کلینیک روباز - یک میز سفید استریل زیر سقف آبی ملایم، پر از ابزارهای جراحی آبی رنگ
Letters ابزاری برای نوشتن نامههای پزشکی است که با یک سربرگ شیبدار به رنگ آسمان باز - یک نوار آبی ملایم و اتمسفریک که فضایی آرام و بالینی ایجاد میکند - شروع میشود و سپس به یک فضای کاری سفید و تمیز میرسد. این سیستم به سبک تکرنگ طراحی شده است: یک بوم سفید تمیز، متن تقریباً مشکی (#070709)، دکمههای تیره به شکل قرص برای اقدام و کارتهای گرد که روی ظریفترین سایهها شناور هستند. یک آبی روشن واحد (#2597d0) برای علائم نگارشی کاربردی - آیکونها، میکروگرافیکها، پخشکنندههای شکل موج - که هرگز برای دکمهها یا پر کردنهای بزرگ استفاده نشده است، در نظر گرفته شده است. تایپوگرافی از Open Runde، یک فونت هندسی انسانگرای sans-serif با فاصلهگذاری منفی تهاجمی حروف در اندازههای صفحه نمایش بزرگتر (-0.04em در 80px) استفاده میکند که سربرگها را به بلوکهای مطمئن فشرده میکند. اجزا مانند یک ابزار پزشکی سبک به نظر میرسند: حاشیههای نازک، فاصله زیاد بین کارتها، دکمههای قرصی شکل و استفاده محتاطانه از ارتفاع که به سربرگ به شکل آسمان اجازه میدهد تا کار احساسی را انجام دهد.
یک صفحه اصلی با گرادیان آبی آسمانی، تمام عرض صفحه را پوشانده است، با عنوان و زیرمتن مرکزی و یک دکمه فراخوان در زیر آن. این صفحه به آرامی به یک ناحیه محتوای سفید با فاصله زیاد بین بخشها (80-120 پیکسل) منتقل میشود. بخشهای ویژه از یک شبکه دو ستونی از کارتهای بزرگ و گرد (شعاع 18-32 پیکسل) با نسبتهای مساوی استفاده میکنند. عناوین بخشها همیشه در یک ستون واحد، بالای شبکه کارتها، در مرکز قرار میگیرند. ناوبری یک نوار سفید ثابت در بالا با مجموعهای از لینکها و عملکردهای ورود به سیستم با تراز راست است. ریتم کلی یک نوار اصلی واحد و جذاب است، سپس بخشهای سفید و #f5f5f5 به طور متناوب با فضای تنفس عمودی ثابت قرار میگیرند. هیچ نوار کناری، هیچ مگامنویی، هیچ طرحبندی نامتقارنی وجود ندارد - صفحه مانند یک ستون آرام و متقارن به نظر میرسد.
طراحی بصری تقریباً بهطور کامل بر رابط کاربری محصول متمرکز است - هیچ عکس سبک زندگی، هیچ رندر سهبعدی انتزاعی. زبان بصری حول کارتهای محصول ساخته شده است که رابط کاربری بومی برنامه را نشان میدهند: مقایسه اسناد "قبل" و "بعد"، یک ناحیه بارگذاری با حاشیه نقطهچین و یک پخشکننده صوتی به شکل موج. تنها عنصر بصری جذاب، گرادیان آسمان در تصویر اصلی است. آیکونها، آیکونهای خطی تخت و تکرنگ #2597d0 (پاکت، میکروفون، علامت تیک) با ضخامت خطوط یکنواخت و بدون تغییرات پر شده هستند. سبک تصویرسازی محدود است: ماکتهای محصول روی یک پسزمینه سفید نمایش داده میشوند، کمی چرخانده میشوند تا عمق ایجاد کنند، هرگز به شدت کج نمیشوند. یک فونت دستنویس (دکتر) تنها عنصر ارگانیک/دستساز است که صرفاً برای تداعی دستخط بالینی روی کارت "قبل" استفاده میشود.
پالت
برند
- Surgical Blue
#2597d0— آیکونها، یک آیکون میکروفون، یک پخشکننده موج صدا و عناصر کاربردی کوچک، یک نت کروماتیک واحد را در سراسر رابط کاربری ایجاد میکنند.
خنثی
- Obsidian
#070709— متن بدنه، دکمههای فراخوان عمل توپر و عناصر رابط کاربری تیره - به جای رنگ خالص #۰۰۰، رنگ تقریباً مشکی انتخاب شده تا کنتراست را در برابر پسزمینه سفید ملایمتر کند. - Paper White
#ffffff— پسزمینه صفحه، سطوح کارت و متن دکمه، بوم اصلی برای تمام بخشهای زیر عنصر اصلی هستند. - Cloud Gray
#f5f5f5— سطوح کارت اضافی و پسزمینههای بخش، بلوکهای کاربردی را از بوم اصلی جدا میکنند. - Sky Tint
#d7e6f5— سایه قاب مقوایی و رنگ آبی که به سختی قابل توجه است، به جای خاکستری بودن، حس فضاسازی ایجاد میکند. - Charcoal
#60606c— متن اصلی، متن ثانویه و حاشیههای کمرنگ - یک رنگ خنثی غالب برای محتوای غیرعنوان. - Slate
#8b8b8b— متن فرعی و حالتهای مرزی غیرفعال - برای نشان دادن مکانها و اطمینان از دسترسی افراد دارای معلولیت استفاده میشود.
تایپوگرافی
از ۱۲ تا ۸۰ پیکسل · ۸ مرحله
- sans-serif — جایگزینی: Inter · طرح کلی 400, 700 · sans-serif - در دادههای استخراجشده یافت میشود اما توسط هوش مصنوعی توصیف نشده است.
- Open Runde — جایگزینی: Inter Tight · طرح کلی 400, 500, 600, 700, 900 · فونت اصلی برای عنوانها و ناوبری، یک فونت انسانگرای هندسی است، با فاصله کم حروف در اندازههای بزرگ؛ -0.04em در 80px عنوان را به یک بلوک واحد و مطمئن فشرده میکند. برای همه عنوانها، ناوبری و متن بزرگ استفاده کنید.
- Inter — جایگزینی: system-ui · طرح کلی 400, 500 · متن ثانویه بدنه و رابط کاربری - برای عنوانهای کوچک، عناصر ناوبری و لینکهای درونخطی که در آنها ریتم خواندن خنثیتری مورد نظر است، استفاده میشود. با Open Runde جفت میشود تا تضاد سلسله مراتبی ایجاد کند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 12-16px |
| شعاع دکمه | 100px |
| شعاع کارت | 18px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 80-120px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Letters میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- Integrated Biosciences — آزمایشگاه زیستتابی در نیمهشب
- Mintlify — یک باغ ابری بالای یک میز شیشهای. آسمانِ نقاشیشده با دست و مستند در قابی کنار هم قرار گرفتهاند - تنها جایی که رنگ و مفهوم پیش از محو شدن صفحه در سفیدی صومعهوار، با هم تلاقی میکنند.
- Gleap — یک فضای کاری که با تُنهای کرم گرم و تزئینات گرافیتی تزئین شده است - استودیویی که در آن نقاط جوهر مشکی مات به نظر میرسد که بر فراز معماری کتانی شناور هستند.
- Render — طراحی روی آلومینیوم برسخورده انجام شده است. رابط کاربری مانند یک سند مهندسی هندسی و تمیز به نظر میرسد - فضای سفید، خطوط نازک و یک خط بنفش که توجه را به عمل جلب میکند.
- Grafbase — طراحی مهندسی روی سنگ مرمر سرد
- Slash — گاوصندوق نیمهشب با دفاتر کل طلاکاری شده
- Modal — یک ترمینال فسفرسنت در یک اتاق سرور تاریک - تنها منبع نور، رنگ سبز روشن است
- Whimsical — جوهر آلوی غلیظ روی پسزمینهی بنفش کمرنگ - یک دفترچه یادداشت استودیویی خلاقانه که به عنوان یک تخته سفید فنی نیز کاربرد دارد.
- AgentQL — شفق قطبی بر فراز ترمینال در شب
- Alveos One — پناهگاهی دنج ساخته شده از سنگهای رودخانه - اتاقی آرام و با نور ملایم برای مدیتیشن که در آن یک شیء گرافیتی با درخشش ملایم کهربایی قرار دارد
- GitHub — یک پنل فرماندهی فضایی با نقاط کنترل زیستتابی - یک فضای کاری تاریک و اتمسفریک که در آن یک درخشش سبز، مسیر پیش رو را نشان میدهد.
- Buddy — یک نقاشی مهندسی روی کاغذ شطرنجی. سطح سفید نقاشی با یک شبکه به سختی قابل مشاهده، با جوهر تقریباً مشکی، با نشانههای سبز لیمویی فلورسنت و خطوط گرادیان رنگینکمانی علامتگذاری شده است.