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

प्राइमरी

1. मुख्य
2. On-Primary

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

Primary-Dim

1. Primary-Dim
2. On-Primary

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

Primary-Container

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

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

सेकंडरी

1. Secondary
2. On-Secondary

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

सेकंडरी-डिम

1. Secondary-Dim
2. Secondary

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

Secondary-Container

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

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

तीसरा

1. Tertiary
2. On-Tertiary

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

टर्शीयरी-डिम

1. Tertiary-Dim
2. Tertiary

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

टर्शियरी-कंटेनर

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

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

गड़बड़ी

1. कोई गड़बड़ी हुई
2. गड़बड़ी होने पर

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

Error-Dim

1. Error-Dim
2. गड़बड़ी होने पर

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

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 के साथ इस्तेमाल करना है. इस रंग से यूज़र इंटरफ़ेस (यूआई) के अहम हिस्सों पर फ़ोकस करने और उन्हें क्रम से लगाने में मदद मिलती है.