Gamble Hub vizual identikasi

1) Brendning mohiyati va prinsiplari

Tasvir: texnologik, halol, ishonchli, ma’lumotlar va mas’uliyatga yo’naltirilgan.
Ohang: vazmin va vakolatli; «qimor» giperbolasiz.
Printsiplar: o’qish qobiliyati> bezaklar, andoza foydalanish imkoniyati, mahsulotlar o’rtasidagi mustahkamlik.

2) Logotip: tuzilishi va foydalanilishi

2. 1 variantlar

Asosiy (gorizontal): belgi + Gamble Hub soʻzi.
Ixcham (belgi): favikon/avatarlar uchun.
Vertikal: tor maydonlar uchun.

2. 2. Konstruksiya va muhofaza zonasi

8px. Muhofaza zonasi = perimetri bo’yicha bosh G balandligi.
Eng kam o’lchami: bosma - kengligi bo’yicha 18 mm; ekran - 120 px.
Oʻlchamlarni oʻzgartirish, egish, palitradan tashqari effektlar/gradientlarni qoʻshish mumkin emas.

2. 3 Fonda

Yorqin fonda - rangli logotip.
Murakkab/fotosuratlarda - monoxrom (oq/qora) 8-12 px dumaloq plastinkada.
Qorong’ida - teskari.

3) Rang tizimi (tokenlar)

3. 1 Asosiy palitra

Primary / Indigo 600: `#2F6BFF`

Primary Dark / Indigo 700: `#1E54F0`

Success / Green 600: `#2EAE60`

Warning / Orange 600: `#FF9F1A`

Critical / Red 600: `#E53935`

FG Primary: `#11131A`

FG Muted: `#656D76`

BG Base: `#FFFFFF`

BG Subtle: `#F7F8FA`

BG Inverse: `#0E1116`

3. 2 Gradiyentlar (xohishiga ko’ra)

Brand Gradient:’linear-gradient (135deg, #2F6BFF 0%, #1E54F0 50%, #2EAE60 100%)’- dozada foydalanish.

3. 3 Kontrast va holatlar

Asosiy tugma: orqa’#2F6BFF’, oq matn, hover’#1E54F0’, disabled 40% alfa.
Matn kontrasti ≥ 4. 5:1 (AA). Inversiya uchun - ≥ 3:1.

4) Bosmaxona

Sarlavhalar: Inter/SF Pro/tizimli, yog’miqdori 600-700.
Matn: Inter 14-16 px, line-height 1. 5.
Kod/mono: JetBrains Mono yoki tizim mono.
Ierarxiya: H1 32/40, H2 24/32, H3 20/28, Body 16/24, Caption 12/16.
Interfeys uchun dekorativ shriftlardan foydalanmaslik.

5) To’r, chekinishlar va radiuslar

Toʻr: 8px; max-width 1120-1280 px konteynyerlar.
Kartochkalar: ichki cheklovlar 16-24 px, kartalararo cheklovlar - 16 px.
Radiuslar: 8/12/16 px; Andoza 12 px, 8 px tugmalari uchun.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Ikonografiya va rasmlar

24 × 24 ikonkalar to’ri, 1-chiziq. 75-2px, aylanishlar kelishilgan.
Semantika birlamchi, rang ikkilamchi (rang holatiga ko’ra o’zgaradi).
Rasmlar: yassi, "kazual" ramzlarsiz (fishkalar/xaritalar - faqat neytral axborot materiallarida va mo "tadil, rag’batlantirmaydigan kontekstlarda).

7) Tasvirlar va fotosuratlar

Mavzular: texnologiyalar, maʼlumotlar, xavfsizlik, buyruq.
«Jekpot/konfeti» klishesidan qochish.
Fotosuratning ustiga - gradiyent/qorong’i matn kontrastiga mo’ljallangan ploshka (qorong’i qismida kamida 60% shaffoflik).

8) Qorong’u va yorqin mavzular

Qorong’#0E1116’, matn’#E6E8EB’, chegaralar’#2A2F37’.
Aksentlar kontrastni saqlab qoladi (primary 8-12% ga porlaydi).
Grafiklar: fon fondan 2 qadam yorqinroq, tor jim, imzolar kontrastli.

9) Foydalanish imkoniyati (A11y)

AA/AAA kontrasti; fokus uslublarini olib tashlamang.
Logotip va muhim tasvirlarning matnli muqobillari.
Bosishning minimal o’lchami 40-48 px.
’prefers-reduced-motion’ ni hurmat qilish - animatsiyalarni pasaytirish/oʻchirish.

10) Ton va mikrokopirayting

Qisqa, aniq, jargonsiz.
Xatolar foydalanuvchiga nima qilish kerakligini tushuntiradi.
Birliklar va formatlar: foydalanuvchi lokalidagi sanalar, interfeysda - ISO, kodli valyuta (EUR, USD).
Oziq-ovqat xabarlarida «qimor» metaforalaridan foydalanmaslik.

11) Tokenlar namunalari (JSON va 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) Komponentlar va holatlar (UI-misollar)

Primary tugmasi: fon primary-600, matn #FFF, hover primary-700, disabled 40% alfa.
Nishonchalar: success/warning/critical oʻqiladigan matn va ikonka bilan.
Kartochka: BG Base fon, soya sm, radius md, xeder 16 px, tanasi 16-24 px.

13) Animatsiya va harakat

O’tish joylari 120-200 ms, «ease-in-out» egri chizig’i.
Animatsiyalar faqat’transform ’/’ opacity’.
Og’ir holatlar uchun - animatsiyasiz (chalg’itmang).

14) Ijtimoiy media, taqdimotlar, e-mail

