Notion
दोपहर की धूप में गर्म कागज की नोटबुक
नोटियन का इंटरफ़ेस किसी पुरानी, पसंदीदा कागज़ की नोटबुक जैसा दिखता है: एक गर्म, मलाईदार कैनवास (#f6f5f4) जो नीरस होने के बजाय स्पर्शनीय लगता है, भरपूर सैन्स-सेरिफ़ फ़ॉन्ट उत्पाद विवरण को संपादकीय महत्व देते हैं, और रंगों का उपयोग संक्षिप्त विराम चिह्नों की तरह किया गया है—पीच रंग की "गोलियाँ" क्रियाओं को उजागर करती हैं, एक नीला रंग मुख्य क्रिया को दर्शाता है, और कई अलग-अलग रंग (कोरल, एम्बर, स्काई, मिडनाइट) कार्ड के बैकग्राउंड को स्टिकर की तरह रंग देते हैं। कार्ड पतले बॉर्डर और कोनों वाले कैनवास पर व्यवस्थित हैं—कोई छाया नहीं, कोई क्रोम नहीं—जैसे मोल्सकिन नोटबुक के लाइन वाले भाग। एनीमेशन चंचल और जीवंत है, 200 मिलीसेकंड के सहज ट्रांज़िशन और लचीले कैरेक्टर एनिमेशन इंटरफ़ेस को सजावटी हुए बिना जीवंत बनाते हैं।
केंद्र में स्थित, अधिकतम चौड़ाई लगभग 1440px तक सीमित है। मुख्य तत्व एक केंद्र में स्थित स्टैक है: प्रतीकों की एक पंक्ति → एक बड़ा दो-पंक्ति वाला शीर्षक जिसमें एक रंगीन पिल शामिल है → एक उपशीर्षक → दो कॉल-टू-एक्शन बटन वाली एक पंक्ति → एक बड़ा उत्पाद UI मॉकअप। मुख्य तत्व के नीचे, अनुभाग सफेद कार्डों के ग्रिड और पूर्ण-रंगीन एक्सेंट पैनलों के बीच बारी-बारी से व्यवस्थित हैं। लोगो वॉल ग्रेस्केल में साझेदार लोगो का एक केंद्र में स्थित एकल-पंक्ति ग्रिड है। फ़ीचर ब्लॉक दो-स्तंभ लेआउट (बाईं ओर पाठ, दाईं ओर रंगीन पैनल) का उपयोग करते हैं, अनुभागों के बीच बाएं से दाएं बारी-बारी से व्यवस्थित होते हैं। "अपने सहायकों से मांग पर पूछें" अनुभाग 2x2 कार्ड ग्रिड का उपयोग करता है, जहां शीर्ष कार्ड पूरी चौड़ाई लेता है, और निचली पंक्ति को दो बराबर स्तंभों में विभाजित किया गया है। अनुभागों के बीच पर्याप्त गैप (~80px) हैं, जो एक शांत ऊर्ध्वाधर लय बनाते हैं। नेविगेशन एक निश्चित 64px ऊँचा शीर्ष बार है जिसमें केंद्र में स्थित नेविगेशन तत्व और दाईं ओर संरेखित एक्शन बटन हैं।
चित्र सर्वोपरि हैं, कोई फ़ोटो नहीं। दृश्य भाषा सपाट, सचित्र प्रतीकों (2px रंगीन वृत्तों में गोल किनारे), अमूर्त सजावटी तत्वों (हाथ से खींची गई टेढ़ी-मेढ़ी रेखाएँ, ग्लिटर, तीर, फूलों के आकार) और उत्पाद के उपयोगकर्ता इंटरफ़ेस के मॉकअप पर आधारित है। ये प्रतीक मुख्य विंडो में सात अवतारों की एक क्षैतिज पंक्ति के रूप में दिखाई देते हैं और पूरे पृष्ठ पर चंचल विराम चिह्नों के रूप में बिखरे हुए हैं। उत्पाद के स्क्रीनशॉट ही एकमात्र "वास्तविक" दृश्य तत्व हैं: वे वास्तविक नोटियन इंटरफ़ेस (कनबन बोर्ड, दस्तावेज़ दृश्य, एआई एजेंट पैनल) को तत्वों के पूर्ण सेट और वास्तविक डेटा के साथ दिखाते हैं। मुख्य विंडो में उत्पाद मॉकअप बड़ा, केंद्र में स्थित है और कैनवास से अलग करने वाली एक ही छाया डालता है। कोई लाइफस्टाइल फ़ोटो, कोई स्टॉक इमेज या कोई अमूर्त 3डी रेंडर नहीं हैं।
पैलेट
ब्रांड
- Notion Blue
#0075de— कॉल-टू-एक्शन (CTA) बटन को भरने वाला मुख्य तत्व, सक्रिय नेविगेशन में एक एक्सेंट, भरे हुए एक्शन बटन लगभग मोनोक्रोम सिस्टम में एकमात्र रंग योजना है जो एक बदलाव के रूप में माना जाने के लिए पर्याप्त रूप से संतृप्त है।
तटस्थ
- Paper Warmth
#f6f5f4— पेज कैनवास, मुख्य विंडो बैकग्राउंड और सेक्शन बैकग्राउंड सभी गर्म, हल्के बेज रंग के हैं जो सिस्टम को एक स्पर्शनीय, एनालॉग अनुभव प्रदान करते हैं। - Pure White
#ffffff— कार्ड की सतह, उभरे हुए पैनल, लोगो की पृष्ठभूमि, गहरे रंग के कार्ड पर विपरीत रंग का पाठ। - Ink Black
#000000— मुख्य पाठ, नेविगेशन लिंक, शीर्षक - नए रंग जोड़े बिना पदानुक्रम बनाने के लिए विभिन्न पारदर्शिता (100%, 95%, 90%, 60%, 40%, 20%) के साथ उपयोग किए गए। - Charcoal
#111111— उन यूआई क्षेत्रों के लिए एक डार्क टेक्स्ट विकल्प जहां शुद्ध काला रंग बहुत तीखा लगेगा। - Stone
#757575— द्वितीयक नेविगेशन टेक्स्ट, म्यूटेड हेल्पर टेक्स्ट, अक्षम बटन लेबल - 60% इंक अल्फा - Graphite
#615d59— मुख्य पाठ का रंग भूरा-धूसर है, जो गर्म पृष्ठभूमि के साथ सामंजस्य बिठाता है।
टाइपोग्राफी
12 से 96px तक · 10 चरण
- NotionInter — प्रतिस्थापन: Inter · रूपरेखा 400, 500, 600, 700 · मुख्य सेन्स-सेरिफ़ फ़ॉन्ट एक ज्यामितीय मानवतावादी फ़ॉन्ट है जिसमें सूक्ष्म बारीकियां हैं। इसका उपयोग बॉडी टेक्स्ट के लिए 400 पिक्सल, नेविगेशन/यूज़र इंटरफ़ेस के लिए 500 पिक्सल और हेडिंग के लिए 600-700 पिक्सल साइज़ में किया जाता है। बड़े साइज़ में फ़ॉन्ट स्केल में आक्रामक नेगेटिव लेटर स्पेसिंग का उपयोग किया गया है (96 पिक्सल पर -4.6 पिक्सल, 72 पिक्सल पर -2 पिक्सल), जिससे हेडिंग हवादार होने के बजाय अधिक सघन और आत्मविश्वासपूर्ण प्रतीत होती है।
- 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 — हल्के क्रीम रंग के कागज पर छपी एक संपादकीय पत्रिका। कल्पना कीजिए मानव संसाधन प्रबंधन पर लिखे एक विचारोत्तेजक निबंध की, जिसे एक उत्पाद के रूप में प्रस्तुत किया गया है—एक आधुनिक नीले इंटरफ़ेस पर घुमावदार सेरिफ़ फ़ॉन्ट में छपे शब्द।