Notion
منجهند جي سج ۾ هڪ گرم ڪاغذ جي نوٽ بڪ
نوشن جو انٽرفيس ڏينهن جي روشنيءَ ۾ هڪ پياري ڪاغذ جي نوٽ بڪ وانگر نظر اچي ٿو: هڪ گرم، ڪريمي ڪينواس (#f6f5f4) جيڪو جراثيم کان پاڪ، سخي سينز-سيرف ٽائيپوگرافي جي بدران ڇهندڙ محسوس ٿئي ٿو جيڪو پراڊڪٽ ڪاپي کي ادارتي وزن ڏئي ٿو، ۽ رنگ کي گهٽ اوقاف طور استعمال ڪيو ويو آهي - آڑو "گوليون" فعل کي نمايان ڪن ٿيون، هڪ نيرو مکيه عمل کي اينڪر ڪري ٿو، ۽ تلفظ جي رنگن جي هڪ گھمڻ واري صف (مرجان، امبر، آسمان، اڌ رات) ڪارڊ جي پس منظر کي اسٽيڪر وانگر رنگين ڪن ٿا. ڪارڊ هڪ ڪينواس تي پتلي سرحدن ۽ ڪنڊن سان ترتيب ڏنل آهن - ڪو به پاڇو نه، ڪو به ڪروم نه - مولسڪائن نوٽ بڪ جي قطار واري حصن وانگر. اينيميشن چنچل ۽ بهار آهي، 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 کان 96 پکسلز تائين · 10 مرحلا
- NotionInter — متبادل: Inter · خاڪا 400, 500, 600, 700 · مکيه سينز-سيريف فونٽ هڪ جاميٽري هيومنسٽ آهي جنهن ۾ نفيس نزاڪتون آهن، جيڪي باڊي ٽيڪسٽ لاءِ سائيز 400، نيويگيشن/يوزر انٽرفيس لاءِ 500، ۽ هيڊنگ لاءِ 600-700 تي استعمال ٿين ٿيون. فونٽ اسڪيل وڏين سائيزن تي جارحاڻي منفي اکرن جي فاصلي کي استعمال ڪري ٿو (-4.6px 96px تي، -2px 72px تي)، جيڪو هيڊنگ کي هوادار بدران وڌيڪ ڪمپيڪٽ ۽ پراعتماد محسوس ڪري ٿو.
- Lyon Text — متبادل: Source Serif Pro · خاڪا 400 · ايڊيٽوريل سيريف فونٽ، جيڪو مکيه متن جي انفرادي حصن ۽ سيڪشن جي تعارف لاءِ مخصوص آهي، گهٽ ۾ گهٽ (چار ڀيرا) استعمال ڪيو ويندو آهي ته جيئن ٽائيپ فيس کي ادبي وزن ڏئي سگهجي، جيڪو رسالي جي ترتيب ۾ اقتباس وانگر آهي. اهو هڪ متوازي درجي بندي جي بدران هڪ سسٽماتي تلفظ جي طور تي ڪم ڪري ٿو.
وقفا ۽ شڪل
| مقصد | مطلب |
|---|---|
| کثافت | سراسري |
| بنيادي قدم | 8px |
| بٽڻ جو ريڊيس | 8px |
| ڪارڊ جو ريڊيس | 12px |
| پاڇا | پاڇن جي بدران ڪو به بارڊر نه |
| حصن جي وچ ۾ | 80px |
| صفحي جي ويڪر | 1440px |
AI توهان جي ويب سائيٽ Notion انداز ۾ ٺاهيندو ۽ ان کي ڀريندو.
- لنڪ ذريعي پراڊڪٽس ۽ پوسٽن سان ڀريو - Instagram ، TikTok ، Facebook.
- پنهنجي پراڻي سائيٽ تان مواد منتقل ڪريو - صرف پتو بيان ڪريو.
- بهترين انجن تي جديد ڊيزائن: سرور رينڊرنگ ۽ ايس اي او آپٽمائيزيشن سان React ( Next.js).
- ڳولا جي نتيجن ۽ نيورل نيٽ ورڪ سفارشن لاءِ مڪمل طور تي خودڪار SEO اصلاح.
هڪجهڙا انداز
- ElevenLabs — نرم سرخين سان گرم ڪريم ٽون ۾ هڪ تصويري مضمون. هڪ باهاؤس طرز جي نوٽ بڪ - انڊي شيل رنگ جو ڪاغذ، ڪارو مس، ۽ پراڊڪٽ ڊسپلي لاءِ هڪ واحد جامني ۽ نارنگي تلفظ.
- Awesomic — نارنگي اوقاف جي نشانين سان ايڊيٽوريل زنڪ ميش جيڪو ڪنفيٽي جي ياد ڏياري ٿو
- Monad — گرم پارچمينٽ تي ايڊيٽوريل ٽيڪنيڪل جرنل
- Dub — لنڪ جو ميٽ رائس پيپر ڪنٽرول پينل
- Seline Analytics — گرم ڪاغذ تي هڪ خاموش تجزياتي ٽيبل
- Anthropic — گرم ويلم تي هڪ سائنسي فيلڊ جرنل - پرسڪون هٿي دانت جون مٿاڇريون، سيرف ٿيل ادارتي عنوان، ۽ هڪ واحد مٽيءَ جو تلفظ جيڪو صرف تڏهن ظاهر ٿئي ٿو جڏهن عمل جي ضرورت هجي.
- Calendly — ٿڌي سنگ مرمر تي ڳاڙهي نيري مس
- Augen Pro — ايپل جي اڇي پيشڪش ۾ هڪ مونوڪروم اسپيس ۾ واحد تلفظ جي طور تي هڪ ڪلينڪل، بي وزن، برقي نيرو رنگ شامل آهي.
- Antimetal — ڪريم پيپر تي هڪ ادارتي تاريخ - هڪ سائنسي جرنل ۾ هڪ خاموش صبح، جتي ضبط اعتماد جو اظهار ڪري ٿو ۽ سيريف ڳرو ڪم ڪن ٿا.
- Perk — گرم پارچمينٽ پيپر تي اليڪٽرڪ ليم
- Ditto — سج جي روشني ۾ جهنگلي گلن جا نمونا ٺاهيندڙ ورڪشاپ. گرم ڪريم مٿاڇريون، هڪ متحرڪ پيلو بنيادي رنگ، گہرے نيري رنگ جي مس، ٽڪري جي پويان ڦٽي رهيا نامياتي رنگ جون شڪلون.
- Officevibe — گرم ڪريم رنگ جي ڪاغذ تي هڪ ادارتي رسالو. تصور ڪريو HR مئنيجمينٽ تي هڪ سوچيندڙ مضمون، هڪ پراڊڪٽ جي طور تي پيش ڪيو ويو آهي - هڪ ڪرسيو سيريف فونٽ هڪ جديد نيرو انٽرفيس ذريعي سرگوشي ڪري رهيو آهي.