Notion
د غرمې په لمر کې د ګرم کاغذ کتابچه
د نوشن انٹرفیس په رڼا ورځ د یوې محبوبې کاغذي نوټ بوک په څیر ښکاري: یو ګرم، کریمي کینوس (#f6f5f4) چې د جراثیم پر ځای لمس احساس کوي، سخاوتمند سینز سیریف ټایپوګرافي د محصول کاپي ته اداری وزن ورکوي، او رنګ د نري ټکي په توګه کارول کیږي - د شفتالو "ګولۍ" فعلونه روښانه کوي، یو واحد نیلي لنگر اصلي عمل، او د تلفظ رنګونو یو څرخیدونکی لړۍ (مرجان، امبر، اسمان، نیمه شپه) د کارت شالید د سټیکرونو په څیر رنګوي. کارتونه په کینوس کې د پتلو سرحدونو او کونجونو سره تنظیم شوي - هیڅ سیوري، هیڅ کروم نشته - لکه د مولسکین نوټ بوک د قطار شوي برخو په څیر. انیمیشن لوبوونکی او پسرلی دی، په 200ms کې د اسانه لیږدونو سره او د پسرلی کرکټر انیمیشنونه چې پرته له دې چې آرائشی وي انٹرفیس ته ژوند راوړي.
په مرکز کې، اعظمي عرض یې تقریبا ۱۴۴۰ پکسلز پورې محدود دی. اصلي عنصر یو متمرکز سټیک دی: د سمبولونو قطار → د دوه کرښو لوی سرلیک د یو ځای شوي رنګین ګولۍ سره → فرعي سرلیک → د دوه کال-ټو-ایکشن تڼیو سره قطار → د محصول یو لوی UI موک اپ. د اصلي عنصر لاندې، برخې د سپینو کارتونو او بشپړ رنګ اکسینټ پینلونو ترمنځ بدیل کیږي. د لوګو دیوال په خړ سکیل کې د ملګري لوګو یو متمرکز واحد قطار گرډ دی. د فیچر بلاکونه د دوه کالم ترتیب کاروي (په چپ اړخ کې متن، په ښي اړخ کې رنګین پینل)، د برخو ترمنځ کیڼ څخه ښي خوا ته بدلیږي. "د غوښتنې په وخت کې له خپلو مرستیالانو څخه پوښتنه وکړئ" برخه د 2x2 کارت گرډ کاروي، چیرې چې پورتنۍ کارت بشپړ عرض نیسي، او ښکته قطار په دوه مساوي ستنو ویشل شوی. د برخو ترمنځ ګټرونه سخاوتمند دي (~80 پکسلز)، یو ارام عمودی تال رامینځته کوي. نیویګیشن یو ثابت 64px لوړ پورتنۍ بار دی چې د مرکز نیویګیشن عناصرو او ښي اړخ سره سمون لرونکي عمل تڼیو سره.
انځورونه خورا مهم دي، پرته له عکسونو. بصري ژبه په فلیټ، انځور شوي سمبولونو (په 2px رنګه حلقو کې ګرد څنډې)، خلاصې آرائشی عناصرو (په لاس رسم شوي سکویګلونه، چمک، تیرونه، د ګل شکلونه)، او د محصول د کارونکي انٹرفیس د نقلونو څخه جوړه شوې ده. سمبولونه په اصلي کړکۍ کې د اوو اوتارونو افقي قطار په توګه ښکاري او په ټوله پاڼه کې د لوبو ټکي په توګه خپاره شوي دي. د محصول سکرین شاټونه یوازینۍ "اصلي" بصري عناصر دي: دوی د اصلي نوشن انٹرفیس (کانبان بورډونه، د سند لیدونه، د AI اجنټ پینلونه) د عناصرو او اصلي معلوماتو بشپړ سیټ سره ښیې. په اصلي کړکۍ کې د محصول نقل لوی، متمرکز دی، او یو واحد سیوری اچوي چې دا له کینوس څخه جلا کوي. د ژوند طرز عکسونه، د سټاک عکسونه، د خلاصې 3D رینډرونه شتون نلري.
پالټ
برانډ
- Notion Blue
#0075de— د کال-ټو-ایکشن (CTA) تڼۍ ډکولو اصلي عنصر، په فعال نیویګیشن کې یو تلفظ، ډک شوي عمل تڼۍ د نږدې مونوکروم سیسټم کې یوازینۍ رنګ سکیم دی چې دومره سیر شوی چې د سویچ په توګه وپیژندل شي.
بې طرفه
- Paper Warmth
#f6f5f4— د پاڼې کینوس، د اصلي کړکۍ شالید، او د برخې شالید ټول ګرم، یو څه خړ رنګونه دي چې سیسټم ته یو لمسونکی، انلاګ احساس ورکوي. - Pure White
#ffffff— د کارتونو سطحې، پورته شوي تختې، د لوګو شالید، په تیاره کارتونو کې متضاد متن. - Ink Black
#000000— اصلي متن، د نیویګیشن لینکونه، سرلیکونه - د مختلفو شفافیتونو سره کارول کیږي (۱۰۰٪، ۹۵٪، ۹۰٪، ۶۰٪، ۴۰٪، ۲۰٪) ترڅو د نوي رنګونو اضافه کولو پرته د سلسلې درجه بندي جوړه کړي. - Charcoal
#111111— د هغو UI ساحو لپاره د تیاره متن اختیار چیرې چې خالص تور به ډیر سخت ښکاري. - Stone
#757575— ثانوي نیویګیشن متن، خاموش مرستندویه متن، غیر فعال تڼۍ لیبلونه - 60٪ رنګ الفا - Graphite
#615d59— اصلي متن ګرم ټون لري - نسواري خړ، کوم چې د ګرم پس منظر سره همغږي کوي.
ټایپوګرافي
له ۱۲ څخه تر ۹۶ پکسله پورې · ۱۰ ګامونه
- 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.
- له خپل زوړ سایټ څخه مواد انتقال کړئ — یوازې پته مشخص کړئ.
- په غوره انجن کې عصري ډیزاین: د سرور رینډرینګ او SEO اصلاح کولو سره React ( Next.js).
- د لټون پایلو او عصبي شبکې سپارښتنو لپاره په بشپړ ډول اتوماتیک SEO اصلاح کول.
ورته سټایلونه
- ElevenLabs — د عکس مقاله په ګرمو کریمي رنګونو کې د نازکو سرلیکونو سره. د باهوس سټایل نوټ بوک - د هګۍ د خولۍ رنګ کاغذ، تور رنګ، او د محصول د نندارې لپاره یو واحد ارغواني او نارنجي تلفظ.
- Awesomic — د نارنجي ټکي نښو سره د اداری زنک میش چې د کنفټي یادونه کوي
- Monad — د ګرمو پوستکو په اړه د تخنیکي مجلې اداریه
- Dub — د لینک میټ وریجو کاغذ کنټرول پینل
- Seline Analytics — په ګرم کاغذ باندې یو خاموش تحلیلي میز
- Anthropic — د ګرمو ویلم په اړه یو ساینسي ساحوي ژورنال — د عاج آرامه سطحې، سیریف شوي اداری سرلیکونه، او یو واحد خټې تلفظ چې یوازې هغه وخت څرګندیږي کله چې عمل ته اړتیا وي.
- Calendly — په سړه مرمر باندې تیاره نیلي رنګ
- Augen Pro — د ایپل سپین پریزنټشن په یوه مونوکروم ځای کې د یوازینۍ تلفظ په توګه کلینیکي، بې وزنه، بریښنایی نیلي رنګ وړاندې کوي.
- Antimetal — په کریم کاغذ کې یوه اداریه کیسه - په یوه ساینسي ژورنال کې یوه خاموشه سهار، چیرې چې زغم باور څرګندوي او سیرفونه دروند کار کوي
- Perk — په ګرمو پارچمنټ کاغذ باندې برقي لیمو
- Ditto — د لمر وړانګو ورکشاپ چې د ځنګلي ګلونو نمونې جوړوي. ګرمې کریمي سطحې، یو متحرک ژیړ اساس رنګ، ژور سمندري نیلي رنګ، د ټوټې تر شا د عضوي رنګ بڼې غوړیږي.
- Officevibe — په ګرم کریم رنګ کاغذ باندې یوه اداری مجله. د HR مدیریت په اړه یوه فکري مقاله تصور کړئ، چې د محصول په توګه وړاندې کیږي - یو کرسیو سیریف فونټ چې د عصري نیلي انٹرفیس له لارې غږیږي.