Column
دفتر کل آبی تیره زیر سپیده دم خنک
ستون از یک آبی نفتی عمیق و سازمانی در یک پسزمینه تقریباً سفید استفاده میکند: صفحه اول مانند یک سطح محصول بانکی قوی و سپس یک زمین بازی توسعهدهندگان به نظر میرسد. رنگ برند تک رنگ نیست، بلکه یک جفت هماهنگ است - آبی نفتی #111a4a برای ساختار جدی، سبز نعنایی #44b48b برای دادهها و کد - با یک نارنجی گرم واحد (#ec652b) که برای سطوح برجسته با شدت بالا مانند کارت Brex در نظر گرفته شده است. تایپوگرافی تحت سلطه SuisseIntl است، یک فونت هندسی بدون سریف که در کل محدوده وزن از 300 (لینکها) تا 600 (نمایشگر) استفاده میشود و به سیستم سبکی سرمقالهای و تصفیهشده میدهد که اکثر شرکتهای فینتک فاقد آن هستند. کارتها روی سطوح سفید بزرگ با سایههای ظریف و لایهای شناور هستند. اکثر عناصر رابط کاربری مسطح هستند و عمق فقط در جایی ظاهر میشود که کارت باید مانند یک شیء فیزیکی احساس شود (ویجتهای تراکنش، ماکتهای محصول). کد و دادههای مالی به صورت تک رنگ و به رنگ کف دریا ارائه شدهاند - یک سیگنال بصری که این بانکی است که توسط مهندسان برای مهندسان ساخته شده است.
ساختار صفحه تمام عرض، در مرکز با حاشیههای جانبی پهن (۶۴ تا ۱۵ سانتیمتر در دسکتاپ) است. صفحه اصلی یک طرحبندی تقسیمشده دارد: تیتر و فراخوانها در سمت چپ و در فاصله ۲۵ سانتیمتر قرار دارند، در حالی که یک ویجت تراکنش شناور در سمت راست و در فاصله ۵۵ سانتیمتر در مقابل پسزمینه نقشه نیمرنگ قرار گرفته است. در زیر صفحه اصلی، بخشها به طور متناوب بین سفید (۴ سانتیمتر) و بوم روشن (۵ سانتیمتر) با حاشیههای عمودی ۶ سانتیمتر قرار دارند. محتوا بر اساس یک شبکه ۶ ستونی واحد مرتب شده است: بلوکهای متنی ۴ ستون (۷ سانتیمتر) را اشغال میکنند، کارتهای تصویر/محصول ۵ تا ۶ ستون را اشغال میکنند، با یک جابجایی عمدی از شبکه. بخشهایی که ویژگیها را توصیف میکنند از یک طرحبندی ۲ ستونی استفاده میکنند: متن در سمت چپ، محصول در سمت راست. بخش آمار اعتماد به یک شبکه ۴ ستونی در سراسر عرض کامل صفحه تقسیم شده است. لوگوهای مشتری در یک ردیف متمرکز با حاشیههای ۴۸ پیکسلی قرار دارند. پاورقی دارای یک طرحبندی دو ستونی فشرده است. نوار ناوبری یک نوار بالایی شفاف، ثابت و به ارتفاع ۶۲ پیکسل در بالای صفحه اصلی با پسزمینهای تار است که با اسکرول کردن به رنگ سفید درمیآید. هیچ نوار کناری یا مگامنویی وجود ندارد - منوهای کشویی، منوهای ساده به سبک فلش هستند.
سبک بصری مینیمالیستی و کاربردی است - Column کاملاً از عکاسی استوک اجتناب میکند. زبان بصری بر اساس سه منبع ساخته شده است: (1) تصاویر داده SVG، به طور خاص یک نقشه جهان با نیمسایه نقطهچین، که با گرادیانی از نیلی به نارنجی و فیروزهای ارائه شده و فضایی با مقیاس جهانی در پشت عنصر اصلی ایجاد میکند؛ (2) طرحبندی کارتهای محصول - ویجتهای شناور که مانده حسابها، جزئیات انتقال و قطعه کدهای JSON را در کارتهای سفید با سایههای چشمگیر نمایش میدهند؛ (3) تجسم نمودار - نمودارهای شمعی یا میلهای فیروزهای با خطوط اتصال نازک که در بخش اعتماد/آمار استفاده میشوند. نقشه نیمسایه یک عنصر بصری شاخص است - انتقال گرادیان آن از #d65620 (نارنجی) به بنفش، آبی، لاجوردی، فیروزهای و زرد، طیفی ایجاد میکند که کل پالت برند را در یک سطح تزئینی واحد متحد میکند. آیکونها در انواع #232730 یا #a9acb6 دارای ضخامت طرح کلی یکنواخت 1.5 تا 2 پیکسل هستند و دارای یک پرکننده برای حالتهای فعال هستند. نه عکسهای سبک زندگی، نه رندرهای سهبعدی انتزاعی - این محدودیت عمدی است تا توجه را به محصول و دادهها معطوف کند.
پالت
برند
- Indigo Navy
#111a4a— رنگ اصلی برند برای دکمههای فراخوان عمل (Call to action)، حالتهای ناوبری فعال، هدر و لوگو استفاده شده است. رنگ بنفش-آبی پررنگ به سایت، رنگی مشکی و در عین حال غنی میبخشد؛ این رنگ در ترکیب با متن سفید، جسورانهترین دکمه سایت را ایجاد میکند. - Seafoam 600
#44b48b— رنگ کد و داده، رنگ برند برای کلیدهای JSON، شناسهها و مقادیر مالی در قطعه کدها است. همچنین برای نقاط داده در نمودارها و تجسمهای رشد استفاده میشود. - Seafoam 700
#167e6c— سایه تیرهتری از فوم دریایی برای طرح کلی، خطوط نمودار و تأکید بر آیکونها در متن دادهها. این کار مقیاس فوم دریایی را در مقابل پسزمینه تیرهتر تثبیت میکند. - Seafoam 400
#94efb7— قطعه کد هایلایت شده شامل مقادیر رشتهای، URLها و نقاط انتهایی API در بلوکهای کد است. روشنترین رنگ seafoam به صورت یک فونت تکفاصله با ته رنگ سبز خوانده میشود. - Deep Sea
#023247— طرح کلی تزئینی و رنگ تأکیدی نمودار، رنگ فیروزهای غنی است که در تصاویر SVG و تجسم دادهها، همراه با مقیاس رنگی کف دریا، استفاده میشود.
خنثی
- Midnight Ink
#011821— سطح تیره و متن هایلایت شده - پسزمینه کارت محصول، متن اصلی با کنتراست بالا. نزدیک به خاکستری با ته رنگ آبی-سبز سرد؛ به عنوان پایهای برای حالت تاریک در مواقعی که نیاز به معکوس کردن یک بخش باشد، استفاده میشود. - Slate Ink
#3b3e47— عنوان فرعی و متن اصلی کمی گرمتر از رنگ «جوهر نیمهشب» هستند، رنگی که در جایی استفاده شده که رنگ مشکی خالص روی بوم روشن خیلی زننده به نظر میرسد. - Steel
#7c7f88— متن اصلی و متن لینکها تحت سلطهی یک رنگ ملایم هستند (که ۲۴۵ بار در متن اصلی استفاده شده است). یک رنگ خنثی خاکستری-آبی که به عنوان یک رنگ آرام درک میشود، هرگز یک تصویر رنگپریده نیست. - Fog
#a9acb6— خطوط بیرونی آیکونها، حاشیههای سوم و متنهای جایگزین. یک رنگ خاکستری متوسط که متن را بدون رقابت با آن جدا میکند. - Mist
#cbcccf— متن اصلی - امضاها، سلب مسئولیتها و حروف چاپی ریز - روی زمینه سفید خوانا است، اما از نظر بصری کمتر جلب توجه میکند. - Silver Lining
#e3e4e8— حاشیه کارتها، حاشیه فیلدهای ورودی، خطوط جداکننده. این رنگ ساختاری و ظریف در جایی استفاده میشود که دو سطح باید بدون سایه از هم جدا شوند.
تایپوگرافی
از ۱۰ تا ۶۰ پیکسل · ۱۰ مرحله
- SuisseIntl — جایگزینی: Inter · طرح کلی 300, 400, 500, 600 · فونت اصلی - برای همه عنوانها، متن بدنه، دکمهها، ناوبری، لینکها و متن کارت استفاده میشود. فونت هندسی منحصر به فرد sans serif به Column سبک سرمقالهای متمایزی میدهد و آن را از سایر شرکتهای فینتک که منحصراً با Inter-only کار میکنند، متمایز میکند. وزن فونت برای عنوانها در اندازه ۵۲ تا ۶۰ پیکسل ۶۰۰، برای زیرعنوانها ۵۰۰، برای متن بدنه ۴۰۰ و برای لینکهای کماهمیت ۳۰۰ است.
- SuisseIntlMono — جایگزینی: JetBrains Mono · طرح کلی 400 · یک فونت تکفاصله مشابه SuisseIntl، که برای برچسبهای فنی، شناسههای API و دادههای جاسازیشده در عناصر رابط کاربری استفاده میشود. این فونت همان تناسبات SuisseIntl را حفظ میکند، بنابراین متن تکفاصله و متناسب در متنهای ترکیبی به درستی تراز میشوند.
- SFMono — جایگزینی: Fira Code · طرح کلی 400 · نمایش قطعه کد - در مثالهای JSON و بلوکهای مستندات API نمایش داده میشود. از سایهی کف دریا برای تمایز بصری کد از متن رابط کاربری استفاده میشود.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | میانگین |
| گام اساسی | 8px |
| شعاع دکمه | 8px |
| شعاع کارت | 8px |
| سایهها | بدون حاشیه به جای سایه |
| بین بخشها | 72px |
| عرض صفحه | 1200px |
هوش مصنوعی وبسایت شما را به سبک Column میسازد و آن را پر میکند
- از طریق لینک - Instagram ، TikTok ، Facebook - محصولات و پستها را پر کنید.
- محتوا را از سایت قدیمی خود منتقل کنید—فقط آدرس را مشخص کنید.
- طراحی مدرن روی بهترین موتور: React ( Next.js) با رندر سرور و بهینهسازی سئو از پیش آماده.
- بهینهسازی سئو کاملاً خودکار برای نتایج جستجو و توصیههای شبکه عصبی.
سبکهای مشابه
- dope.security — ترمینال نیمهشب با چراغهای بنفش
- Leonardo — یک گالری سرمقاله وارونه. موزهای با دیوارهای سیاه که تیترهای بنفش نقش چیدمانهای دیواری را بازی میکنند و پرترههای تولید شده توسط هوش مصنوعی در یک شبکه متراکم در زیر آن آویزان شدهاند.
- VEED — دیوار گالری سفید با دکمههای نور سبز نئونی
- Craft Docs — یک کلاژ دیجیتال برای اسکرپبوکینگ. طراحی آن شبیه یک اسکرپبوکینگ متفکرانه و لمسی است که در آن یادداشتهای دیجیتالی ساختاریافته با بافتهای نرم و ارگانیک ترکیب میشوند.
- Letter — یک گالری خصوصی با آثار باستانی درخشان از انبار. یک فضای نمایشگاهی با دیوارهای سیاه که تیترهای سریف بالای مجسمههای کرومی روی دیوارهای رنگی گالری شناور هستند.
- Railway — قطار سریعالسیر نیمهشب کیهانی. سفری آرام و هیجانانگیز در فضای تاریک و پرستاره، که با سیگنالهای واضح هدایت میشود.
- Garden Eight — یک سرمقالهی عظیم روی کاغذ کرمرنگ. تیتر سریف ۲۱۵ پیکسلی به تنهایی روی پوست گرمی قرار گرفته، در حالی که با اشکال مجسمهای شناور و فضای منفی یادآور هوای دریا احاطه شده است - صفحه بیشتر شبیه جلد یک مونوگراف هنری است تا یک داشبورد.
- Steep — تحلیل فونتهای سریف روی کاغذ گرم
- ElevenLabs — یک مقاله تصویری با تُنهای کرم گرم با تیترهای ظریف. یک دفترچه یادداشت به سبک باوهاوس - کاغذ به رنگ پوست تخممرغ، جوهر مشکی و یک تکه رنگ بنفش و نارنجی برای نمایش محصول.
- Awesomic — توری زینک تحریریه با علائم نگارشی نارنجی که یادآور پولکهای رنگی است
- Monad — مجله فنی سرمقاله در مورد پوست گرم
- AI for Business — نمایشگاه تحریریه سبک بروتالیست با تُنهای خاکستری گرم