डिज़ाइन सिस्टम

Scoutello का अनुभव गर्मजोशी भरा, सक्षम और प्रोडक्ट-केंद्रित होना चाहिए। पसंदीदा रूप हल्का, खुला, गोलाकार और संपादकीय है: पहले स्पष्ट सामग्री, फिर सूक्ष्म ब्रांड रंग, मुलायम सतहें और शांत गति, जो प्रोडक्ट को सजावटी शोर पैदा किए बिना प्रतिक्रियाशील महसूस कराए।

वर्तमान दृश्य दिशा के लिए मार्केटिंग लैंडिंग पेज सबसे स्पष्ट सार्वजनिक संदर्भ है। जहाँ संभव हो, प्रोडक्ट सतहों में साझा डिज़ाइन टोकन का पुन: उपयोग करें। सतह को तभी अधिक अभिव्यंजक बनाएं, जब वह स्पष्ट रूप से ब्रांड या मार्केटिंग-केंद्रित हो।

लोगो और ब्रांड एसेट

जब किसी एजेंट, इंटीग्रेशन या जनरेट किए गए पेज को दोबारा उपयोग किए जा सकने वाले ब्रांड चिह्न की आवश्यकता हो, तब सार्वजनिक दस्तावेज़ एसेट URL से Scoutello लोगो का उपयोग करें:

• SVG लोगो: https://docs.scoutello.com/img/scoutello-logo.svg
• PNG लोगो: https://docs.scoutello.com/img/scoutello-logo.png

स्क्रीन के अलग-अलग आकारों पर स्पष्ट रेंडरिंग के लिए SVG संस्करण को प्राथमिकता दें। जब कोई टूल या गंतव्य SVG को संभाल न सके, तब PNG संस्करण का उपयोग करें। चिह्न के चारों ओर पर्याप्त खाली जगह रखें, उसे खींचकर बड़ा-छोटा या उसका रंग न बदलें, और उसे सफेद, गर्म क्रीम या ऐसी शांत सतहों पर रखें जो पर्याप्त कॉन्ट्रास्ट बनाए रखें।

ब्रांड रंग

प्राथमिक रंग: #ff8d49

प्राथमिक ऑरेंज का उपयोग Scoutello के एक्सेंट रंग के रूप में करें: प्राथमिक कॉल-टू-एक्शन, फ़ोकस स्थिति, सक्रिय नेविगेशन, छोटे आइकन बैकग्राउंड, हाइलाइट टेक्स्ट, हल्की ग्लो और गर्म ग्रेडिएंट के लिए। प्रोडक्ट कोड में यह --primary: 24 100% 64% और bg-primary, text-primary, border-primary/15 और shadow-primary/10 जैसी Tailwind क्लास से मैप होता है।

द्वितीयक रंग: #145466

द्वितीयक गहरे टील का उपयोग आधार देने वाले रंग के रूप में करें। यह प्राथमिक ऑरेंज के साथ ग्रेडिएंट, गहरे कॉल-टू-एक्शन पैनल, दृश्य गहराई और कभी-कभार के उच्च-प्रमुखता वाले ब्रांड क्षणों में सबसे अच्छा काम करता है। इसे डिफ़ॉल्ट एक्शन रंग के रूप में प्राथमिक ऑरेंज की जगह उपयोग न करें।

सहायक रंग:

• गर्म क्रीम बैकग्राउंड: #fff8f1, #fff4ea, #fcf6f1 और हल्की orange-50 / amber-50 सतहें।
• प्रोडक्ट न्यूट्रल: सफेद कार्ड, गहरे फ़ोरग्राउंड टेक्स्ट, लगभग 70–75% अपारदर्शिता वाला म्यूटेड टेक्स्ट और हल्के बॉर्डर।
• तृतीयक नीला: hsl(205 100% 51%) एक सहायक टोकन के रूप में उपलब्ध है, लेकिन इसका उपयोग सीमित रखें ताकि ऑरेंज और टील ब्रांड की पहचान योग्य जोड़ी बने रहें।

दृश्य शैली

पर्याप्त गर्मजोशी वाला स्वच्छ, प्रीमियम SaaS रूप अपनाएं, ताकि अनुभव सामान्य न लगे। लैंडिंग पेज में क्रीम मेश बैकग्राउंड, सफेद कार्ड, बड़े प्रोडक्ट स्क्रीनशॉट, गोलाकार कोने और संयमित ग्रेडिएंट का संयोजन है।

उपयोग करें:

