नियॉन/एक्सेंट शैली गैंबल हब

1) अवधारणा और सिद्धांत

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

1. एक्सेंट - डोज किया गया। 90/10: स्क्रीन क्षेत्र के 10% तक "प्रकाश" हो सकता है।

2. शब्दार्थ ब्रांड से अधिक महत्वपूर्ण हैं। नियॉन अर्थ को उजागर करने का एक तरीका है, न कि केवल "चमक"।

3. कंट्रास्ट प्राथमिक है कोई भी चमकदार वस्तु पाठ (एए न्यूनतम) की पढ़ाई को कम नहीं करती है।

4. ताल और ठहराव। एनीमेशन छोटा, अनुमानित है, ठहराव और स्पष्ट भौतिकी के साथ।

5. प्रदर्शन और उपलब्धता। कमजोर उपकरणों पर कोई भारी धुंधला/छाया नहीं; सभी प्रभावों का परीक्षण एचसी मोड में किया जाता है।

2) रंग और प्रकाश: पैलेट और भूमिकाएँ

2. 1 डार्क-फर्स्ट

'bg/base' - हल्के शोर/अनाज के साथ गहरे ग्रेफाइट (ग्रेडिएंट पर "धारियों" को कम करता है)।

'बीजी/एलिवेटेड' - कार्ड और मॉडल के लिए थोड़ा हल्का।

'fg/प्राथमिक' - लगभग सफेद, लेकिन साफ नहीं (# FFF → L≈0। ओकेएलसीएच में 90) चकाचौंध को कम करने के लिए।

2. 2 एक्सेंट नीयन (OKLCH, स्थल)

साइबर ब्लू: 'ओकलच (0। 74 0. 16,250) 'मुख्य ब्रांड उच्चारण है।

इलेक्ट्रिक पर्पल: 'ओकलच (0। 70 0. 17 310) '- द्वितीयक, अनुक्रम या खेल की घटनाओं के लिए।

विषाक्त चूना: 'oklch (0। 82 0. 14,140) 'एक दुर्लभ हाइलाइट (जैकपॉट, जीत) है।

अलर्ट कोरल: 'oklch (0। 72 0. 14 30) '- चेतावनी/त्रुटियां (संयमित "नीयन")।

2. 3 कंट्रास्ट जोड़े

पाठ/प्रतीक पृष्ठभूमि: ≥ 4। 5:1 (सामान्य), ≥ 3:1 (बड़ा/वसायुक्त)।

नियॉन भरें पाठ: ≥ 4। 5:1. उच्च 'सी' पर, 0 से कम 'सी _ टेक्स्ट'। 01–0. 03.

रूपरेखा/सूचक प्रतीक: पर्यावरण के लिए ≥ 3:1।

3) पढ़ ने योग्यता को नुकसान पहुंचाए बिना चमक प्रभाव

3. 1 प्रकार की चमक

बाहरी चमक: 1-2 धुंधले छल्ले, त्रिज्या 8-24 px पैमाने के आधार पर।

नियॉन स्ट्रोक: पतली रेखा 1-2 पीएक्स उच्च चमक + नरम बाहरी छाया।

इनसेट ग्लो: फोकस में इनपुट के लिए आंतरिक "रोशनी"।

3. 2 लिमिटर्स

तीव्र चमक के ऊपर छोटे पाठ को कभी न रखें।

चमक राज्य की जगह नहीं लेती है; यह आकार/आइकन/रेखांकित करता है।

बड़े क्षेत्रों में (बैनर/हेडर) - चमक की अपारदर्शिता को 20-35% तक कम करें।

3. 3 विषयों के अनुकूल

प्रकाश विषय में, नीयन त्रिज्या में कमजोर और छोटा होता है, अन्यथा इसका "एसिड" प्रभाव होता है।

उच्च-विपरीत में - रोशनी बंद कर दी जाती है, एक स्पष्ट रूपरेखा/फ्रेम रहता है।