Avatarlar/ikonkalar: primary-600 plachkasidagi belgi, 12-16 px chekinishlar.
Slaydlar: och/qorong’i fon, 8px, H1 40-48, 18-24 tarkib.
E-mail: Eni 600-720 px HTML-shablon, tizim/Inter shriftlari, balandligi 44 px ≥ tugmalar, qorong’u mavzu hisobga olinadi.

15) Muhr, merch va tashqi

CMYK, Pantone-ekvivalentlar rangini bosmaxona bilan kelishish.
Logotipning minimal o’lchamlari va radiuslari saqlansin.
Qog’oz - mato, «qichqiruvchi» laklardan qochish; belgi uchun muhrlash mumkin.

16) Yuridik belgilar va mas’uliyatli o’yin

Zarurat bo’lganda ®/™ belgisi bo’lgan logo (yurd. mamlakat).
Diskleymerlar va yoshga oid cheklovlar - maketlarning quyi zonasida; AA o’qish qobiliyati.
Haddan tashqari xatti-harakatlarni ragʻbatlantiruvchi kontentlarda identikadan foydalanmaslik.

17) Mahalliylashtirish va RTL

Logotipning belgisi/so’zi tarjima qilinmaydi.
Matnli bloklar - resurslarda; RTLni qoʻllab-quvvatlash (oʻqlar/ikonkalarni oynalash).
Maketlarda nemis/turk/arab tillaridagi satrlarning uzunligini hisobga oling.

18) Do / Don’t

• Kontrast, qoʻriqlash zonalari, shrift ierarxiyasi, 8px toʻrini qoʻllab-quvvatlang.
• Foto/video koʻrinishini tekshiring; ploshkadan foydalaning.
• Tokenlarga amal qiling - «tasodifiy» ranglar yo’q.

• Logotipni cho’zish/o’rash, «go’zallik uchun» soyalar/konturlarni qo’llash.
• Mahsulotdagi fon sifatida «qimor» tasvirlaridan foydalanish.
• Nostandart shriftlarni aralashtirish, kontrastni sindirish yoki fokusni olib tashlash.

19) Assetalar, neyming va versiyalar

Neyming:’gh-logo-hz-color. svg`, `gh-logo-vt-mono-white. svg`, `gh-icon-24-alert. svg`.
Пакеты: `/brand/logos/`, `/brand/icons/24/`, `/brand/templates/`, `/brand/fonts/`.
Formatlar: logotiplar/ikonkalar uchun SVG; rastrlar uchun PNG/WebP; Bosib chiqarish uchun PDF.
Version: Token/ikonkalar paketi uchun SemVer; cheynjlog s’added/changed/deprecated/removed’.
Haqiqat manbai: tokenlar ombori → web/iOS/Android uchun to’plamlar.

20) Sifat nazorati va jarayon

Brand Review in PR: Token va kontrastni tekshirish.
munozarali fon tasvirlari uchun A/B (o’qish/konvertatsiya).
Linter: ranglarni tokenlardan tashqarida taqiqlash, rasmlar uchun alt matnni tekshirish.
Har choraklik audit: palitra/bosmaxona/ikonpak konsistentligi.

21) Namunalar

Keynote/Slides: titul, bo’lim, kontent, ma’lumotlar/jadval, final.
Ijtimoiy media: 1:1 avatar, 16:9 banner, 9:16 hikoyalar.
E-mail: salom, CTA, bildirishnoma, digest.
Lending: xero-blok, 3 ustunlik, vitrin, CTA, podval.

22) Qo’llash chek-varaqasi

• Logotip: to’g’ri variant, qo’riqlash zonasi, kontrast, o’lcham.
• Ranglar: faqat tokenlar; AA kontrasti.
• Shriftlar: iyerarxiya, satrlararo, targetlar o’lchamlari.
• Ikonkalar: 24 × 24 to’r, bitta chiziq qalinligi.
• Rasmlar: maqbul mavzu, matnning yuqoridan oʻqilishi.
• Qorong’u/yorqin mavzu: tekshirilgan, artefaktsiz.
• Lokalizatsiya/RTL: satrlar maketni «sindirmaydi».
• Yuridik/Responsible Gaming belgilari mavjud.

23) Joriy etish rejasi (3 ta iteratsiya)

• Logotiplar, palitralar, bosmaxona, bazaviy tokenlar, 24 × 24 piktogrammalar to’plami (asosiy 40-60 dona), taqdimot shablonlari va e-mail.

• Qorong’u mavzu, tokenlardagi UI-komponentlar (tugmalar, kartochkalar, jadvallar), grafiklar uchun gidlar, ijtimoiy media-pak, lending-shablon.

• Kengaytirilgan ikonpak, rasmlar, bosma maketlar, tokenlar uchun linter/CI, muntazam brend-auditlar.

24) Mini-FAQ

Maxsus aksiya uchun logotipni qayta boʻyash mumkinmi?
Faqat tasdiqlangan mavsumiy mavzularda va kontrastni/muhofaza zonasini buzmagan holda.

Birlamchi nima - tokenlar yoki maket?
Tokenlar. Maket ranglar/cheklovlar/bosmaxonaning tizimli oʻzgaruvchilaridan foydalanishi shart.

Bahsli vaziyatlarda qanday yoʻl tutish mumkin?
Identika omborida RFC ochish, misollarni ilova qilish, Brand Review dasturini oʻtkazish.

Jami

Gamble Hub - bu «rasmlar to’plami» emas, balki logotip, palitra, bosmaxona, ikonpak, tokenlar va sifatni nazorat qilish jarayonlari. Kontrast, ochiqlik va konsistentlik qoidalariga amal qiling, token va shablonlardan foydalaning va brend barcha mahsulot va kanallarda taniqli, zamonaviy va yagona bo’ladi.