Substack
جوهر نارنجی روی میز تحریریه
ساباستک شبیه یک داشبورد کهنه و قدیمی اتاق خبر است - یک بوم سفید، متن گرم و تقریباً مشکی، و یک تکرنگ نارنجی روشن که هر مرحله از تولید محتوا را مشخص میکند. سلسله مراتب بصری بر اساس تراکم بنا شده است نه تزئینات: خطوط خاکستری نازک عناصر فید را از هم جدا میکنند، آواتارها کوچک هستند، فرادادهها بیصدا هستند و چشم خواننده طوری آموزش دیده است که روی دکمه فراخوان نارنجی، لوگوی نارنجی، لینک نارنجی «اشتراک» و دکمه نارنجی «ایجاد» تمرکز کند. سطوح صاف و بدون محدودیت نگه داشته شدهاند - بدون سایه کارت، بدون عناصر پنل کرومی - و به تایپوگرافی (یک عنصر رابط کاربری سیستم کرومی فشرده که با یک فونت تیتر سریف سفارشی جفت شده است) اجازه میدهد بار اصلی وزن تحریریه را به دوش بکشد. سبک امضا، عناصر کرومی محدود و جلوههای پر جنب و جوش تک رنگ است: یک برنامه مطالعه که مانند یک ابزار انتشار به نظر میرسد.
یک طرحبندی دسکتاپ سه ستونه: یک نوار کناری سمت چپ ثابت (حدود ۲۰۰ پیکسل، ناوبری با آیکونها و برچسبها، چسبنده)، یک فید مرکزی (حداکثر عرض حدود ۶۰۰ پیکسل، فهرست پستها با قابلیت پیمایش عمودی) و یک نوار کناری سمت راست ثابت (حدود ۳۰۰ پیکسل، جستجو + توصیهها + ثبتنام). فید مرکزی هسته اصلی سرمقاله است - بدون کارت، فقط پستهایی که روی هم با جداکنندههای نازک و فاصله ۳۲ پیکسلی بین بخشها انباشته شدهاند. بنر اصلی در بالای فید به عنوان یک کارت تمام عرض قرار دارد. نوار کناری سمت چپ شامل لوگوی برند (یک علامت نارنجی با خطوط روی هم قرار گرفته)، شش مورد ناوبری و یک دکمه نارنجی تمام عرض "ایجاد" در پایین است. نوار کناری سمت راست شامل یک فیلد جستجو، یک کارت ثبتنام و یک لیست "بعدی" برای خواندن است. ناوبری حداقلی است - بدون نوار بالا، بدون بردکرامب؛ نوار کناری همان ناوبری است. تراکم محتوا بالاست: پستها از متادیتای ۱۲ تا ۱۳ پیکسلی و متن اصلی ۱۵ تا ۱۹ پیکسلی استفاده میکنند که ریتمی شبیه به روزنامه ایجاد میکند، نه حس شبکه کارتی فروشگاه.
عکسها محتوای تولید شده توسط کاربر هستند (آواتار نویسنده، تصاویر کوچک پست، تصاویر پست)—Substack عکسهای تزئینی خود را ارائه نمیدهد. کارت اصلی از یک گرادیان فیروزهای به سبز با عناصر تصویری انتزاعی (اشکال هندسی، اشیاء قلم/یادداشت مانند سبکدار) به عنوان پسزمینه استفاده میکند. تصاویر کوچک پست در نوار کناری سمت راست کوچک (۶۴ پیکسل) هستند که در شعاع ۸ پیکسل محصور شدهاند و به عنوان پیشنمایشی از فهرست مطالعه عمل میکنند. زبان بصری کلی مبتنی بر متن است: رابط کاربری یک بوم مطالعه است و تصاویر به جای ایجاد فضا، به عنوان لنگرهای بصری کوچک عمل میکنند.
پالت
برند
- Signal Orange
#ff6719— نارنجی به عنوان یک رنگ ثانویه برای جزئیات تزئینی و برجسته کردن نشانههای نادر استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود.
خنثی
- Ink
#363737— متن بدنه - متن اصلی، سرتیترها، عناوین پستها، مهرهای زمانی و نام نویسندگان؛ یک رنگ گرم و تقریباً سیاه به جای #۰۰۰ خالص برای خواندن آسانتر. - Paper
#ffffff— بوم صفحه، سطوح کارت، فیلدهای ورودی و پسزمینه ناوبری، سطوح غالبی هستند که بخش عمدهای از رابط کاربری را اشغال میکنند. - Charcoal
#232525— حالت شناور برای متن و لینکهای اضافی با سطوح انتخاب بالا؛ عمیقتر از حالت جوهر برای بلوکهای کد و بلوکهای انتخاب. - Stone
#777777— رنگ خنثی برای عناصر رابط کاربری ثانویه، جداکنندهها و برچسبهای بیرنگ پشتیبانی میشود. این رنگ نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - Ash
#b6b6b6— خطوط حاشیه نازک، طرح کلی دکمهها، طرح کلی آیکونها، حاشیههای روی کنترلهای غیرفعال. - Mist
#c8c8c8— خطوط جداکننده، پسزمینهی ساده برای آیکونها، پر کردن سلولهای خالی به شکل اسکلت.
تایپوگرافی
از ۱۲ تا ۳۲ پیکسل · ۵ مرحله
- system-ui — جایگزینی: -apple-system · طرح کلی 400, 500, 600 · فونت اصلی رابط کاربری و متن بدنه، برای برچسبهای ناوبری، دکمهها، متن پیام، فراداده، فیلدهای ورودی و تمام عناصر رابط استفاده میشود. اندازههای فشرده ۱۲-۱۳ پیکسل برای فراداده و ۱۵-۱۹ پیکسل برای متن بدنه، حس یک فید خبری متراکم را ایجاد میکند. وزن برای متن بدنه ۴۰۰، برای عناصر ناوبری و برچسبهای دکمه ۵۰۰ و برای عناوین پیامهای هایلایت شده و سرتیترهای بخش ۶۰۰ است.
- Cahuenga — جایگزینی: Charter · طرح کلی 500 · یک فونت سریف تزئینی شاخص برای تیترهای سطح محصول (تیترهای سایدبار، تیترهای کارت ثبت نام، متن اصلی). وزن متوسط و ارتفاع خط اندک آن، ظاهری متمایز بدون احساس حجیم بودن به آن میدهد؛ این تنها فونتی است که علاوه بر رنگ نارنجی، هویت Substack را نشان میدهد.
- Spectral — جایگزینی: Charter · طرح کلی 400 · یک فونت سریف برای پستهای طولانی - که در اتاقهای مطالعه و در محتوای فید خبری برای بهبود خوانایی مطالب سرمقاله استفاده میشود. فاصله خطوط کمی کمتر (۱.۲۰) خواندن راحت پاراگراف را تضمین میکند و در عین حال فشردگی معمول اتاقهای خبر را حفظ میکند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 8px |
| شعاع دکمه | 9999px |
| شعاع کارت | 12px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 32px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Substack میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- ElevenLabs — یک مقاله تصویری با تُنهای کرم گرم با تیترهای ظریف. یک دفترچه یادداشت به سبک باوهاوس - کاغذ به رنگ پوست تخممرغ، جوهر مشکی و یک تکه رنگ بنفش و نارنجی برای نمایش محصول.
- Awesomic — توری زینک تحریریه با علائم نگارشی نارنجی که یادآور پولکهای رنگی است
- Monad — مجله فنی سرمقاله در مورد پوست گرم
- Dub — پنل کنترل کاغذ برنج مات لینک
- Seline Analytics — یک میز تحلیلی آرام روی کاغذ گرم
- Notion — یک دفترچه یادداشت کاغذی گرم در آفتاب ظهر
- Anthropic — یک ژورنال علمی میدانی روی پوست گرم - سطوح عاجی آرام، سربرگهای سرصفحهدار و یک لهجه گلی که فقط در صورت نیاز به اقدام ظاهر میشود.
- Calendly — جوهر آبی تیره روی مرمر سرد
- Augen Pro — ارائه سفید اپل، آبی الکتریکیِ بالینی، بیوزن و ملایم را به عنوان تنها عنصر تأکیدی در فضایی تکرنگ به نمایش میگذارد.
- Antimetal — شرح وقایع سرمقالهای روی کاغذ کرمرنگ - صبحی آرام در یک مجله علمی، جایی که خویشتنداری، اعتماد به نفس را منتقل میکند و حروف سریف بار سنگین را به دوش میکشند
- Perk — لیموی برقی روی کاغذ روغنی گرم
- Ditto — کارگاهی زیر نور خورشید که نمونههایی از گلهای وحشی خلق میکند. سطوح کرم گرم، رنگ پایه زرد پر جنب و جوش، جوهرهای سرمهای تیره، و اشکال رنگی ارگانیک که در پشت اثر شکوفا شدهاند.