4) टाइपोग्राफी और पदानुक्रम

मूल सामग्री का आकार: 16-18 पीएक्स; स्पष्ट स्केल हेडर (उदाहरण के लिए, 12-पॉइंट स्केल)।

शैली: अल्ट्रा-लाइट से बचें; नियमित/मध्यम न्यूनतम।

लाइन रिक्ति 1। 45–1. 6.

पाठ में जोर रंग पर नहीं है, बल्कि पैमाने/वजन/आइकन पर है; रंग - केवल अतिरिक्त के रूप में।

5) ग्रिड, लय, पृष्ठभूमि

कॉलम: 12 (डेस्कटॉप), 6 (टैबलेट), 4 (मोबाइल)।

क्षैतिज मॉड्यूल 8 px; ऊर्ध्वाधर - 8/12/16 px अनुभाग पर निर्भर करता है।

पृष्ठभूमि ढाल: प्रमुख सीटीए क्षेत्र में रेडियल कमजोर "प्रभामंडल"।

स्पर्श शोर (अनाज) L =। 0। 02 - "प्लास्टिक" के बिना गहराई के लिए।

6) घटक (पैटर्न)

6. 1 बटन

प्राथमिक: 'BrandNeon' + 'ऑन-प्राथमिक' पाठ ≥ 4 भरें। 5:1, होवर पर चमक त्रिज्या 12-16 पीएक्स।

द्वितीयक: नीयन समोच्च (1-2 पीएक्स) के साथ पारदर्शी और होवर पर नरम बाहरी चमक।

तृतीयक: पाठ्य, कोई चमक नहीं, केवल रेखांकित/आइकन।

• होवर: L पृष्ठभूमि (0। 02–0. 04) + प्रकाश चमक।
• सक्रिय: गहरा भराव, हटाया या कम चमक।
• फोकस: कंट्रास्ट रिंग 2-3 px (कोई धब्बा नहीं), न कि केवल रंग।

6. 2 इनपुट क्षेत्र

डिफ़ॉल्ट: तटस्थ 1 px पतला फ्रेम।

फोकस: नीयन स्ट्रोक + कमजोर इनसेट चमक क्षेत्र के अंदर; कम कंट्रास्ट प्लेसहोल्डर (लेकिन ≥ 3:1)।

त्रुटि/सफलता: सिमेंटिक रंग रूपरेखा + प्रतीक; चमक न्यूनतम।

6. 3 टैब/नेविगेशन

सक्रिय टैब संकेतक - नीयन लाइन 2 px + सॉफ्ट ब्लर 8 px।

होवर्स - कर्सर के नीचे हल्की रोशनी (छाया 4-6 पीएक्स फैली)।

6. 4 कार्ड/बैनर

टूर्नामेंट कार्ड: कोनों में फ्रेम-नीयन (छोटे "कोने") ताकि पूरा फ्रेम चमके न।

बैनर - पाठ के तहत एक काला मुखौटा (ओवरले 40-60%) ताकि नीयन पृष्ठभूमि सामग्री को "खाएं" नहीं।

7) माइक्रो-इंटरैक्शन और एनीमेशन

अवधि: 120-200 एमएस (होवर), 180-240 एमएस (फोकस/सक्रिय), 240-320 एमएस (डॉक/मॉडल)।

वक्र: 'घन-बेजियर (0। 2, 0. 0, 0. 2, 1) 'एक "सामग्री" सनसनी के लिए।

नियॉन पल्स: प्रति होवर एक चक्र, कोई अंतहीन पलक नहीं।

सिस्टम इवेंट्स (जीत/हासिल): क्षीणन के साथ 300-500 एमएस बैकलाइट का एक छोटा विस्फोट।

8) उपलब्धता और उच्च कंट्रास्ट मोड

सभी अर्थ रंग और चमक के बिना उपलब्ध हैं: आकार, प्रतीक, पाठ लेबल, रेखांकित करें।

