Notion
دوپہر کی دھوپ میں ایک گرم کاغذ کی نوٹ بک
تصور کا انٹرفیس دن کی روشنی میں ایک پیاری کاغذی نوٹ بک کی طرح لگتا ہے: ایک گرم، کریمی کینوس (#f6f5f4) جو جراثیم سے پاک ہونے کی بجائے لمس محسوس کرتا ہے، پروڈکٹ کی کاپی کو ادارتی وزن فراہم کرنے والی فیاض سینس سیرف ٹائپوگرافی، اور رنگ بطور ویرل رموز، ایک نیلے رنگ کے ایکشن کے طور پر استعمال ہوتا ہے۔ اور لہجے کے رنگوں (مرجان، امبر، آسمان، آدھی رات) کی گھومتی ہوئی صف کارڈ کے پس منظر کو اسٹیکرز کی طرح رنگ دیتی ہے۔ کارڈز کو کینوس پر پتلی سرحدوں اور کونوں کے ساتھ ترتیب دیا گیا ہے — کوئی سائے نہیں، کوئی کروم نہیں — جیسے Moleskine نوٹ بک کے قطار والے حصے۔ اینیمیشن چنچل اور بہار دار ہے، 200ms پر ہموار ٹرانزیشنز اور اسپرنگ کریکٹر اینیمیشنز کے ساتھ جو انٹرفیس کو آرائشی بنائے بغیر زندگی بخشتی ہے۔
مرکز میں، زیادہ سے زیادہ چوڑائی تقریباً 1440px تک محدود ہے۔ مرکزی عنصر ایک سینٹرڈ اسٹیک ہے: علامتوں کی ایک قطار → ایمبیڈڈ رنگین گولی کے ساتھ ایک بڑی دو لائن والی سرخی → ایک ذیلی سرخی → دو کال ٹو ایکشن بٹنوں والی قطار → ایک بڑا پروڈکٹ UI موک اپ۔ مرکزی عنصر کے نیچے، سفید کارڈز کے گرڈ اور پورے رنگ کے لہجے والے پینلز کے درمیان متبادل حصے۔ لوگو کی دیوار گرے اسکیل میں پارٹنر لوگو کی ایک مرکز والی واحد قطار گرڈ ہے۔ فیچر بلاکس دو کالم لے آؤٹ (بائیں طرف متن، دائیں طرف رنگین پینل) استعمال کرتے ہیں، حصوں کے درمیان بائیں سے دائیں باری باری کرتے ہیں۔ "اپنے اسسٹنٹس سے مطالبہ پر پوچھیں" سیکشن 2x2 کارڈ گرڈ کا استعمال کرتا ہے، جہاں اوپر والا کارڈ پوری چوڑائی تک لے جاتا ہے، اور نیچے کی قطار کو دو برابر کالموں میں تقسیم کیا جاتا ہے۔ حصوں کے درمیان گٹر سخی ہیں (~80px)، ایک پرسکون عمودی تال پیدا کرتے ہیں۔ نیویگیشن ایک فکسڈ 64px لمبا ٹاپ بار ہے جس میں سینٹرڈ نیویگیشن عناصر اور دائیں سیدھ والے ایکشن بٹن ہیں۔
تصویریں سب سے اہم ہیں، بغیر کسی تصویر کے۔ بصری زبان فلیٹ، تصویری علامتوں (2px رنگین حلقوں میں گول کناروں)، تجریدی آرائشی عناصر (ہاتھ سے تیار کردہ اسکوگلز، چمک، تیر، پھولوں کی شکلیں) اور پروڈکٹ کے یوزر انٹرفیس کے مک اپس پر بنائی گئی ہے۔ علامتیں مرکزی ونڈو میں سات اوتاروں کی افقی قطار کے طور پر نمودار ہوتی ہیں اور پورے صفحے پر چنچل اوقاف کے طور پر بکھری ہوئی ہیں۔ پروڈکٹ کے اسکرین شاٹس واحد "حقیقی" بصری عناصر ہیں: وہ عناصر اور حقیقی ڈیٹا کے مکمل سیٹ کے ساتھ اصل تصور انٹرفیس (کنبان بورڈز، دستاویز کے نظارے، AI ایجنٹ پینل) دکھاتے ہیں۔ مین ونڈو میں پروڈکٹ کا موک اپ بڑا، مرکز میں ہے، اور اسے کینوس سے الگ کرتے ہوئے ایک ہی سایہ ڈالتا ہے۔ کوئی طرز زندگی کی تصاویر نہیں ہیں، کوئی اسٹاک امیجز نہیں ہیں، کوئی خلاصہ 3D رینڈر نہیں ہیں۔
پیلیٹ
برانڈ
- Notion Blue
#0075de— کال ٹو ایکشن (CTA) بٹن کو بھرنے والا اہم عنصر، فعال نیویگیشن میں ایک لہجہ، بھرے ہوئے ایکشن بٹن تقریباً ایک مونوکروم سسٹم میں واحد رنگ سکیم ہیں جو سوئچ کے طور پر سمجھے جانے کے لیے کافی سیر ہوتے ہیں۔
غیر جانبدار
- Paper Warmth
#f6f5f4— صفحہ کینوس، مین ونڈو کا پس منظر، اور سیکشن کا پس منظر سبھی گرم، قدرے خاکستری رنگ کے ہیں جو سسٹم کو ایک ٹچائل، اینالاگ احساس دیتے ہیں۔ - Pure White
#ffffff— کارڈ کی سطحیں، ابھرے ہوئے پینلز، لوگو کا پس منظر، گہرے کارڈز پر متضاد متن۔ - Ink Black
#000000— مرکزی متن، نیویگیشن لنکس، عنوانات - نئے رنگوں کو شامل کیے بغیر درجہ بندی بنانے کے لیے مختلف شفافیت (100%, 95%, 90%, 60%, 40%, 20%) کے ساتھ استعمال کیا جاتا ہے۔ - Charcoal
#111111— ان UI علاقوں کے لیے ایک سیاہ متن کا اختیار جہاں خالص سیاہ بہت سخت نظر آئے گا۔ - Stone
#757575— سیکنڈری نیویگیشن ٹیکسٹ، خاموش مددگار ٹیکسٹ، غیر فعال بٹن لیبلز - 60% انک الفا - Graphite
#615d59— مرکزی متن میں ایک گرم ٹون ہے - بھوری بھوری، جو گرم پس منظر کے ساتھ ہم آہنگ ہے۔
نوع ٹائپ
12 سے 96px تک · 10 مراحل
- NotionInter — متبادل: Inter · خاکہ 400, 500, 600, 700 · مین sans-serif فونٹ ایک جیومیٹرک ہیومنسٹ ہے جس میں لطیف باریکیاں ہیں، جس کا استعمال باڈی ٹیکسٹ کے لیے 400 سائز، نیویگیشن/یوزر انٹرفیس کے لیے 500، اور ہیڈنگز کے لیے 600-700 پر ہوتا ہے۔ فونٹ اسکیل بڑے سائز (-4.6px پر 96px، 72px پر -2px) پر جارحانہ منفی حرف کی جگہ کا استعمال کرتا ہے، جس سے سرخی ہوا دار ہونے کی بجائے زیادہ کمپیکٹ اور پر اعتماد محسوس ہوتی ہے۔
- Lyon Text — متبادل: Source Serif Pro · خاکہ 400 · ادارتی سیرف فونٹ، جو مرکزی متن کے انفرادی حصوں اور سیکشن کے تعارف کے لیے مخصوص ہے، میگزین کی ترتیب میں ایک اقتباس کی طرح، ٹائپ فیس کو ادبی وزن دینے کے لیے تھوڑا (چار بار) استعمال کیا جاتا ہے۔ یہ متوازی درجہ بندی کے بجائے نظامی لہجے کے طور پر کام کرتا ہے۔
وقفے اور شکل
| مقصد | مطلب |
|---|---|
| کثافت | اوسط |
| بنیادی قدم | 8px |
| بٹن کا رداس | 8px |
| کارڈ کا رداس | 12px |
| سائے | نہیں - سائے کی بجائے سرحدیں |
| حصوں کے درمیان | 80px |
| صفحہ کی چوڑائی | 1440px |
AI آپ کی ویب سائٹ کو Notion کے انداز میں بنائے گا اور اسے بھرے گا۔
- لنک کے ذریعے پروڈکٹس اور پوسٹس بھریں - Instagram, TikTok, Facebook.
- اپنی پرانی سائٹ سے مواد منتقل کریں—بس پتہ کی وضاحت کریں۔
- بہترین انجن پر جدید ڈیزائن: سرور رینڈرنگ اور SEO آپٹیمائزیشن کے ساتھ React ( Next.js) باکس سے باہر۔
- تلاش کے نتائج اور نیورل نیٹ ورک کی سفارشات کے لیے مکمل طور پر خودکار SEO کی اصلاح۔
ملتے جلتے انداز
- ElevenLabs — لطیف سرخیوں کے ساتھ گرم کریم ٹونز میں ایک تصویری مضمون۔ بوہاؤس طرز کی نوٹ بک — انڈے کے شیل کے رنگ کا کاغذ، سیاہ سیاہی، اور مصنوعات کی نمائش کے لیے ایک جامنی اور نارنجی لہجہ۔
- Awesomic — ادارتی زنک میش نارنجی رموز اوقاف کے ساتھ کنفیٹی کی یاد دلاتی ہے
- Monad — گرم پارچمنٹ پر ادارتی تکنیکی جریدہ
- Dub — لنک کا میٹ رائس پیپر کنٹرول پینل
- Seline Analytics — گرم کاغذ پر ایک پرسکون تجزیاتی میز
- Anthropic — گرم ویلم پر ایک سائنسی فیلڈ جرنل — پرسکون ہاتھی دانت کی سطحیں، سیریفڈ ادارتی عنوانات، اور ایک واحد مٹی کا لہجہ جو صرف اس وقت ظاہر ہوتا ہے جب کارروائی کی ضرورت ہو۔
- Calendly — ٹھنڈے ماربل پر گہری نیلی سیاہی
- Augen Pro — ایپل کی سفید پریزنٹیشن میں کلینکل، بے وزن، برقی نیلے رنگ کو ایک مونوکروم اسپیس میں واحد لہجے کے طور پر دکھایا گیا ہے۔
- Antimetal — کریم پیپر پر ایک ادارتی کرانیکل — ایک سائنسی جریدے میں ایک پرسکون صبح، جہاں تحمل اعتماد کا اظہار کرتا ہے اور سیریف بھاری وزن اٹھاتے ہیں۔
- Perk — گرم پارچمنٹ پیپر پر برقی چونا
- Ditto — سورج کی روشنی والی ورکشاپ جو جنگلی پھولوں کے نمونے تیار کرتی ہے۔ گرم کریم کی سطحیں، ایک متحرک پیلے رنگ کا بنیادی رنگ، گہری بحریہ نیلی سیاہی، ٹکڑے کے پیچھے کھلتے ہوئے نامیاتی رنگ کی شکلیں۔
- Officevibe — گرم کریم رنگ کے کاغذ پر ایک ادارتی رسالہ۔ HR مینجمنٹ پر ایک سوچے سمجھے مضمون کا تصور کریں، جسے ایک پروڈکٹ کے طور پر پیش کیا گیا ہے — ایک جدید نیلے انٹرفیس کے ذریعے سرگوشی کرنے والا کرسیو فونٹ۔