Column
ٹھنڈی صبح کے نیچے ایک گہرا نیلا لیجر
کالم قریب قریب سفید پس منظر پر گہرے، ادارہ جاتی بحریہ کے نیلے رنگ کا استعمال کرتا ہے: صفحہ پہلے ایک مضبوط بینکنگ پروڈکٹ کی سطح کی طرح محسوس ہوتا ہے اور دوسرے ڈویلپر کے کھیل کے میدان کی طرح۔ برانڈ کا رنگ کوئی ایک نہیں ہے، بلکہ ایک مربوط جوڑا ہے — سنگین ساخت کے لیے نیوی بلیو #111a4a، ڈیٹا اور کوڈ کے لیے ٹکسال سبز #44b48b — جس میں ایک گرم نارنجی (#ec652b) بریکس کارڈ جیسی اعلی شدت والے لہجے والی سطحوں کے لیے مخصوص ہے۔ ٹائپوگرافی پر SuisseIntl کا غلبہ ہے، ایک جیومیٹرک سانز سیرف جو 300 (لنک) سے لے کر 600 (ڈسپلے) تک پورے وزن میں استعمال ہوتا ہے، جس سے سسٹم کو ایک بہتر، ادارتی انداز ملتا ہے جس کی زیادہ تر فنٹیک کمپنیوں میں کمی ہے۔ کارڈز ٹھیک ٹھیک پرتوں والے سائے کے ساتھ بڑی سفید سطحوں پر تیرتے ہیں۔ زیادہ تر انٹرفیس عناصر فلیٹ ہوتے ہیں، گہرائی صرف اس جگہ ظاہر ہوتی ہے جہاں کارڈ کو کسی فزیکل آبجیکٹ کی طرح محسوس ہونا چاہیے (ٹرانزیکشن ویجٹ، پروڈکٹ موک اپ)۔ کوڈ اور مالیاتی اعداد و شمار مونوکروم، سمندری فوم کے رنگ میں پیش کیے گئے ہیں — یہ ایک بصری سگنل ہے کہ یہ ایک بینک ہے جسے انجینئرز نے انجینئرز کے لیے بنایا ہے۔
صفحہ کا ڈھانچہ پوری چوڑائی کا ہے، جس کا مرکز وسیع سائیڈ مارجن (ڈیسک ٹاپ پر 64–15 سینٹی میٹر) ہے۔ مرکزی اسکرین ایک تقسیم شدہ ترتیب ہے: ہیڈ لائن اور کال ٹو ایکشن 25 سینٹی میٹر پر بائیں طرف سیدھ میں ہیں، جبکہ فلوٹنگ ٹرانزیکشن ویجیٹ کو ہاف ٹون میپ بیک گراؤنڈ کے خلاف 55 سینٹی میٹر پر دائیں طرف رکھا گیا ہے۔ مرکزی اسکرین کے نیچے، 6 سینٹی میٹر عمودی گٹر کے ساتھ سفید (4 سینٹی میٹر) اور ہلکے کینوس (5 سینٹی میٹر) کے درمیان متبادل حصے۔ مواد کو ایک واحد 6 کالم گرڈ کے مطابق ترتیب دیا جاتا ہے: ٹیکسٹ بلاکس 4 کالم (7 سینٹی میٹر) پر قبضہ کرتے ہیں، تصویر/پروڈکٹ کارڈز 5-6 کالم پر قبضہ کرتے ہیں، گرڈ سے جان بوجھ کر آفسیٹ کے ساتھ۔ خصوصیات کو بیان کرنے والے حصے 2 کالم لے آؤٹ کا استعمال کرتے ہیں: بائیں طرف متن، دائیں طرف پروڈکٹ۔ اعتماد کے اعداد و شمار کے حصے کو صفحہ کی پوری چوڑائی میں 4 کالم گرڈ میں تقسیم کیا گیا ہے۔ گاہک کے لوگو 48px گٹر کے ساتھ ایک ہی مرکز والی قطار میں واقع ہیں۔ فوٹر میں ایک کمپیکٹ دو کالم لے آؤٹ ہے۔ نیویگیشن ایک دھندلا پس منظر کے ساتھ مرکزی اسکرین پر ایک مقررہ، 62px لمبا، شفاف ٹاپ بار ہے جو آپ کے سکرول کرتے وقت سفید ہو جاتا ہے۔ کوئی سائڈبار یا میگا مینو نہیں ہے — ڈراپ ڈاؤن سادہ تیر طرز کے مینو ہیں۔
بصری انداز کم سے کم اور فعال ہے — کالم اسٹاک فوٹو گرافی سے مکمل طور پر گریز کرتا ہے۔ بصری زبان کو تین ذرائع پر بنایا گیا ہے: (1) SVG اعداد و شمار کی عکاسی، خاص طور پر ایک نقطے والا ہاف ٹون دنیا کا نقشہ، جو انڈگو سے نارنجی سے فیروزی تک کے میلان کے ساتھ پیش کیا گیا ہے، جو بنیادی عنصر کے پیچھے عالمی سطح پر ماحول پیدا کرتا ہے۔ (2) پروڈکٹ کارڈ لے آؤٹ — تیرتے ویجٹس جو اکاؤنٹ بیلنس، ٹرانسفر کی تفصیلات، اور JSON کوڈ کے ٹکڑوں کو ڈرامائی سائے کے ساتھ سفید کارڈز میں دکھاتے ہیں۔ (3) چارٹ ویژولائزیشنز — فیروزی کینڈل سٹک یا بار چارٹس جن کا استعمال ٹرسٹ/شماریات کے سیکشن میں کیا جاتا ہے۔ ہاف ٹون نقشہ ایک دستخطی بصری عنصر ہے — اس کی تدریجی تبدیلی #d65620 (نارنجی) سے بنفشی، نیلے، نیلے، فیروزی، اور پیلے رنگ میں ہوتی ہے، جس سے ایک اسپیکٹرم پیدا ہوتا ہے جو پورے برانڈ پیلیٹ کو ایک آرائشی سطح پر متحد کرتا ہے۔ شبیہیں #232730 یا #a9acb6 مختلف حالتوں میں 1.5–2px کی یکساں آؤٹ لائن موٹائی رکھتی ہیں، فعال حالتوں کے لیے بھرے ہوئے ہیں۔ طرز زندگی کی کوئی تصاویر نہیں، کوئی خلاصہ 3D رینڈرز نہیں ہیں — پابندی مصنوعات اور ڈیٹا پر توجہ مرکوز کرنے کے لیے جان بوجھ کر ہے۔
پیلیٹ
برانڈ
- Indigo Navy
#111a4a— بنیادی برانڈ کا رنگ بھرے ہوئے کالز ٹو ایکشن، فعال نیویگیشن اسٹیٹس، ہیڈر اور لوگو کے لیے استعمال کیا جاتا ہے۔ گہرا بنفشی نیلا رنگ سائٹ کو ٹھوس لیکن بھرپور سیاہ رنگت دیتا ہے۔ سفید متن کے ساتھ جوڑا بنا، یہ سائٹ پر سب سے زیادہ مضبوط بٹن بناتا ہے۔ - Seafoam 600
#44b48b— کوڈ اور ڈیٹا کا رنگ JSON کیز، شناخت کنندگان اور کوڈ کے ٹکڑوں میں مالی اقدار کے لیے برانڈ کا رنگ ہے۔ یہ چارٹس اور ترقی کے تصورات میں ڈیٹا پوائنٹس کے لیے بھی استعمال ہوتا ہے۔ - Seafoam 700
#167e6c— ڈیٹا سیاق و سباق میں آؤٹ لائن، چارٹ لائنز، اور آئیکن کے لہجے کے لیے سمندری فوم کا گہرا سایہ۔ یہ سمندری فوم پیمانے کو گہرے پس منظر کے خلاف لنگر انداز کرتا ہے۔ - Seafoam 400
#94efb7— ہائی لائٹ کردہ کوڈ فریگمنٹ میں کوڈ بلاکس کے اندر سٹرنگ ویلیوز، یو آر ایل، اور API اینڈ پوائنٹس ہوتے ہیں۔ سمندری فوم کا سب سے ہلکا رنگ سبز رنگ کے ٹنٹ کے ساتھ مونو اسپیسڈ فونٹ کے طور پر پڑھتا ہے۔ - Deep Sea
#023247— چارٹ کا آرائشی خاکہ اور لہجے کا رنگ ایک بھرپور فیروزی رنگ ہے جو SVG عکاسیوں اور ڈیٹا ویژولائزیشن میں سمندری فوم کلر اسکیل کے ساتھ استعمال ہوتا ہے۔
غیر جانبدار
- Midnight Ink
#011821— گہرا سطح اور ہائی لائٹ ٹیکسٹ – پروڈکٹ کارڈ کا پس منظر، ہائی کنٹراسٹ مین ٹیکسٹ۔ ٹھنڈی نیلی سبز رنگت کے ساتھ بھوری رنگ کے قریب؛ جب کسی حصے کو الٹا کرنے کی ضرورت ہو تو ڈارک موڈ کے لیے بیس کے طور پر استعمال کیا جاتا ہے۔ - Slate Ink
#3b3e47— ثانوی عنوان اور مرکزی متن آدھی رات کی سیاہی سے تھوڑا گرم ہے، جہاں خالص سیاہ روشنی کینوس پر بہت سخت معلوم ہوتا ہے۔ - Steel
#7c7f88— مرکزی متن اور لنک متن پر خاموش رنگ کا غلبہ ہے (مرکزی متن میں 245 بار استعمال کیا گیا ہے)۔ ایک غیر جانبدار سرمئی نیلا رنگ جسے پرسکون سمجھا جاتا ہے، کبھی بھی دھونے والی تصویر نہیں۔ - Fog
#a9acb6— آئیکن کا خاکہ، ترتیری سرحدیں، اور پلیس ہولڈر ٹیکسٹ۔ ایک درمیانی سرمئی رنگ جو متن کو بغیر مقابلہ کیے الگ کرتا ہے۔ - Mist
#cbcccf— مرکزی متن—دستخط، دستبرداری، اور چھوٹا پرنٹ—ایک سفید پس منظر پر واضح ہے، لیکن بصری طور پر کم نمایاں ہے۔ - Silver Lining
#e3e4e8— کارڈ کی سرحدیں، ان پٹ فیلڈ کی سرحدیں، تقسیم کرنے والی لائنیں۔ یہ ساختی، لطیف رنگ استعمال کیا جاتا ہے جہاں دو سطحوں کو بغیر سائے کے الگ کرنے کی ضرورت ہوتی ہے۔
نوع ٹائپ
10 سے 60px تک · 10 مراحل
- SuisseIntl — متبادل: Inter · خاکہ 300, 400, 500, 600 · بنیادی فونٹ - تمام عنوانات، باڈی ٹیکسٹ، بٹنز، نیویگیشن، لنکس اور کارڈ ٹیکسٹ کے لیے استعمال کیا جاتا ہے۔ منفرد جیومیٹرک سانز سیرف کالم کو ایک مخصوص ادارتی انداز فراہم کرتا ہے، جو اسے صرف انٹر کے ساتھ خصوصی طور پر کام کرنے والی دیگر فنٹیک کمپنیوں سے الگ کرتا ہے۔ ہیڈنگز کے لیے وزن 52–60px پر 600، ذیلی سرخیوں کے لیے 500، باڈی ٹیکسٹ کے لیے 400، اور کم زور والے لنکس کے لیے 300 ہے۔
- SuisseIntlMono — متبادل: JetBrains Mono · خاکہ 400 · SuisseIntl کی طرح ایک مونو اسپیسڈ فونٹ، جو تکنیکی لیبلز، API شناخت کنندگان، اور UI عناصر میں سرایت شدہ ڈیٹا کے لیے استعمال ہوتا ہے۔ یہ اسی تناسب کو برقرار رکھتا ہے جیسا کہ SuisseIntl، لہذا monospaced اور متناسب متن مخلوط سیاق و سباق میں درست طریقے سے سیدھ میں رکھتا ہے۔
- SFMono — متبادل: Fira Code · خاکہ 400 · کوڈ کا ٹکڑا ڈسپلے - JSON مثالوں اور API دستاویزات کے بلاکس میں دکھایا گیا ہے۔ کوڈ کو UI متن سے بصری طور پر الگ کرنے کے لیے سمندری فوم شیڈ کا استعمال کیا جاتا ہے۔
وقفے اور شکل
| مقصد | مطلب |
|---|---|
| کثافت | اوسط |
| بنیادی قدم | 8px |
| بٹن کا رداس | 8px |
| کارڈ کا رداس | 8px |
| سائے | نہیں - سائے کی بجائے سرحدیں |
| حصوں کے درمیان | 72px |
| صفحہ کی چوڑائی | 1200px |
AI آپ کی ویب سائٹ کو Column کے انداز میں بنائے گا اور اسے بھرے گا۔
- لنک کے ذریعے پروڈکٹس اور پوسٹس بھریں - Instagram, TikTok, Facebook.
- اپنی پرانی سائٹ سے مواد منتقل کریں—بس پتہ کی وضاحت کریں۔
- بہترین انجن پر جدید ڈیزائن: سرور رینڈرنگ اور SEO آپٹیمائزیشن کے ساتھ React ( Next.js) باکس سے باہر۔
- تلاش کے نتائج اور نیورل نیٹ ورک کی سفارشات کے لیے مکمل طور پر خودکار SEO کی اصلاح۔
ملتے جلتے انداز
- dope.security — جامنی رنگ کے بیکنز کے ساتھ آدھی رات کا ٹرمینل
- Leonardo — ایک الٹی ایڈیٹوریل گیلری۔ سیاہ دیواروں والا میوزیم جہاں ارغوانی سرخیاں دیوار کی تنصیب کا کام کرتی ہیں، اور AI سے تیار کردہ پورٹریٹ نیچے گھنے گرڈ میں لٹک رہے ہیں۔
- VEED — نیین سبز روشنی کے بٹنوں کے ساتھ سفید گیلری کی دیوار
- Craft Docs — سکریپ بکنگ کے لیے ایک ڈیجیٹل کولاج۔ ڈیزائن ایک سوچے سمجھے، چھونے والی اسکریپ بک سے مشابہت رکھتا ہے، جہاں ساختی ڈیجیٹل نوٹ نرم، نامیاتی ساخت کے ساتھ مل جاتے ہیں۔
- Letter — ایک نجی گیلری جس میں سٹوریج سے چمکتے ہوئے نمونے ہیں۔ سیاہ دیواروں والی نمائش کی جگہ جہاں گیلری کی رنگین دیواروں پر کروم مجسموں کے اوپر سیرف والی سرخیاں تیرتی ہیں۔
- Railway — کاسمک مڈ نائٹ ایکسپریس۔ تاریک، ستاروں کی روشنی والی جگہ کے ذریعے ایک پرسکون، سنسنی خیز سفر، واضح اشاروں سے رہنمائی۔
- Garden Eight — کریم رنگ کے کاغذ پر ایک یادگار اداریہ۔ 215px سیرف کی سرخی گرم پارچمنٹ پر تنہا بیٹھی ہے، جو تیرتی مجسمہ سازی کی شکلوں اور سمندری ہوا کی یاد دلانے والی منفی جگہ سے گھری ہوئی ہے — صفحہ ڈیش بورڈ سے زیادہ آرٹ مونوگراف کے کور کی طرح محسوس ہوتا ہے۔
- Steep — گرم کاغذ پر سیرف فونٹس کا تجزیہ
- ElevenLabs — لطیف سرخیوں کے ساتھ گرم کریم ٹونز میں ایک تصویری مضمون۔ بوہاؤس طرز کی نوٹ بک — انڈے کے شیل کے رنگ کا کاغذ، سیاہ سیاہی، اور مصنوعات کی نمائش کے لیے ایک جامنی اور نارنجی لہجہ۔
- Awesomic — ادارتی زنک میش نارنجی رموز اوقاف کے ساتھ کنفیٹی کی یاد دلاتی ہے
- Monad — گرم پارچمنٹ پر ادارتی تکنیکی جریدہ
- AI for Business — گرم سرمئی لہجے میں سفاکانہ ادارتی شو روم