'पसंद-कंट्रास्ट', 'जबरन-रंग' के लिए समर्थन; जब चालू करें - चमक बंद करें, फ्रेम और भरने को मजबूत करें, विरोधाभासों की जाँच करें।

रंग अंधापन के लिए: केवल संकेत के रूप में लाल-हरे रंग की जोड़ी से बचें; चित्रांकन और पाठ का उपयोग करें।

9) प्रदर्शन

एक बड़े धब्बा और फिल्टर के साथ बॉक्स-छाया को कम करें: कई तत्वों पर धब्बा ()।

छद्म तत्व छाया और परत संगीतकार (रूपांतरण/अपारदर्शिता) पसंद करें।

मोबाइल पर - एनिमेशन का "प्रकाश" प्रीसेट; कम एफपीएस पर तीव्र चमक अक्षम।

नियॉन ग्रेडिएंट्स - बड़े आकार पर रेखाकार परिसंपत्तियों (WebP/AVIF) के रूप में रेंडर।

10) रंग और शैली टोकन (उदाहरण)

json
{
"color": {
"dark": {
"bg": { "base": "oklch(0. 16 0. 01 260)", "elevated": "oklch(0. 22 0. 01 260)" },
"fg": { "primary": "oklch(0. 90 0. 02 260)", "secondary": "oklch(0. 78 0. 02 260)" },
"neon": {
"brand":  { "500": "oklch(0. 74 0. 16 250)" },
"purple": { "500": "oklch(0. 70 0. 17 310)" },
"lime":  { "500": "oklch(0. 82 0. 14 140)" },
"coral":  { "500": "oklch(0. 72 0. 14 30)" }
}
}
},
"elevation": {
"glow": {
"sm": { "blur": 8, "spread": 2, "alpha": 0. 35 },
"md": { "blur": 12, "spread": 4, "alpha": 0. 30 },
"lg": { "blur": 20, "spread": 6, "alpha": 0. 25 }
}
}
}

सीएसएस प्रीसेट (टुकड़े)

css
:root[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--fg-primary: oklch(0. 90 0. 02 260);
--neon-brand: oklch(0. 74 0. 16 250);
--glow-md: 0 0 12px rgba(0, 180, 255, 0. 30), 0 0 4px rgba(0, 180, 255, 0. 45);
}

.button--primary {
color: var(--on-primary);
background: var(--neon-brand);
box-shadow: none;
}
.button--primary:hover {
box-shadow: var(--glow-md);
transform: translateZ (0) ;/compositing/
}
:root[data-high-contrast].button--primary:hover {
box-shadow: none; outline: 2px solid var(--fg-primary);
}

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

सीरियल रेखांकन: मुख्य पंक्ति तटस्थ है, हाइलाइटेड पंक्ति बढ़ी हुई मोटाई और आकार के मार्करों के साथ नीयन है।

अंक/स्तंभ: पृष्ठभूमि के लिए ≥ 3:1; हस्ताक्षर - ≥ 4। 5:1.

चयनित श्रृंखला की रोशनी नरम बाहरी चमक (sm) है, बिना निरंतर झिलमिलाहट के।

12) सामग्री ब्लॉक और प्रोमो

प्रोमो बैकग्राउंड नियॉन्स पर पाठ - हमेशा एक प्लेट/ओवरले (40-60%) पर, सख्ती से इसके विपरीत।

"ग्लिच "/स्कैन लाइनें - केवल एक दुर्लभ उच्चारण के रूप में, प्रति पृष्ठ 2-3 वर्गों से अधिक नहीं।

13) प्रतीक और चित्र

प्रतीक - सक्रिय राज्यों के लिए नीयन स्ट्रोक के साथ रैखिक/डुओटन।

चित्र - न्यूनतम भरण के साथ "समोच्च के साथ नीयन"; पाठ के चारों ओर एक छोटी सी चमक से बचें।

14) विपणन बनाम उत्पाद

विपणन बैनर उच्च 'सी' क्रोम और जटिल चमक का उपयोग कर सकते हैं।

