दृश्य पहचान गैंबल हब

1) ब्रांड सार और सिद्धांत

चित्र: तकनीकी, ईमानदार, विश्वसनीय, डेटा-चालित और जिम्मेदार।

स्वर: आरक्षित और सक्षम; "जुआ" हाइपरबोले के बिना।

सिद्धांत: पढ़ ने योग्यता> सजावट, डिफ़ॉल्ट उपलब्धता, उत्पादों के बीच स्थिरता।

2) लोगो: संरचना और उपयोग

2. 1 विकल्प

मुख्य (क्षैतिज): साइन + शब्द गैंबल हब।

कॉम्पैक्ट (साइन): फेविकॉन/अवतार के लिए।

खड़ा: संकीर्ण क्षेत्रों के लिए।

2. 2 संरचना और सुरक्षा क्षेत

8px ग्रिड। परिधि के चारों ओर गार्ड क्षेत्र = राजधानी जी की ऊंचाई।

न्यूनतम आकार: 18 मिमी चौड़ा; स्क्रीन - 120 px।

आप पैलेट के बाहर से अनुपात, तिरछा, प्रभाव/ग्रेडिएंट जोड़ नहीं सकते।

2. 3 पृष्ठभूमि

एक हल्की पृष्ठभूमि पर - एक रंग लोगो।

जटिल/फोटो पर - एक प्लेट पर मोनोक्रोम (सफेद/काला) 8-12 पीएक्स राउंड।

अंधेरे पर उलटा पड़ा हुआ है

3) रंग प्रणाली (टोकन)

3. 1 बेसिक पैलेट

प्राथमिक/इंडिगो 600: '# 2F6BFF'

प्राथमिक अंधेरा/इंडिगो 700: '# 1E54F0'

सफलता/ग्रीन 600: '# 2EAEE60'

चेतावनी/ऑरेंज 600: '# FF9F1A'

क्रिटिकल/रेड 600: '# E53935'

एफजी प्राथमिक: '# 11131A'

एफजी म्यूटेड: '# 656D76'

बीजी बेस: '# FFFFFF'

बीजी सूक्ष्म: '# F7F8FA'

बीजी उलटा: '# 0E1116'

3. 2 ग्रेडिएंट्स (वैकल्पिक)

ब्रांड ग्रेडिएंट: 'रैखिक-ढाल (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - dosed का उपयोग करें।

3. 3 कंट्रास्ट और स्टेट्स

प्राथमिक बटन: पृष्ठभूमि '# 2F6BFF', सफेद पाठ, होवर '# 1E54F0', 40% अल्फा अक्षम।

पाठ कंट्रास्ट ≥ 4। 5: 1 (एए)। व्युत्क्रम के लिए - बड़े के लिए ≥ 3:1।

4) टाइपोग्राफी

टाइटल: इंटर/एसएफ प्रो/सिस्टम, वसा सामग्री 600-700।

पाठ: अंतर 14-16 पीएक्स, लाइन-ऊंचाई 1। 5.

कोड/मोनो: जेटब्रेन्स मोनो या सिस्टम मोनो।

पदानुक्रम: एच 1 32/40, एच 2 24/32, एच 3 20/28, बॉडी 16/24, कैप्शन 12/16।

इंटरफ़ेस के लिए सजावटी फ़ॉन्ट का उपयोग न करें।

5) ग्रिड, इंडेंट्स और रेडी

ग्रिड: 8px; अधिकतम चौड़ाई 1120-1280 पीएक्स के साथ कंटेनर।

कार्ड: आंतरिक इंडेंट 16-24 पीएक्स, इंटर-कार्ड - 16 पीएक्स।

राडी: 8/12/16 पीएक्स; डिफ़ॉल्ट 12 px, 8 px बटन के लिए।

Тени: '0 1px 2px rgba (0,0,0, .08)' (sm), '0 4px 12px rgba (0,0,0, .10)' (md)।

6) आइकनोग्राफी और चित्र

प्रतीक 24 × 24, पंक्ति 1 का ग्रिड। 75-2px, राउंड मैच हुए।

शब्दार्थ प्राथमिक है, रंग माध्यमिक है (राज्यों में रंग परिवर्तन)।

चित्र: सपाट, "आकस्मिक" प्रतीकों के बिना (चिप्स/कार्ड - केवल तटस्थ जानकारी सामग्री में और मध्यम, गैर-प्रोत्साहन संदर्भों में)।

7) छवियाँ और तस्वीरें

विषय: प्रौद्योगिकी, डेटा, सुरक्षा, टीम।

जैकपॉट/कंफ़ेद्दी क्लिच से बचें।

