रंग तंत्र और ब्रांडेड पट्टियाँ

1) रंग क्यों औपचारिक करें

• ब्रांड जागरूकता और दृश्य स्थिरता,
• तत्परता और उपलब्धता (WCAG),
• स्केलिंग इंटरफेस (थीम, प्लेटफार्म, स्थान),
• अनुमानित ए/बी प्रयोग (इसके विपरीत, सीटीआर, त्रुटियां)।

2) सिस्टम नींव: मॉडल और मैट्रिक्स

OKLCH (अनुशंसित): अवधारणात्मक रूप से वर्दी, छाया 'H' को बनाए रखते हुए 'L' and संतृप्ति 'C' को नियंत्रित करना सुविधाजनक है।

लैब/एलसीएच: भी फिट; OKLCH धारणा में अधिक स्थिर है।

sRGB: परिमित प्रदर्शन स्थान; योग हमेशा sRGB और WCAG में मान्य होते हैं।

कंट्रास्ट (WCAG 2। 2): आधार पाठ ≥ 4। 5:1, बड़ा ≥ 3:1; महत्वपूर्ण सूचनाएं - एएए (7:1) के लिए जहां संभव हो।

3) सिस्टम की परतें: ब्रांड से शब्दार्थ तक

1. ब्रांड कोर: 1-2 ब्रांडेड शेड्स (+ सपोर्टिंग एक्सेंट)।

2. इंटरफ़ेस शब्दार्थ: भूमिकाएँ ('प्राथमिक', 'माध्यमिक', 'सफलता', 'चेतावनी', 'खतरा', 'जानकारी', 'तटस्थ')।

3. टोन तराजू: हल्का कदम (जैसे। 25/50/100...900).

4. Темы: 'लाइट '/' डार्क' (+ हाई-कंट्रास्ट, AMOLED)।

5. स्थितियाँ: 'डिफ़ॉल्ट/होवर/सक्रिय/फ़ोकस/अक्षम'.

6. संदर्भ: सतहें ('बीजी/बेस', 'बीजी/सूक्ष्म', 'बीजी/एलिवेटेड') और पाठ ('एफजी/प्राइमरी', 'एफजी/सेकेंडरी', 'एफजी/म्यूटेड')।

7. डेटा दृश्य: अलग असतत और निरंतर पैलेट।

4) ब्रांड कोर: विकल्प और प्रतिबंध

ह्यू चुनें और हल्के और अंधेरे विषयों में ब्रांड के लिए कार्यशीलता को परिभाषित करें (अक्सर '। 60–0. 70 'प्रकाश में बटन भरने के लिए और' L≈0। 70–0. 80 'अंधेरे में पाठ/प्रतीक के लिए)।

सीमा क्रोम 'सी': उच्च 'सी' बैनर पर सुंदर है, लेकिन यूआई में पढ़ाई को तोड़ ता है - 2 संस्करण रखें: "मार्केटिंग" (अमीर) और "किराने" (अधिक संयमित)।

चर को ठीक करें: मुख्य ('ब्रांड/प्राथमिक'), विकल्प ('ब्रांड/ऑल्ट') और तटस्थ समर्थन ('तटस्थ')।

5) टोन तराजू

लक्ष्य नियंत्रित संतृप्ति के साथ समान हल्कापन कदम प्राप्त करना है

OKLCH के लिए, 'L' steps को स्थानांतरित करें (उदा। 0. 98→0. 90→0. 80→…→0. 18), और 'सी' प्रकाश में "गंदगी" और अंधेरे में "अशांति" से बचने के लिए पैमाने के किनारों को थोड़ा कम करते हैं।

चौकियों को ठीक करें: '50/100/300/500 (कुंजी )/700/900'।

प्रत्येक चरण में, आधार पृष्ठभूमि के साथ और अपेक्षित पाठ रंग के साथ जोड़ी के विपरीत की जांच

ब्रांड/प्राथमिक पैमाने का उदाहरण (OKLCH, अनुमानित)

brand.primary.50  = oklch(0.98 0.03 230)
brand.primary.100 = oklch(0.94 0.05 230)
brand.primary.300 = oklch(0.86 0.08 230)
brand.primary.500 = oklch(0.74 0.10 230) # ключевой тон brand.primary.700 = oklch(0.56 0.09 230)
brand.primary.900 = oklch(0.32 0.07 230)

