Notion
दिउँसोको घाममा न्यानो कागजको नोटबुक
नोटेशनको इन्टरफेस दिउँसोको समयमा प्रिय कागजको नोटबुक जस्तो देखिन्छ: न्यानो, क्रिमी क्यानभास (#f6f5f4) जुन बाँझको सट्टा स्पर्शयोग्य महसुस हुन्छ, उदार sans-serif टाइपोग्राफीले उत्पादन प्रतिलिपिलाई सम्पादकीय भार दिन्छ, र विरल विराम चिन्हको रूपमा प्रयोग गरिएको रंग - पीच "गोलीहरू" ले क्रियाहरू हाइलाइट गर्दछ, एकल नीलो मुख्य कार्यलाई एङ्कर गर्दछ, र एक्सेन्ट रंगहरूको घुमाउरो एरे (कोरल, एम्बर, आकाश, मध्यरात) ले कार्ड पृष्ठभूमिलाई स्टिकरहरू जस्तै रंग दिन्छ। कार्डहरू पातलो किनारा र कुनाहरू भएको क्यानभासमा व्यवस्थित छन् - कुनै छाया छैन, कुनै क्रोम छैन - मोलेस्काइन नोटबुकको लाइन गरिएका खण्डहरू जस्तै। एनिमेसन चंचल र वसन्त छ, २००ms मा सहज संक्रमण र वसन्त क्यारेक्टर एनिमेसनहरू जसले सजावटी बिना इन्टरफेसमा जीवन ल्याउँछ।
केन्द्रित, अधिकतम चौडाइ लगभग १४४० पिक्सेलमा सीमित छ। मुख्य तत्व केन्द्रित स्ट्याक हो: प्रतीकहरूको पङ्क्ति → एम्बेडेड रंगीन गोली भएको ठूलो दुई-लाइन शीर्षक → उपशीर्षक → दुई कल-टु-एक्शन बटनहरू भएको पङ्क्ति → ठूलो उत्पादन UI मकअप। मुख्य तत्वको तल, सेतो कार्डहरूको ग्रिडहरू र पूर्ण-रङ एक्सेन्ट प्यानलहरू बीच खण्डहरू वैकल्पिक हुन्छन्। लोगो भित्ता ग्रेस्केलमा साझेदार लोगोहरूको केन्द्रित एकल-पङ्क्ति ग्रिड हो। सुविधा ब्लकहरूले दुई-स्तम्भ लेआउट (बायाँमा पाठ, दायाँमा रंगीन प्यानल), खण्डहरू बीच बायाँ देखि दायाँ वैकल्पिक रूपमा प्रयोग गर्दछ। "मागमा आफ्ना सहायकहरूलाई सोध्नुहोस्" खण्डले २x२ कार्ड ग्रिड प्रयोग गर्दछ, जहाँ माथिल्लो कार्डले पूर्ण चौडाइ लिन्छ, र तल्लो पङ्क्ति दुई बराबर स्तम्भहरूमा विभाजित हुन्छ। खण्डहरू बीचका गटरहरू उदार (~८० पिक्सेल) छन्, जसले शान्त ठाडो लय सिर्जना गर्दछ। नेभिगेसन केन्द्रित नेभिगेसन तत्वहरू र दायाँ-पङ्क्तिबद्ध कार्य बटनहरू भएको निश्चित ६४ पिक्सेल अग्लो शीर्ष पट्टी हो।
चित्रहरू अत्यन्तै महत्त्वपूर्ण छन्, कुनै पनि तस्बिरहरू बिना। दृश्य भाषा समतल, चित्रित प्रतीकहरू (२ पिक्सेल रंगीन घेराहरूमा गोलाकार किनारहरू), अमूर्त सजावटी तत्वहरू (हातले कोरिएका स्क्विगलहरू, चमक, तीरहरू, फूल आकारहरू), र उत्पादनको प्रयोगकर्ता इन्टरफेसको नक्कलहरूमा निर्मित छ। प्रतीकहरू मुख्य विन्डोमा सात अवतारहरूको तेर्सो पङ्क्तिको रूपमा देखा पर्दछन् र पृष्ठभरि चंचल विराम चिन्हको रूपमा छरिएका छन्। उत्पादन स्क्रिनशटहरू मात्र "वास्तविक" दृश्य तत्वहरू हुन्: तिनीहरूले वास्तविक धारणा इन्टरफेस (कानबान बोर्डहरू, कागजात दृश्यहरू, एआई एजेन्ट प्यानलहरू) तत्वहरूको पूर्ण सेट र वास्तविक डेटाको साथ देखाउँछन्। मुख्य विन्डोमा उत्पादन नक्कल ठूलो, केन्द्रित छ, र क्यानभासबाट यसलाई अलग गर्ने एकल छायाँ कास्ट गर्दछ। त्यहाँ कुनै जीवनशैली फोटोहरू छैनन्, कुनै स्टक छविहरू छैनन्, कुनै अमूर्त 3D रेन्डरहरू छैनन्।
प्यालेट
ब्रान्ड
- 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 · मुख्य sans-serif फन्ट सूक्ष्म सूक्ष्मताहरू भएको ज्यामितीय मानवतावादी हो, जुन मुख्य पाठको लागि ४००, नेभिगेसन/प्रयोगकर्ता इन्टरफेसको लागि ५००, र शीर्षकहरूको लागि ६००-७०० आकारहरूमा प्रयोग गरिन्छ। फन्ट स्केलले ठूला आकारहरूमा आक्रामक नकारात्मक अक्षर स्पेसिङ प्रयोग गर्दछ (-४.६px ९६px मा, -२px ७२px मा), जसले शीर्षकलाई हावायुक्त भन्दा बढी कम्प्याक्ट र आत्मविश्वासी बनाउँछ।
- Lyon Text — प्रतिस्थापन: Source Serif Pro · रूपरेखाहरू 400 · मुख्य पाठको व्यक्तिगत खण्डहरू र खण्ड परिचयका लागि आरक्षित सम्पादकीय सेरिफ फन्ट, पत्रिका लेआउटमा उद्धरण जस्तै टाइपफेसलाई साहित्यिक वजन दिन कम (चार पटक) प्रयोग गरिन्छ। यसले समानान्तर पदानुक्रमको सट्टा प्रणालीगत उच्चारणको रूपमा काम गर्दछ।
अन्तराल र रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | औसत |
| आधारभूत चरण | 8px |
| बटनको त्रिज्या | 8px |
| कार्डको अर्धव्यास | 12px |
| छायाँहरू | छायाँको सट्टा कुनै - किनारा छैन |
| खण्डहरू बीच | 80px |
| पृष्ठ चौडाइ | 1440px |
एआईले तपाईंको वेबसाइट Notion शैलीमा बनाउनेछ र यसलाई भर्नेछ
- लिङ्क मार्फत उत्पादनहरू र पोस्टहरू भर्नुहोस् - Instagram, TikTok, Facebook ।
- आफ्नो पुरानो साइटबाट सामग्री स्थानान्तरण गर्नुहोस्—केवल ठेगाना निर्दिष्ट गर्नुहोस्।
- उत्कृष्ट इन्जिनमा आधुनिक डिजाइन: सर्भर रेन्डरिङ र SEO अप्टिमाइजेसनको साथ React ( Next.js)।
- खोज परिणाम र तंत्रिका नेटवर्क सिफारिसहरूको लागि पूर्ण स्वचालित SEO अप्टिमाइजेसन।
उस्तै शैलीहरू
- ElevenLabs — सूक्ष्म शीर्षकहरू सहितको न्यानो क्रिम टोनमा फोटो निबन्ध। बौहाउस शैलीको नोटबुक—अण्डाको खोल रंगको कागज, कालो मसी, र उत्पादन प्रदर्शनको लागि एकल बैजनी र सुन्तला रंगको उच्चारण।
- Awesomic — कन्फेटीको सम्झना दिलाउने सुन्तला विराम चिन्हहरू भएको सम्पादकीय जस्ता जाल
- Monad — न्यानो चर्मपत्रमा सम्पादकीय प्राविधिक जर्नल
- Dub — लिङ्कको म्याट राइस पेपर कन्ट्रोल प्यानल
- Seline Analytics — न्यानो कागजमा शान्त विश्लेषणात्मक तालिका
- Anthropic — न्यानो भेल्लममा आधारित वैज्ञानिक क्षेत्र पत्रिका—शान्त हस्तिहाडका सतहहरू, सेरिफ गरिएका सम्पादकीय शीर्षकहरू, र कार्य आवश्यक पर्दा मात्र देखा पर्ने एकल माटोको उच्चारण।
- Calendly — चिसो संगमरमरमा गाढा नीलो मसी
- Augen Pro — एप्पलको सेतो प्रस्तुतीकरणमा मोनोक्रोम स्पेसमा एकमात्र उच्चारणको रूपमा क्लिनिकल, वजनहीन, इलेक्ट्रिक नीलो रंग रहेको छ।
- Antimetal — क्रिम पेपरमा छापिएको सम्पादकीय घटनाक्रम—वैज्ञानिक जर्नलमा एक शान्त बिहान, जहाँ संयमले आत्मविश्वास व्यक्त गर्छ र सेरिफले ठूलो काम गर्छ।
- Perk — तातो चर्मपत्र कागजमा विद्युतीय चुना
- Ditto — जंगली फूलका नमुनाहरू सिर्जना गर्ने घामले उज्यालो भएको कार्यशाला। न्यानो क्रिम सतहहरू, जीवन्त पहेंलो आधार रंग, गाढा नेभी नीलो मसी, टुक्रा पछाडि फूलेको जैविक रंगका रूपहरू।
- Officevibe — न्यानो क्रिम रंगको कागजमा सम्पादकीय पत्रिका। HR व्यवस्थापनमा एउटा विचारशील निबन्धको कल्पना गर्नुहोस्, जुन उत्पादनको रूपमा प्रस्तुत गरिएको छ—आधुनिक नीलो इन्टरफेस मार्फत फुसफुसाउने कर्सिभ सेरिफ फन्ट।