फोटो के ऊपर पाठ विपरीत (अंधेरे भाग में कम से कम 60% अपारदर्शिता) के लिए एक ढाल/डार्क प्लेट है।

8) अंधेरे और हल्के विषय

डार्क: बैकग्राउंड '# 0E116', टेक्स्ट '# E6E8EB', बॉर्डर '#'।

उच्चारण विपरीत बनाए रखते हैं (8-12% द्वारा प्राथमिक चमक)।

ग्राफिक्स: पृष्ठभूमि पृष्ठभूमि की तुलना में 2 चरण हल्के हैं, ग्रिड मफल्ड है, कैप्शन विपरीत हैं।

9) उपलब्धता (A11y)

एए/एएए कंट्रास्ट; फोकस शैलियों को हटाया नहीं जा सकता है।

लोगो और महत्वपूर्ण छवियों पर पाठ विकल्प।

न्यूनतम क्लिक आकार 40-48 px है।

'प्रीफर्स-कम-मोशन' का सम्मान करें - एनिमेशन को कम/अक्षम करें।

10) टोन और माइक्रो-कॉपीराइटिंग

संक्षिप्त, बिल्कुल, शब्दजाल के बिना।

त्रुटियाँ समझाती हैं कि उपयोक्ता को क्या करना है.

इकाइयाँ और प्रारूप: उपयोगकर्ता लोकेल में, इंटरफ़ेस में - आईएसओ जब प्रवेश करते हैं, कोड (ईयूआर, यूएसडी) के साथ मुद्राएं।

किराने के संदेशों में "जुआ" रूपकों का उपयोग न करें।

11) टोकन उदाहरण (JSON और CSS)

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) घटक और राज्य (यूआई उदाहरण)

प्राथमिक बटन: प्राथमिक-600 पृष्ठभूमि, पाठ # FFF, प्राथमिक -700, अक्षम 40% अल्फा।

बैज: पढ़ ने योग्य पाठ और एक आइकन के साथ सफलता/चेतावनी/महत्वपूर्ण।

कार्ड: बीजी बेस बैकग्राउंड, एसएम शैडो, एमडी त्रिज्या, 16 पीएक्स हेडर, 16-24 पीएक्स बॉडी।

13) एनीमेशन और गति

संक्रमण 120-200 एमएस, 'आसानी से बाहर' वक्र।

एनिमेशन - केवल 'रूपांतरण '/' अपारदर्शिता'।

महत्वपूर्ण राज्यों के लिए - बिना एनिमेशन (विचलित न करें)।

14) सोशल मीडिया, प्रस्तुतियां, ई-मेल

अवतार/प्रतीक: प्राथमिक -600 मृत्यु पर हस्ताक्षर, 12-16 पीएक्स।

स्लाइड्स: लाइट/डार्क बैकग्राउंड, 8px ग्रिड, H1 40-48, कंटेंट 18-24।

ई-मेल: एचटीएमएल टेम्पलेट 600-720 पीएक्स चौड़ाई, सिस्टम फोंट/इंटर, बटन ≥ 44 पीएक्स ऊंचाई, डार्क थीम को ध्यान में रखा गया है।

15) मुद्रण, मर्च और बाहरी

CMYK रंग प्रोफ़ाइल, Pantone समकक्ष प्रिंटिंग हाउस से सहमत हैं।

लोगो और रेडी का न्यूनतम आकार रखें।

कागज - मैट, "चीखने" वार्निश से बचें; निशान के लिए एम्बॉसिंग स्वीकार्य है।

16) कानूनी मार्कअप और जिम्मेदार खेल

यदि आवश्यक हो ®/™ साइन के साथ लोगो (urd)। देश)।

अस्वीकरण और आयु प्रतिबंध - लेआउट के निचले क्षेत्र में; Readability AA।

अत्यधिक व्यवहार को प्रोत्साहित करने वाली सामग्री में पहचान का उपयोग

17) स्थानीयकरण और आरटीएल

लोगो प्रतीक/शब्द का अनुवाद नहीं किया गया है।

पाठ ब्लॉक - संसाधनों में; आरटीएल समर्थन (तीर/प्रतीक मिररिंग)।

लेआउट के लिए जर्मन/तुर्की/अरबी में लाइन लंबाई पर विचार करें।

18) करो/मत करो

• कंट्रास्ट, गार्ड ज़ोन, फ़ॉन्ट पदानुक्रम, 8px ग्रिड बनाए रखें।
• फोटो/वीडियो में दृश्यता जाँचें; एक मरने का उपयोग करें।
• टोकन का पालन करें - नहीं "यादृच्छिक" रंग।

