Notion
दुपारच्या उन्हात एक गरम कागदी वही
नोशनचा इंटरफेस दिवसाढवळ्या एखाद्या आवडत्या कागदी वहीसारखा दिसतो: एक उबदार, क्रीम रंगाचा कॅनव्हास (#f6f5f4) जो निर्जीव वाटण्याऐवजी स्पर्शानुभव देतो, उत्पादनाच्या मजकुराला संपादकीय वजन देणारी भरगच्च सॅन्स-सेरिफ टायपोग्राफी, आणि रंगांचा वापर विरळ विरामचिन्हांसारखा केला आहे—पीच रंगाच्या "गोळ्या" क्रियापदांना अधोरेखित करतात, एकच निळा रंग मुख्य क्रियेला आधार देतो, आणि कार्डच्या पार्श्वभूमीला स्टिकर्सप्रमाणे रंग देण्यासाठी विविध आकर्षक रंगछटा (कोरल, अंबर, स्काय, मिडनाईट) वापरल्या आहेत. कार्ड्स पातळ कडा आणि कोपरे असलेल्या कॅनव्हासवर मांडलेली आहेत—त्यात सावल्या नाहीत, क्रोम नाही—जणू काही मोल्सकिन वहीचे रेषांकित भाग. अॅनिमेशन खेळकर आणि उत्साही आहे, ज्यात २०० मिलीसेकंदांचे सहज संक्रमण आणि उत्साही कॅरेक्टर अॅनिमेशन आहेत, जे केवळ सजावटीपुरते न राहता इंटरफेसमध्ये जिवंतपणा आणतात.
मध्यभागी असल्याने, कमाल रुंदी अंदाजे १४४०px पर्यंत मर्यादित आहे. मुख्य घटक हा मध्यभागी असलेला एक स्टॅक आहे: चिन्हांची एक ओळ → आतमध्ये रंगीत पिल असलेले दोन ओळींचे मोठे शीर्षक → एक उपशीर्षक → दोन कॉल-टू-ॲक्शन बटणांची एक ओळ → एक मोठा उत्पादन UI मॉकअप. मुख्य घटकाच्या खाली, विभाग पांढऱ्या कार्डांच्या ग्रिड आणि पूर्ण-रंगीत ॲक्सेंट पॅनेलमध्ये एकाआड एक येतात. लोगो वॉल ही ग्रेस्केलमध्ये भागीदारांच्या लोगोची मध्यभागी असलेली एक-ओळीची ग्रिड आहे. फीचर ब्लॉक्स दोन-स्तंभीय मांडणी वापरतात (डावीकडे मजकूर, उजवीकडे रंगीत पॅनेल), जे विभागांमध्ये डावीकडून उजवीकडे एकाआड एक येतात. "मागणीनुसार तुमच्या सहाय्यकांना विचारा" हा विभाग २x२ कार्ड ग्रिड वापरतो, जिथे वरचे कार्ड पूर्ण रुंदी व्यापते आणि खालची ओळ दोन समान स्तंभांमध्ये विभागलेली आहे. विभागांमधील गटर (गटर) मोठे (~८०px) आहेत, ज्यामुळे एक शांत उभी लय तयार होते. नेव्हिगेशन ही एक निश्चित ६४px उंच टॉप बार आहे, ज्यात मध्यभागी नेव्हिगेशन घटक आणि उजवीकडे संरेखित ॲक्शन बटणे आहेत.
चित्रांना सर्वाधिक महत्त्व दिले आहे, फोटो नाहीत. व्हिज्युअल लँग्वेज सपाट, सचित्र चिन्हांवर (२ पिक्सेलच्या रंगीत वर्तुळांमधील गोलाकार कडा), अमूर्त सजावटीच्या घटकांवर (हाताने काढलेल्या नागमोडी रेषा, ग्लिटर, बाण, फुलांचे आकार) आणि उत्पादनाच्या युझर इंटरफेसच्या मॉकअपवर आधारित आहे. ही चिन्हे मुख्य विंडोमध्ये सात अवतारांच्या आडव्या ओळीच्या रूपात दिसतात आणि पानावर खेळकर विरामचिन्हांप्रमाणे विखुरलेली आहेत. उत्पादनाचे स्क्रीनशॉट्स हे एकमेव "वास्तविक" व्हिज्युअल घटक आहेत: ते घटकांच्या संपूर्ण संचासह आणि वास्तविक डेटासह प्रत्यक्ष Notion इंटरफेस (कानबान बोर्ड, डॉक्युमेंट व्ह्यूज, एआय एजंट पॅनेल) दर्शवतात. मुख्य विंडोमधील उत्पादनाचा मॉकअप मोठा, मध्यभागी आहे आणि कॅनव्हासपासून त्याला वेगळे करणारी एकच सावली टाकतो. यात कोणतेही लाइफस्टाइल फोटो, स्टॉक इमेजेस किंवा अमूर्त ३डी रेंडर्स नाहीत.
पॅलेट
ब्रँड
- Notion Blue
#0075de— सक्रिय नॅव्हिगेशनमधील एक महत्त्वाचा घटक असलेल्या कॉल-टू-ॲक्शन (CTA) बटणामध्ये भरलेला मुख्य घटक, ही जवळजवळ मोनोक्रोम प्रणालीमधील एकमेव रंगसंगती आहे जी स्विच म्हणून ओळखली जाण्याइतकी पुरेशी गडद आहे.
तटस्थ
- Paper Warmth
#f6f5f4— पेज कॅनव्हास, मुख्य विंडोची पार्श्वभूमी आणि विभागाची पार्श्वभूमी हे सर्व उबदार, किंचित बेज रंगांचे आहेत, जे सिस्टमला एक स्पर्शनीय, अॅनालॉग अनुभव देतात. - Pure White
#ffffff— कार्डचा पृष्ठभाग, उठावदार पॅनेल, लोगोची पार्श्वभूमी, गडद कार्डांवर विरोधाभासी मजकूर. - Ink Black
#000000— मुख्य मजकूर, नेव्हिगेशन लिंक्स, शीर्षके - नवीन रंग न जोडता पदानुक्रम तयार करण्यासाठी वेगवेगळ्या पारदर्शकतेसह (100%, 95%, 90%, 60%, 40%, 20%) वापरले आहेत. - Charcoal
#111111— UI च्या ज्या भागांमध्ये पूर्ण काळा रंग खूपच तीव्र दिसेल, त्यांच्यासाठी गडद मजकुराचा पर्याय. - Stone
#757575— दुय्यम नॅव्हिगेशन मजकूर, म्यूट केलेला मदतनीस मजकूर, निष्क्रिय बटण लेबल्स - ६०% इंक अल्फा - Graphite
#615d59— मुख्य मजकुराचा टोन उबदार आहे - तपकिरी-राखाडी, जो उबदार पार्श्वभूमीशी सुसंगत आहे.
टायपोग्राफी
१२ ते ९६ पिक्सेल · १० पायऱ्या
- NotionInter — बदली: Inter · रूपरेषा 400, 500, 600, 700 · मुख्य सॅन्स-सेरिफ फॉन्ट हा सूक्ष्म छटा असलेला एक भौमितिक मानवतावादी फॉन्ट आहे, जो मुख्य मजकुरासाठी ४००, नेव्हिगेशन/युझर इंटरफेससाठी ५०० आणि शीर्षकांसाठी ६००-७०० या आकारांमध्ये वापरला जातो. फॉन्ट स्केलमध्ये मोठ्या आकारांवर आक्रमक निगेटिव्ह लेटर स्पेसिंगचा वापर केला आहे (-९६px वर -४.६px, -७२px वर -२px), ज्यामुळे शीर्षक मोकळे वाटण्याऐवजी अधिक संक्षिप्त आणि आत्मविश्वासपूर्ण वाटते.
- 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 — उबदार क्रीम रंगाच्या कागदावरील एक संपादकीय मासिक. एचआर व्यवस्थापनावरील एका विचारप्रवर्तक निबंधाची कल्पना करा, जो एका उत्पादनाच्या रूपात सादर केला आहे—आधुनिक निळ्या इंटरफेसमधून हळूवारपणे येणारा एक वळणदार सेरिफ फॉन्ट.