• गोलाकार कार्ड और पैनल, प्रायः rounded-2xl से rounded-[2rem] तक।
• border-primary/10, border-primary/15, ring-black/5 जैसे मुलायम बॉर्डर और हल्के न्यूट्रल बॉर्डर।
• भारी रंगीन ब्लॉक के बजाय परतदार सफेद या क्रीम सतहें।
• shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 जैसी सूक्ष्म शैडो या कम अपारदर्शिता वाली कस्टम शैडो।
• बड़े प्रोडक्ट स्क्रीनशॉट या UI मॉकअप को प्रमाण के रूप में, खासकर मार्केटिंग और फ़ीचर स्टोरीटेलिंग में।
• छोटे ब्रांड क्षण, जैसे ऑरेंज हाइलाइट टेक्स्ट, आइकन चिप, रिंग, ग्लो और ग्रेडिएंट CTA।

बचें:

• पूरे पेज पर तेज़ ऑरेंज बैकग्राउंड।
• सामान्य कंट्रोल के लिए टील का अत्यधिक उपयोग।
• घने और तंग लेआउट।
• कठोर शैडो, नुकीले आयत या ठंडे मोनोक्रोम डैशबोर्ड।
• ऐसी सजावटी गति, जो पढ़ने या कार्य पूरा करने में बाधा बने।

टाइपोग्राफी

मार्केटिंग साइट पर उपयोग होता है:

• landing-display क्लास के माध्यम से डिस्प्ले हेडलाइन के लिए Space Grotesk।
• मार्केटिंग बॉडी टेक्स्ट के लिए Manrope।

साझा ऐप और दस्तावेज़ सतहों पर सिस्टम-अनुकूल UI टाइपोग्राफी का उपयोग होता है, जो वर्तमान में Inter के अधिक निकट है। सभी सतहों पर शैलीगत लक्ष्य एक समान है: आत्मविश्वासपूर्ण हेडिंग, हेडलाइन में सघन लेटर स्पेसिंग, पढ़ने योग्य बॉडी कॉपी और पर्याप्त लाइन हाइट।

हेडलाइन संबंधी दिशा-निर्देश:

• मार्केटिंग पेज पर बड़ी, संतुलित हेडिंग का उपयोग करें।
• केवल महत्वपूर्ण वाक्यांश को प्राथमिक ऑरेंज से हाइलाइट करें।
• जहाँ उपलब्ध हो, max-w-* और text-balance के माध्यम से लाइन की लंबाई नियंत्रित रखें।

बॉडी कॉपी संबंधी दिशा-निर्देश:

• पैराग्राफ़ को शांत और सीधे रखें।
• विवरण के लिए म्यूटेड फ़ोरग्राउंड टेक्स्ट का उपयोग करें, आमतौर पर text-foreground/70 या text-foreground/75।
• ऐसे सेक्शन, छोटे पैराग्राफ़ और स्पष्ट लेबल को प्राथमिकता दें जिन्हें आसानी से स्कैन किया जा सके।

लेआउट और स्पेसिंग

लेआउट खुले और स्थिर महसूस होने चाहिए। लैंडिंग पेज में प्रतिक्रियाशील क्षैतिज पैडिंग और बड़े वर्टिकल सेक्शन के साथ max-w-7xl कंटेनर का उपयोग किया गया है।

सामान्य पैटर्न:

• पैडिंग सेक्शन लगभग py-16, py-20 या प्रमुख मार्केटिंग सेक्शन के लिए इससे अधिक।
• एकसमान गैप वाले प्रतिक्रियाशील ग्रिड में व्यवस्थित कार्ड।
• मजबूत बाएं कंटेंट कॉलम और दाईं ओर प्रोडक्ट स्क्रीनशॉट या डिवाइस संयोजन वाले हीरो सेक्शन।
• व्यापक प्रोडक्ट वादों के लिए केंद्रित सेक्शन हेडर; कहानी या वर्कफ़्लो सेक्शन के लिए बाएं-संरेखित हेडर।
• मोबाइल-फ़र्स्ट लेआउट, जो बड़े स्क्रीन पर बहु-कॉलम बनने से पहले साफ़ तौर पर स्टैक हो जाएं।

व्हाइटस्पेस को डिज़ाइन का हिस्सा मानें। यदि कोई सेक्शन अस्पष्ट लगे, तो अधिक सजावट जोड़ने से पहले सामग्री को सरल करें और खाली जगह बढ़ाएं।

कंपोनेंट और सतहें

Scoutello की सतहें स्पर्शनीय, लेकिन हल्की महसूस होनी चाहिए:

• बटन: प्रमुख मार्केटिंग CTA के लिए गोलाकार पिल; अन्य जगहों पर मानक प्रोडक्ट बटन।
• कार्ड: सफेद या क्रीम, गोलाकार, बॉर्डर वाले और हल्के उभरे हुए।
• आइकन: ऑरेंज-टिंटेड चिप में छोटे, सरल लाइन आइकन।
• आँकड़े और भरोसे के तत्व: ऑरेंज-टिंटेड बॉर्डर या ग्रेडिएंट वाले संयमित कार्ड।
• फ़ॉर्म: स्पष्ट लेबल, सीधे हेल्पर टेक्स्ट और मोबाइल उपयोग के लिए पर्याप्त स्पेसिंग।
• स्क्रीनशॉट: बड़े, स्पष्ट और हल्के उभरे हुए। इन्हें प्रोडक्ट के ठोस प्रमाण के रूप में उपयोग करें।

प्रोडक्ट UI बनाते समय कस्टम, एक-बार इस्तेमाल होने वाली स्टाइलिंग के बजाय मौजूदा साझा UI कंपोनेंट्स और टोकन से शुरुआत करें। मार्केटिंग UI बनाते समय, जहाँ उपयुक्त हो वहाँ लैंडिंग प्रिमिटिव्स और लैंडिंग क्लासेस का उपयोग करें।

मोशन

मोशन से इंटरफ़ेस व्यवस्थित और परिष्कृत महसूस होना चाहिए, व्यस्त नहीं। लैंडिंग पेज में छोटे रिवील ऐनिमेशन, डिवाइस के ऊपर उठने वाले इफ़ेक्ट, ग्लो ब्लूम इफ़ेक्ट और हॉवर पर हल्का ऊपर उठने वाला प्रभाव इस्तेमाल किया गया है।

पसंदीदा मोशन:

• 12–24px ऊपर से हल्की अपारदर्शिता के साथ रिवील करें।
• हॉवर पर कार्ड को केवल कुछ पिक्सेल ऊपर उठाएँ।
• CTA के हॉवर स्टेट में उसे थोड़ा ऊपर उठाएँ और शैडो को गहरा करें।
• जहाँ इससे सामग्री को क्रम से समझने में मदद मिले, वहाँ सेक्शन को क्रमिक रूप से दिखाएँ।

हमेशा कम मोशन वाली प्राथमिकताओं का सम्मान करें। ऐसे ऐनिमेशन से बचें जो सामग्री छिपा सकते हों, इंटरैक्शन रोक सकते हों या पेज को समझने के लिए आवश्यक लगें।

वॉइस और कंटेंट डिज़ाइन

विज़ुअल सिस्टम सीधे और ठोस कॉपी के साथ सबसे बेहतर काम करता है। ऐसी भाषा को प्राथमिकता दें जो स्पष्ट करे कि कोई संगठन Scoutello में क्या प्रकाशित, प्रबंधित या ऑटोमेट कर सकता है।

उपयोग करें:

• प्रोडक्ट-विशिष्ट संज्ञाएँ: लैंडिंग पेज, टाइल्स, टूर, इवेंट, संगठन, डैशबोर्ड, अतिथि, QR कोड, अनुवाद।
• परिणाम-केंद्रित विवरण, जो अतिथि अनुभवों को ऑपरेटर के वर्कफ़्लो से जोड़ें।
• जर्मन और अन्य स्थानीयकृत कॉपी में जेंडर-न्यूट्रल भाषा।

इनसे बचें:

• बिना उदाहरण वाली अस्पष्ट प्लेटफ़ॉर्म भाषा।
• अत्यधिक औपचारिक एंटरप्राइज़ जार्गन।
• ऐसे लंबे पैराग्राफ़, जिनकी जगह स्कैन करने योग्य सेक्शन बेहतर काम करे।

व्यावहारिक नियम

• मुख्य ब्रांड एक्सेंट के रूप में #ff8d49 और द्वितीयक आधार रंग के रूप में #145466 का उपयोग करें।
• प्रोडक्ट सरफेस पर हार्ड-कोड किए गए रंगों के बजाय टोकनाइज़्ड क्लासेस (primary, secondary, foreground, muted, border) को प्राथमिकता दें।
• मार्केटिंग पेज को गर्मजोशी भरा, खुला, गोलाकार, स्क्रीनशॉट-केंद्रित और हल्के ऐनिमेशन वाला रखें।
• डैशबोर्ड और ऑपरेशनल सरफेस को अधिक शांत और केवल आवश्यकता होने पर सघन रखें, तथा कार्यों पर अधिक केंद्रित रखें।
• जहाँ प्रोडक्ट ब्रांडिंग नियंत्रण उपलब्ध कराता है, वहाँ ग्राहक-स्वामित्व वाले अतिथि अनुभवों को संगठन की ब्रांडिंग के अनुरूप बनाएँ; लेकिन Scoutello-स्वामित्व वाले सरफेस को इसी सिस्टम के अनुरूप रखें।

संबंधित अवधारणाएँ: रूट्स और सरफेस, लैंडिंग पेज और टाइल्स, ब्राउज़र-प्रथम अतिथि अनुभव।