
Notion
দুপুরের রোদে একটি উষ্ণ কাগজের নোটবুক
নোশনের ইন্টারফেসটি দিনের আলোয় একটি প্রিয় কাগজের নোটবুকের মতো দেখায়: একটি উষ্ণ, ক্রিম রঙের ক্যানভাস (#f6f5f4) যা প্রাণহীন না হয়ে বরং স্পর্শযোগ্য অনুভূতি দেয়, প্রচুর পরিমাণে স্যানস-সেরিফ টাইপোগ্রাফি পণ্যের বিবরণে সম্পাদকীয় গুরুত্ব যোগ করে, এবং রঙকে অল্প যতিচিহ্ন হিসেবে ব্যবহার করা হয়েছে—পীচ রঙের "পিল" ক্রিয়াপদকে হাইলাইট করে, একটিমাত্র নীল রঙ মূল কাজটিকে স্থির রাখে, এবং বিভিন্ন অ্যাকসেন্ট রঙের (কোরাল, অ্যাম্বার, স্কাই, মিডনাইট) একটি ঘূর্ণায়মান সমাহার স্টিকারের মতো কার্ডের ব্যাকগ্রাউন্ডকে রঙিন করে তোলে। কার্ডগুলো একটি পাতলা বর্ডার এবং কোণাযুক্ত ক্যানভাসে সাজানো থাকে—কোনো ছায়া নেই, কোনো চাকচিক্য নেই—ঠিক যেন একটি মোলেস্কিন নোটবুকের রেখাযুক্ত অংশগুলোর মতো। অ্যানিমেশনটি প্রাণবন্ত এবং স্প্রিংয়ের মতো, ২০০ মিলিসেকেন্ডের মসৃণ ট্রানজিশন এবং স্প্রিংয়ের মতো চরিত্রগুলোর অ্যানিমেশন ইন্টারফেসটিকে আলংকারিক না হয়েও জীবন্ত করে তোলে।
মাঝখানে অবস্থিত হওয়ায় এর সর্বোচ্চ প্রস্থ প্রায় ১৪৪০ পিক্সেলে সীমাবদ্ধ। মূল উপাদানটি একটি কেন্দ্র-সারিবদ্ধ স্ট্যাক: প্রতীকের একটি সারি → একটি এমবেড করা রঙিন পিল সহ একটি বড় দুই-লাইনের শিরোনাম → একটি উপ-শিরোনাম → দুটি কল-টু-অ্যাকশন বোতাম সহ একটি সারি → একটি বড় প্রোডাক্ট UI মকআপ। মূল উপাদানের নিচে, বিভাগগুলো সাদা কার্ডের গ্রিড এবং সম্পূর্ণ রঙিন অ্যাকসেন্ট প্যানেলের মধ্যে পর্যায়ক্রমে সাজানো। লোগো ওয়ালটি হলো ধূসর রঙের পার্টনার লোগোগুলোর একটি কেন্দ্র-সারিবদ্ধ এক-সারি গ্রিড। ফিচার ব্লকগুলো একটি দুই-কলাম লেআউট ব্যবহার করে (বামে লেখা, ডানে রঙিন প্যানেল), যা বিভাগগুলোর মধ্যে বাম থেকে ডানে পর্যায়ক্রমে সাজানো। "আপনার সহকারীদের চাহিদা অনুযায়ী জিজ্ঞাসা করুন" বিভাগটি একটি ২x২ কার্ড গ্রিড ব্যবহার করে, যেখানে উপরের কার্ডটি সম্পূর্ণ প্রস্থ জুড়ে থাকে এবং নিচের সারিটি দুটি সমান কলামে বিভক্ত। বিভাগগুলোর মাঝের ফাঁকা স্থানগুলো যথেষ্ট প্রশস্ত (~৮০ পিক্সেল), যা একটি শান্ত উল্লম্ব ছন্দ তৈরি করে। নেভিগেশনটি হলো একটি নির্দিষ্ট ৬৪ পিক্সেল উঁচু টপ বার, যেখানে কেন্দ্র-সারিবদ্ধ নেভিগেশন উপাদান এবং ডানদিকে সারিবদ্ধ অ্যাকশন বোতাম রয়েছে।
এখানে চিত্রাঙ্কনই প্রধান, কোনো ছবি নেই। এর ভিজ্যুয়াল ল্যাঙ্গুয়েজটি তৈরি হয়েছে ফ্ল্যাট, চিত্রিত প্রতীক (২ পিক্সেল রঙিন বৃত্তের গোলাকার প্রান্ত), বিমূর্ত আলংকারিক উপাদান (হাতে আঁকা আঁকাবাঁকা রেখা, গ্লিটার, তীরচিহ্ন, ফুলের আকৃতি) এবং প্রোডাক্টের ইউজার ইন্টারফেসের মকআপের উপর ভিত্তি করে। প্রতীকগুলো মূল উইন্ডোতে সাতটি অ্যাভাটারের একটি অনুভূমিক সারি হিসেবে প্রদর্শিত হয় এবং পৃষ্ঠাজুড়ে কৌতুকপূর্ণ যতিচিহ্নের মতো ছড়িয়ে ছিটিয়ে থাকে। প্রোডাক্টের স্ক্রিনশটগুলোই একমাত্র "বাস্তব" ভিজ্যুয়াল উপাদান: এগুলো সম্পূর্ণ উপাদান সেট এবং আসল ডেটাসহ প্রকৃত নোশন ইন্টারফেস (কানবান বোর্ড, ডকুমেন্ট ভিউ, এআই এজেন্ট প্যানেল) দেখায়। মূল উইন্ডোতে থাকা প্রোডাক্ট মকআপটি বড়, কেন্দ্রে অবস্থিত এবং ক্যানভাস থেকে এটিকে আলাদা করে একটিমাত্র ছায়া ফেলে। এখানে কোনো লাইফস্টাইল ফটো, স্টক ইমেজ বা বিমূর্ত থ্রিডি রেন্ডার নেই।
প্যালেট
ব্র্যান্ড
- Notion Blue
#0075de— কল-টু-অ্যাকশন (CTA) বাটনের মূল উপাদান, সক্রিয় নেভিগেশনের একটি অ্যাকসেন্ট হিসেবে ব্যবহৃত ফিল্ড অ্যাকশন বাটনগুলোই প্রায় একরঙা সিস্টেমের মধ্যে একমাত্র কালার স্কিম যা একটি সুইচ হিসেবে অনুভূত হওয়ার জন্য যথেষ্ট স্যাচুরেটেড।
নিরপেক্ষ
- Paper Warmth
#f6f5f4— পেজ ক্যানভাস, প্রধান উইন্ডোর ব্যাকগ্রাউন্ড এবং সেকশনের ব্যাকগ্রাউন্ড—সবগুলোই উষ্ণ, হালকা বেইজ রঙের, যা সিস্টেমটিকে একটি স্পর্শযোগ্য ও অ্যানালগ অনুভূতি দেয়। - Pure White
#ffffff— কার্ডের পৃষ্ঠতল, উঁচু প্যানেল, লোগোর পটভূমি, গাঢ় রঙের কার্ডে বৈসাদৃশ্যপূর্ণ লেখা। - Ink Black
#000000— মূল লেখা, নেভিগেশন লিঙ্ক, শিরোনাম - নতুন রঙ যোগ না করেই স্তরবিন্যাস তৈরি করতে এগুলি বিভিন্ন স্বচ্ছতার (১০০%, ৯৫%, ৯০%, ৬০%, ৪০%, ২০%) সাথে ব্যবহৃত হয়। - Charcoal
#111111— UI-এর সেইসব অংশের জন্য একটি ডার্ক টেক্সট অপশন, যেখানে নিখুঁত কালো রঙ দেখতে খুব বেশি কড়া মনে হবে। - Stone
#757575— সেকেন্ডারি নেভিগেশন টেক্সট, অনুজ্জ্বল সহায়ক টেক্সট, নিষ্ক্রিয় বাটন লেবেল - ৬০% ইঙ্ক আলফা - Graphite
#615d59— মূল লেখাটির আভা উষ্ণ—বাদামী-ধূসর, যা উষ্ণ পটভূমির সাথে সামঞ্জস্যপূর্ণ।
টাইপোগ্রাফি
১২ থেকে ৯৬ পিক্সেল · ১০টি ধাপ
- NotionInter — প্রতিস্থাপন: Inter · রূপরেখা 400, 500, 600, 700 · প্রধান স্যানস-সেরিফ ফন্টটি হলো সূক্ষ্ম বৈশিষ্ট্যসম্পন্ন একটি জ্যামিতিক হিউম্যানিস্ট ফন্ট, যা মূল লেখার জন্য ৪০০, নেভিগেশন/ইউজার ইন্টারফেসের জন্য ৫০০ এবং শিরোনামের জন্য ৬০০-৭০০ সাইজে ব্যবহৃত হয়। ফন্ট স্কেলটি বড় সাইজগুলোতে জোরালো নেগেটিভ লেটার স্পেসিং ব্যবহার করে (-৯৬ পিক্সেলে ৪.৬ পিক্সেল, -৭২ পিক্সেলে ২ পিক্সেল), যা শিরোনামটিকে হালকা না দেখিয়ে আরও সংহত ও আত্মবিশ্বাসী করে তোলে।
- Lyon Text — প্রতিস্থাপন: Source Serif Pro · রূপরেখা 400 · মূল পাঠ্যের নির্দিষ্ট অংশ এবং অধ্যায়ের ভূমিকার জন্য সংরক্ষিত সম্পাদকীয় সেরিফ ফন্টটি খুব কম পরিমাণে (চারবার) ব্যবহার করা হয়েছে, যা টাইপফেসটিকে একটি ম্যাগাজিনের বিন্যাসে ব্যবহৃত উদ্ধৃতির মতো সাহিত্যিক গুরুত্ব প্রদান করে। এটি একটি সমান্তরাল স্তরবিন্যাসের পরিবর্তে একটি পদ্ধতিগত স্বরচিহ্ন হিসেবে কাজ করে।
ব্যবধান এবং ফর্ম
| উদ্দেশ্য | অর্থ |
|---|---|
| ঘনত্ব | গড় |
| প্রাথমিক পদক্ষেপ | 8px |
| বোতামের ব্যাসার্ধ | 8px |
| কার্ডের ব্যাসার্ধ | 12px |
| ছায়া | না - ছায়ার পরিবর্তে সীমানা |
| বিভাগগুলির মধ্যে | 80px |
| পৃষ্ঠার প্রস্থ | 1440px |
এআই আপনার ওয়েবসাইটটি Notion স্টাইলে তৈরি করবে এবং তাতে তথ্য যোগ করবে।
- Instagram, TikTok, Facebook লিঙ্কের মাধ্যমে পণ্য এবং পোস্ট দিয়ে পূরণ করুন।
- আপনার পুরোনো সাইট থেকে কন্টেন্ট স্থানান্তর করুন—শুধু ঠিকানাটি উল্লেখ করুন।
- সেরা ইঞ্জিন React ( Next.js)-এ তৈরি আধুনিক ডিজাইন, সাথে রয়েছে সার্ভার রেন্ডারিং এবং এসইও অপটিমাইজেশন।
- সার্চ রেজাল্ট এবং নিউরাল নেটওয়ার্ক সুপারিশের জন্য সম্পূর্ণ স্বয়ংক্রিয় এসইও অপ্টিমাইজেশন।
একই রকম শৈলী
- ElevenLabs — উষ্ণ ক্রিম রঙের ছোঁয়ায় তোলা একটি আলোকচিত্র-প্রবন্ধ, সাথে রয়েছে সূক্ষ্ম শিরোনাম। বাউহাউস-শৈলীর একটি নোটবুক—ডিমের খোসার মতো রঙের কাগজ, কালো কালি, এবং পণ্য প্রদর্শনের জন্য একটিমাত্র বেগুনি ও কমলা রঙের অলঙ্করণ।
- Awesomic — সম্পাদকীয় জিঙ্ক মেশ, যাতে কনফেটির কথা মনে করিয়ে দেয় এমন কমলা রঙের যতিচিহ্ন রয়েছে।
- Monad — উষ্ণ পার্চমেন্টে সম্পাদকীয় প্রযুক্তিগত জার্নাল
- Dub — লিঙ্কের ম্যাট রাইস পেপার কন্ট্রোল প্যানেল
- Seline Analytics — উষ্ণ কাগজের উপর একটি শান্ত বিশ্লেষণাত্মক টেবিল
- Anthropic — উষ্ণ ভেলাম কাগজে ছাপা একটি বৈজ্ঞানিক ক্ষেত্র-জার্নাল—শান্ত হাতির দাঁতের মতো পৃষ্ঠতল, সেরীফযুক্ত সম্পাদকীয় শিরোনাম, এবং একটিমাত্র মাটির ছোঁয়া যা কেবল প্রয়োজনের মুহূর্তেই ফুটে ওঠে।
- Calendly — ঠান্ডা মার্বেলের উপর গাঢ় নীল কালি
- Augen Pro — অ্যাপলের সাদা উপস্থাপনাটিতে একরঙা পরিসরে একমাত্র অ্যাকসেন্ট হিসেবে একটি পরিচ্ছন্ন, ওজনহীন, বৈদ্যুতিক নীল রঙ ব্যবহার করা হয়েছে।
- Antimetal — ক্রিম রঙের কাগজে ছাপা একটি সম্পাদকীয় ইতিবৃত্ত—একটি বৈজ্ঞানিক জার্নালের শান্ত সকাল, যেখানে সংযম আত্মবিশ্বাস প্রকাশ করে এবং সেরিফ ফন্টগুলোই মূল ভার বহন করে।
- Perk — গরম পার্চমেন্ট পেপারে বৈদ্যুতিক চুন
- Ditto — সূর্যালোকিত একটি কর্মশালায় বুনো ফুলের নমুনা তৈরি হচ্ছে। উষ্ণ ক্রিম রঙের পৃষ্ঠতল, একটি প্রাণবন্ত হলুদ ভিত্তি রঙ, গাঢ় নেভি ব্লু কালি, এবং শিল্পকর্মটির পেছনে ফুটে ওঠা জৈব রঙের রূপ।
- Officevibe — উষ্ণ ক্রিম রঙের কাগজে ছাপা একটি সম্পাদকীয় পত্রিকা। কল্পনা করুন, মানব সম্পদ ব্যবস্থাপনার উপর একটি চিন্তাশীল প্রবন্ধ, যা একটি পণ্য হিসেবে উপস্থাপিত—একটি আধুনিক নীল ইন্টারফেসের মধ্য দিয়ে ফিসফিস করে কথা বলছে কারসিভ সেরিফ ফন্ট।