6) शब्दार्थ भूमिकाएँ और मानचित्रण

अलग ब्रांड और शब्दार्थ: "सफलता" को ब्रांड ग्रीन नहीं होना चाहिए।

role.primary.bg    -> brand.primary.500 role.primary.text   -> fg.on-primary     # ≥ 4.5:1 к role.primary.bg role.success.bg    -> green.500 role.warning.bg    -> amber.500 role.danger.bg    -> red.500 role.info.bg     -> blue.500 role.neutral.bg    -> gray.200/700 (light/dark)

'on-' ग्रंथों की गणना स्वचालित रूप से की जाती है (देखें) 10)।

7) प्रकाश/अंधेरे विषयों और सतहों

light:
bg/base   = oklch(0.98 0.01 260)
bg/subtle  = oklch(0.96 0.01 260)
bg/elevated = oklch(0.93 0.01 260)
fg/primary  = oklch(0.18 0.03 260) # ≈7:1 к bg/base fg/secondary = oklch(0.32 0.03 260) # ≥4.5:1 border    = oklch(0.80 0.02 260)

dark:
bg/base   = oklch(0.16 0.01 260)
bg/subtle  = oklch(0.20 0.01 260)
bg/elevated = oklch(0.24 0.01 260)
fg/primary  = oklch(0.90 0.02 260)
fg/secondary = oklch(0.78 0.02 260)
border    = oklch(0.34 0.02 260)

दोनों विषयों में समान विपरीत लक्ष्यों को बनाए रखें; शुद्ध काले रंग पर "अंधा" सफेद से बचें - ~ 0 के लिए 'एल' बैकग्राउंड बढ़ाएं। 16.

8) राज्य और अंतर्क्रियाशीलता

button/primary:
default.bg = brand.primary.500 hover.bg  = brand.primary.500 with +ΔC(0.01) -ΔL(0.02)
active.bg = brand.primary.700 focus.ring = brand.primary.300 # контраст кольца ≥ 3:1 к окружению disabled.bg= neutral.200 (light) / neutral.700 (dark)
text.on  = auto-contrast(default.bg)    # ≥ 4.5:1

9) दायित्व और WCAG

नियंत्रण में मूल पाठ और प्रतीक ≥ 4 हैं। 5:1.

मुख्य प्रणाली सूचनाएं (KYC/AML, 18 +, भुगतान त्रुटियां) - AAA (7: 1) पर लक्ष्य।

क्षेत्र राज्यों और सीमाओं - कम से कम 3:1.

न केवल रंग (अंडरस्कोर/फोकस-शैली) द्वारा लिंक को अलग करें।

10) ऑटो-फिट कंट्रास्ट टेक्स्ट ('on-')

1. OKLCH के अनुसार, प्रीडलैग निर्धारित करें। टेक्स्ट 'L _ on' so '(L_text vs L_bg) ≥ 4। 5:1`.

2. यदि क्रोमियम अधिक है, तो लोअर 'C _ text' to 0। 01–0. 03.

3. एक डार्क थीम के लिए, 'L _ on' दूसरा 0 उठाएं। 02–0. 04 चकाचौंध ऑफसेट करने के लिए।

fg.on(colorX) = auto(colorX, targetContrast=4.5)

11) डेटा विज़ुअलाइज़ेशन

श्रेणीबद्ध पैलेट: 8-12 रंग रंग अंधापन के लिए प्रतिरोधी (वैकल्पिक संकेतों के बिना लाल-हरे जोड़े से बचें)।

सतत: 'bg/elvated' से लेकर हस्ताक्षर के विपरीत नियंत्रण के साथ उच्चारण तक।

रंग के बिना विवेकशीलता के लिए पैटर्न/चिह्न जोड़ें।

12) अंतर्राष्ट्रीय संदर्भ (सांस्कृतिक संघ

स्थानीय अर्थों पर विचार करें (उदा। लाल - खतरा/ध्यान; स्वर्ण - जीत/पुरस्कार)।

IGaming के लिए: एक स्क्रीन में ब्रांडेड लहजे के साथ सफलता/खतरे से बचें; आइकनोग्राफी और हस्ताक्षर "चमक" से अधिक महत्वपूर्ण हैं।

13) डिजाइन प्रणाली में एकीकरण

13. 1 नामकरण टोकन

