मुख्य कंटेंट तक स्किप करें

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

विवरण: स्काउटेलो ब्रांड रंग, विज़ुअल दिशा, टाइपोग्राफी, लेआउट और इंटरैक्शन मार्गदर्शन।

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

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

लोगो और ब्रांड संपत्तियां​

जब किसी एजेंट, एकीकरण, या उत्पन्न पृष्ठ को पुन: प्रयोज्य ब्रांड चिह्न की आवश्यकता हो, तो सार्वजनिक डॉक्स संपत्ति यूआरएल से स्काउटेलो लोगो का उपयोग करें:

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

ब्रांड रंग​

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

स्काउटेलो एक्सेंट रंग के लिए प्राथमिक नारंगी का उपयोग करें: प्राथमिक कॉल टू एक्शन, केंद्रित स्थितियां, सक्रिय नेविगेशन, छोटे आइकन पृष्ठभूमि, हाइलाइट टेक्स्ट, नरम चमक, और गर्म ग्रेडिएंट। उत्पाद कोड में यह --primary: 24 100% 64% और bg-primary, text-primary, border-primary/15, और shadow-primary/10 जैसे टेलविंड वर्गों से मेल खाता है।

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

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

सहायक रंग:

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

विज़ुअल शैली​

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

उपयोग करें:

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

बचें:

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

टाइपोग्राफी​

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

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

साझा ऐप और डॉक्स सतहें सिस्टम-संरेखित यूआई टाइपोग्राफी का उपयोग करती हैं, जो वर्तमान में इंटर के करीब है। शैली लक्ष्य सतहों पर सुसंगत है: आत्मविश्वासी हेडिंग, तंग हेडलाइन ट्रैकिंग, पठनीय बॉडी कॉपी, और उदार लाइन ऊंचाई।

हेडलाइन मार्गदर्शन:

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

बॉडी कॉपी मार्गदर्शन:

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

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

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

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

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

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

घटक और सतहें​

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

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

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

गति​

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

पसंदीदा गति:

  • नरम अपारदर्शिता के साथ 12-24px से ऊपर प्रकट करें।
  • केवल कुछ पिक्सेल से कार्ड को होवर करें।
  • सीटीए होवर स्थितियां जो थोड़ी सी उठती हैं और छाया को गहरा करती हैं।
  • जब वे कथा स्कैनिंग का समर्थन करते हैं तो स्टैगर्ड सेक्शन प्रवेश।

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

आवाज और सामग्री डिजाइन​

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

उपयोग करें:

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

बचें:

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

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

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

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