• लोगो को खिंचाव/घास काटें, छाया/स्ट्रोक लागू करें "सुंदरता के लिए।"
• उत्पादों में पृष्ठभूमि के रूप में "जुआ" छवियों का उपयोग करें।
• गैर-मानक फोंट मिलाएं, कंट्रास्ट तोड़ें या फोकस हटाएं।

19) संपत्ति, नामकरण और संस्करण

नामकरण: 'gh-logo-hz-color। svg ',' gh-logo-vt-mono-white। svg ',' gh-icon-24-अलर्ट। svg '।

Пакеты: '/brand/logos/', '/brand/icons/24/', '/brand/templates/', '/brand/fonts/'।

प्रारूप: लोगो/प्रतीक के लिए एसवीजी; स्क्रीन के लिए PNG/WebP; मुद्रण के लिए पीडीएफ़।

वर्शनिंग: टोकन/आइकन पैक के लिए SemVer; 'जोड़ा/परिवर्तित/पदावनत/हटाया' के साथ चेंजलॉग।

सत्य का स्रोत: → वेब/आईओएस/एंड्रॉइड के लिए टोकन भंडार का निर्माण करें।

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

पीआर में ब्रांड समीक्षा: टोकन की जाँच और विपरीत।

विवादास्पद पृष्ठभूमि छवियों के लिए A/B (पढ़ने योग्यता/रूपांतरण)।

लिंटर: टोकन के बाहर रंगों को प्रतिबंधित करना, छवियों के लिए ऑल्ट-टेक्स्ट की जाँच करना।

त्रैमासिक ऑडिट: पैलेट/टाइपोग्राफी/आइकन पैक स्थिरता।

21) टेम्पलेट्स

कुंजी/स्लाइड: शीर्षक, अनुभाग, सामग्री, "डेटा/चार्ट", अंतिम।

सोशल मीडिया: 1:1 अवतार, 16:9 बैनर, कहानियाँ 9:16।

ई-मेल: ग्रीटिंग, सीटीए, अधिसूचना, डाइजेस्ट।

लैंडिंग: हीरो ब्लॉक, 3 भत्ते, शोकेस, सीटीए, तहखाने

22) एप्लिकेशन चेकलिस्ट

• लोगो: सही विकल्प, सुरक्षा क्षेत्र, कंट्रास्ट, आकार।
• रंग: केवल टोकन; एए कंट्रास्ट।
• फोंट: पदानुक्रम, पंक्ति द्वारा लाइन, लक्ष्य आकार।
• प्रतीक: ग्रिड 24 × 24, समान रेखा मोटाई।
• चित्र: मान्य प्रसंग, शीर्ष पर पाठ पढ़ ने योग्यता।
• डार्क/लाइट थीम: सत्यापित, कोई कलाकृतियां नहीं।
• स्थानीयकरण/RTL: लाइन्स लेआउट को "ब्रेक" नहीं करते हैं।
• कानूनी/जिम्मेदार गेमिंग मार्कअप मौजूद हैं।

23) कार्यान्वयन योजना (3 पुनरावृत्ति)

• लोगो, पैलेट, टाइपोग्राफी, मूल टोकन, आइकन 24 × 24 (मुख्य 40-60 पीसी) का एक सेट। , प्रस्तुति टेम्पलेट और ई-मेल।

• डार्क थीम, टोकन पर यूआई घटक (बटन, कार्ड, टेबल), रेखांकन के लिए गाइड, सोशल मीडिया पैक, लैंडिंग पेज।

• विस्तारित आइकन पैक, चित्र, मुद्रित लेआउट, टोकन के लिए लिंटर/सीआई, नियमित ब्रांड ऑडिट।

24) मिनी-एफएक्यू

क्या किसी विशेष कार्रवाई के लिए लोगो को दोहराना संभव है?

केवल अनुमोदित मौसमी विषयों में और विपरीत/सुरक्षा क्षेत्र के उल्लंघन के बिना।

प्राथमिक - टोकन या लेआउट क्या है?

टोकन। लेआउट को सिस्टम रंग/इंडेंटेशन/टाइपोग्राफी चर का उपयोग करना होगा।

विवादास्पद मामलों में कैसे कार्य करें?

पहचान भंडार में RFC खोलें, उदाहरण संलग्न करें, एक ब्रांड समीक्षा करें।

कुल

गैंबल हब पहचान एक "चित्र सेट" नहीं है, बल्कि एक प्रणाली है: लोगो, पैलेट, टाइपोग्राफी, आइकन पैक, टोकन और गुणवत्ता नियंत्रण प्रक्रियाएं। इसके विपरीत, उपलब्धता और स्थिरता के नियमों का पालन करें, टोकन और टेम्पलेट का उपयोग करें - और ब्रांड सभी उत्पादों और चैनलों में पहचानने योग्य, आधुनिक और एकीकृत होगा।