color.{theme}.{role    surface    brand}.{state    step}
примеры color.light.brand.primary.500 color.dark.role.success.bg color.light.surface.bg.base color.light.fg.on-primary

13. 2 टोकन (JSON/शैली शब्दकोश)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0.98 0.01 260)"} },
"brand":  { "primary": { "500": "oklch(0.74 0.10 230)" } },
"role":  { "primary": { "bg": "{color.light.brand.primary.500}" },
"danger": { "bg": "oklch(0.62 0.12 25)" } },
"fg": { "primary": "oklch(0.18 0.03 260)",
"on-primary": "auto({color.light.role.primary.bg},4.5)" }
}
}
}

13. 3 सीएसएस चर (थीम परत)

css
:root[data-theme="light"] {
--bg-base: oklch(0.98 0.01 260);
--brand-primary-500: oklch(0.74 0.10 230);
--fg-primary: oklch(0.18 0.03 260);
--on-primary: color-contrast(var(--brand-primary-500)); / автоподбор /
}
[data-theme="dark"] {
--bg-base: oklch(0.16 0.01 260);
--brand-primary-500: oklch(0.74 0.10 230);
--fg-primary: oklch(0.90 0.02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 फिगमा/प्रलेखन

घटक केवल टोकन का उपयोग करते हैं, प्रत्यक्ष HEX/SRGB लिंटर्स द्वारा निषिद्ध हैं।

लाइब्रेरी - पृष्ठ "कंट्रास्ट मैट्रिक्स" में: वास्तविक गुणांक के साथ तालिका 'fg × bg'।

14) गुणवत्ता नियंत्रण प्रक्रिया

डिजाइन में: आर्टबोर्ड (दोनों मोड) पर कंट्रास्ट चेक, रंग अंधापन के लिए अलग प्रीसेट।

कोड में: इकाई सहायक विपरीत गणना करते हैं और उल्लंघन में गिरते हैं; महत्वपूर्ण स्क्रीन के लिए दृश्य स्नैपशॉट

CI/CD में: टोकन और राज्यों के सभी जोड़े की जाँच, घटक, थीम और वास्तविक मूल्य के साथ रिपोर्ट।

15) iGaming की बारीकियां

प्रोमोस और टूर्नामेंट: पाठ को 'डूबने' से रोकने के लिए पृष्ठभूमि पर ओवरले और 'सी' बाधा का उपयोग करें।

जिम्मेदार सूचनाएं (सीमा, 18 +, जोखिम) - ईमानदारी से एएए।

मेट्रिक्स/टेबल: आकार और विपरीत द्वारा परिवर्तन (↑/↓) की संख्या और संकेतों के बीच अंतर करें, न कि केवल रंग।

16) कार्यान्वयन चेकलिस्ट

• ब्रांड शेड और उनके तानवाला तराजू (OKLCH) को परिभाषित किया गया है।
• भूमिकाएं, राज्य और सतहें दो विषयों के लिए निर्धारित हैं।
• लक्ष्य विपरीत के साथ ऑटो-जेनरेशन 'on-'।
• CI में 'fg × bg' मैट्रिक्स और WCAG परीक्षण।
• डेटाविज़के लिए व्यक्तिगत पैलेट (रंग अंधापन समर्थन के साथ)।
• लिंटर शैलियाँ "कच्चे" रंगों को प्रतिबंधित करती हैं।
• दिशानिर्देश में अपवाद और कारण पृष्ठ।

17) एंटी-पैटर्न

एक UX सिग्नल में सफलता/त्रुटि के साथ ब्रांड जोर मिलाएं।

पदानुक्रम के लिए केवल संतृप्ति पर भरोसा करें।

प्रकाश/अंधेरा तुल्यकालित न करें (कंट्रास्ट "बाएं" प्रसंगों में से एक में)।

टोकन के बिना हार्ड HEX - अनियंत्रित इंटरफ़ेस बहाव।

संक्षिप्त सारांश

ऊपर से नीचे तक एक पैलेट का निर्माण करें: ब्रांड कोर शब्दार्थ भूमिकाएं - टोन तराजू थीम राज्य। OKLCH, पिन टोकन, ऑटोमेट 'on-' और WCAG चेक में काम करते हैं। अलग से, डेटाविज़के लिए पैलेट दर्ज करें। यह ब्रांड स्थिरता, पढ़ाई और उत्पाद स्केलेबिलिटी देगा।