भूमिकाओं और टोकन को रंग देना

मुख्य

1. प्राइमरी
2. On-Primary

यूज़र इंटरफ़ेस (यूआई) में सबसे ज़रूरी कार्रवाइयों के लिए, प्राइमरी भूमिका का इस्तेमाल करें. जैसे, प्राइमरी बटन या कॉल-टू-ऐक्शन. यह रंग अलग दिखना चाहिए, ताकि उपयोगकर्ता को मुख्य इंटरैक्शन के बारे में तुरंत पता चल सके.

Primary-Dim

1. Primary-Dim
2. On-Primary

डिम रोल का इस्तेमाल आम तौर पर उन एलिमेंट के लिए किया जाता है जिन्हें मुख्य कार्रवाई से अलग दिखाना होता है. हालांकि, इन पर उपयोगकर्ता का तुरंत ध्यान जाना या उनसे इंटरैक्ट करना ज़रूरी नहीं होता.

Primary-Container

1. Primary-Container
2. On-Primary-Container

कार्ड या मॉडल जैसे बैकग्राउंड एलिमेंट के लिए प्राइमरी कंटेनर लागू करें, ताकि सेक्शन या चुनी गई स्थितियों को हाइलाइट किया जा सके. इससे यूज़र इंटरफ़ेस (यूआई) में मौजूद अहम कॉन्टेंट या मौजूदा गतिविधियों पर ध्यान खींचने में मदद मिलती है.

सेकंडरी

1. सेकंडरी
2. ऑन-सेकंडरी

डेंस यूज़र इंटरफ़ेस (यूआई) वाले इलाकों में कार्रवाइयों को सपोर्ट करने के लिए, सेकंडरी भूमिका का इस्तेमाल करें. जैसे, सेकंडरी बटन या पूरक कार्रवाइयां. यह जटिल लेआउट में मुख्य एलिमेंट को छिपाए बिना, उन्हें दिखाता है.

Secondary-Dim

1. Secondary-Dim
2. सेकंडरी

सेकंडरी-डिम भूमिका, ज़्यादा घनत्व वाले क्षेत्रों में पैसिव एलिमेंट के लिए म्यूट किया गया कंट्रास्ट उपलब्ध कराती है. यह सेकंडरी कलर के साथ मिलकर काम करता है. साथ ही, इसमें हल्का सा डेप्थ जोड़ता है. इससे यूज़र इंटरफ़ेस (यूआई) साफ़ रहता है और लोगों को नेविगेट करने में मदद मिलती है.

Secondary-Container

1. Secondary-Container
2. On-Secondary-Container

डेंस लेआउट में सेकंडरी एलिमेंट को व्यवस्थित करने के लिए, Secondary-Container का इस्तेमाल करें. इससे स्ट्रक्चर और सेपरेशन बनता है. इससे यह पक्का होता है कि सेकंडरी कॉन्टेंट को अलग से पहचाना जा सके, लेकिन वह मुख्य कॉन्टेंट से ज़्यादा अहम न हो.

तीसरा

1. टर्शरी
2. On-Tertiary

टर्शरी भूमिका का इस्तेमाल, मुख्य एलिमेंट पर ध्यान खींचने के लिए किया जाता है. टर्शरी रोल, उन कॉम्पोनेंट के लिए खास तौर पर असरदार होते हैं जिन्हें अलग से दिखाना होता है. जैसे, बैज, स्टिकर या खास ऐक्शन वाले एलिमेंट.

Tertiary-Dim

1. Tertiary-Dim
2. टर्शरी

बटन या कार्रवाइयों के लिए, टर्शरी डिम रोल का इस्तेमाल करें. ये कार्रवाइयां टर्शरी कार्रवाइयों से जुड़ी होती हैं, लेकिन इन पर तुरंत फ़ोकस करने की ज़रूरत नहीं होती.

Tertiary-Container

1. Tertiary-Container
2. On-Tertiary-Container

ऐसे बैकग्राउंड के लिए Tertiary-Container का इस्तेमाल करें जो तीसरे पक्ष से जुड़े कॉन्टेंट को ग्रुप करते हैं. जैसे, बैज या स्टिकर के कलेक्शन. यह यूज़र इंटरफ़ेस (यूआई) में संतुलन और स्ट्रक्चर बनाए रखते हुए, तीसरे लेवल के एलिमेंट पर ज़ोर देता है.

गड़बड़ी

1. कोई गड़बड़ी हुई
2. On-Error

यह लाल रंग का ऐसा शेड है जो थीम के हिसाब से थोड़ा अलग है. इसका इस्तेमाल, हटाने, मिटाने, बंद करने या खारिज करने जैसी कार्रवाइयों के लिए किया जाता है. जैसे, स्वाइप करके दिखाना. इसे कंटेनर के विकल्प के तौर पर जोड़ा गया है. यह, गड़बड़ी वाले डाइमेंशन के रंग की तुलना में थोड़ा कम गंभीर और ज़रूरी है.

Error-Dim

1. Error-Dim
2. On-Error

यह सिमैंटिक है, लेकिन इसमें थीम के हिसाब से लाल रंग का हल्का शेड है. इससे ज़्यादा प्राथमिकता वाली गड़बड़ियों या आपातकालीन कार्रवाइयों के बारे में पता चलता है. जैसे, सुरक्षा से जुड़ी सूचनाएं, डायलॉग ओवरले काम नहीं कर रहे हैं या स्टॉप बटन काम नहीं कर रहे हैं.

Error-Container

1. Error-Container
2. On-Error-Container

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

Surface-Container-Low

1. Surface-Container-Low
2. ऑन-सरफ़ेस
3. On-Surface-Variant

यह ऐसे बड़े कंटेनर के लिए सबसे सही है जिसे Surface-Container के नीचे रखना है. जैसे, सूचना में बड़ा किया गया कार्ड. इसका इस्तेमाल ऐसे नॉन-इंटरैक्टिव कार्ड के लिए भी किया जा सकता है जिनमें कॉन्टेंट को कंटेनमेंट से फ़ायदा मिलता है.

Surface-Container

1. Surface-Container
2. ऑन-सरफ़ेस
3. On-Surface-Variant

ज़्यादातर एलिमेंट के लिए, कंटेनर का डिफ़ॉल्ट रंग. यह सामान्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के लिए सही है. इसमें न तो ज़्यादा और न ही कम एलिवेशन होता है.

Surface-Container-High

1. Surface-Container-High
2. ऑन-सरफ़ेस
3. On-Surface-Variant

यह ऐसे कॉम्पोनेंट के लिए सबसे सही है जिन पर ज़्यादा ज़ोर देना है और जिन्हें Surface-Container के ऊपर या उसके साथ इस्तेमाल करना है. इस रंग से, यूज़र इंटरफ़ेस (यूआई) के मुख्य हिस्सों पर फ़ोकस करने और उन्हें क्रम से लगाने में मदद मिलती है.