उत्पाद में (फॉर्म, टेबल, बैलेंस) - कम 'सी', छोटे चमक प्रभाव और सख्त विपरीत।

15) iGaming के लिए पाठ्य नियम

महत्वपूर्ण सूचनाएं (18 +, सीमाएं, केवाईसी/एएमएल, जोखिम) - इसके विपरीत एएए, कोई चमक नहीं।

गुणांक तालिकाओं/लीडरबोर्ड में - न केवल रंग के साथ, बल्कि तीर/आइकन और वसा सामग्री के साथ विकास/गिरावट का संकेत देते हैं।

16) स्थानीयकरण और अनुकूलन

साइरिलिक/लैटिन: एक ही पिन और पत्र रिक्ति मेट्रिक्स।

दो-पंक्ति सीटीए - पाठ के लिए अक्षम चमक, इसे स्ट्रोक/पृष्ठभूमि पर छोड़ दें।

आरटीएल - दर्पण केवल दिशात्मक प्रभाव (कोनों/हाइलाइट्स)।

17) चेकलिस्ट की समीक्षा करें (डिजाइन/विकास)

कंट्रास्

• पाठ ≥ 4। 5:1; बड़े ≥ 3:1; सिस्टम सूचना - एएए।

चमक

• चमक पाठ के साथ ओवरलैप नहीं करता है; प्रीसेट के भीतर त्रिज्या और अल्फा।

राज्य

• होवर/सक्रिय/फोकस केवल रंग/प्रकाश नहीं बल्कि आकार से अलग हैं।

निष्पादन

• कई भारी धब्बा के बिना; मोबाइल के लिए "लाइट" प्रीसेट है।

उपलब्धता

• उच्च-कंट्रास्ट मोड सही है (चमक बंद, फ्रेम पर)।

शब्दार्थ

• नियॉन अर्थ (क्रिया/फोकस/स्थिति) को दर्शाता है, न कि "सुंदरता के लिए।"

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

ठोस नीयन बड़े क्षेत्रों के भरता है - आंखों की थकान।

लगातार झिलमिलाहट/लहर → जलन और पहुंच मुद्दों।

बिना अंडरले के चमकदार चमक पर पाठ।

एकमात्र संकेत रंग/चमक है (कोई आकार/प्रतीक/रेखांकित नहीं)।

एक स्क्रीन में असंगत चमक तीव्रता (दृश्य "दलिया")।

19) ए/बी और मैट्रिक्स

सीटीआर सीटीए बटन और इनपुट त्रुटियों के लिए चमक तीव्रता (अल्फा/त्रिज्या) का परीक्षण करें।

नीयन फोकस में प्रवेश करने के बाद समय-से-कार्रवाई और त्रुटियों को ट्रैक करना।

दृश्य आराम पर यूएक्स सर्वेक्षण (विशेष रूप से लंबे सत्रों में)।

20) डिजाइन प्रणाली में प्रलेखन

"नियॉन/एक्सेंट" पृष्ठ: पैलेट्स (उत्पाद/विपणन), चमक टोकन, घटक उदाहरण, माइक्रो-इंटरैक्शन का वीडियो डेमो।

"कंट्रास्ट मैट्रिक्स": 'fg × bg' और 'on-' के लिए वास्तविक गुणांक।

फ्रंटेंड के लिए प्रीसेट कक्षाओं और स्निपेट्स का सेट।

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

गैंबल हब के लिए नियॉन/एक्सेंट - बिंदु, शब्दार्थ, उत्पादक। प्रकाश विपरीत और आराम को परेशान किए बिना टकटकी को कार्रवाई के लिए निर्देशित करता है। इंजन - टोकन (OKLCH), "लाइट" चमक प्रीसेट, सख्त राज्य, उच्च-विपरीत में अक्षम प्रभाव। यह ब्रांड का उज्ज्वल चरित्र देता है, लेकिन एक सुविधाजनक और तेज उत्पाद बना हुआ है।