Neon/Accent Gamble Hub uslubi

1) Konsepsiya va prinsiplar

Neon/Accent - bu vizual til bo’lib, unda asosiy sirt to’xtatilgan (dark-first) bo’lib qoladi va foydalanuvchining e’tibori qisqa neon chiroqlari bilan yo’naltiriladi: aksent konturlari, yoritgichlar, holatlarni yoritish va mikro-signallar. Maqsad: harakatni tez aniqlash (CTA, fokus, bildirishnoma) va ortiqcha yuklamasdan yuqori o’qish.

1. Aksent - dozalangan. 90/10: ekran maydonining 10 foizigacha «yorug’lik» bo’lishi mumkin.

2. Semantika brenddan muhimroqdir. Neon shunchaki «yorqinlik» emas, balki maʼnoni ajratib koʻrsatish usulidir.

3. Kontrast birlamchi. Har qanday yoritilgan obʼekt matnni oʻqishni kamaytirmaydi (minimal AA).

4. Ritm va pauza. Animatsiya qisqa, oldindan aytish mumkin, pauzalar va aniq fizika bilan.

5. Ishlash va foydalanish imkoniyati. Zaif qurilmalarda og’ir bulanish/soyalar yo’q; barcha effektlar HC rejimlarida sinovdan o’tkaziladi.

2) Rang va yorug’lik: palitra va rollar

2. 1 Asosiy sirtlar (dark-first)

’bg/base’ - engil shovqin/don bilan chuqur grafit (gradientlardagi «chiziqlar» ni kamaytiradi).
’bg/elevated’ - kartochkalar va modallar uchun biroz yorqinroq.
’fg/primary’ - deyarli oq, ammo sof emas (#FFF → L ≈ 0. 90 da OKLCH).

2. 2 Aksentli neonlar (OKLCH, mo’ljallar)

Cyber Blue: `oklch(0. 74 0. 16 250)’- asosiy brend-urg’u.
Electric Purple: `oklch(0. 70 0. 17 310)’- ketma-ketlik yoki o’yin voqealari uchun ikkilamchi.
Toxic Lime: `oklch(0. 82 0. 14 140)’- kamyob highlight (jekpot, g’alaba).
Alert Coral: `oklch(0. 72 0. 14 30)’- ogohlantirishlar/xatolar (tiyilgan «neon»).

2. 3 Qarama-qarshi juftliklar

Fonga matn/ikonkalar: ≥ 4. 5:1 (oddiy), ≥ 3:1 (katta/yogʻli).
Neon quyilgan matn: ≥ 4. 5:1. Yuqori’C’bilan’C _ text’ni 0 gacha pasaytiring. 01–0. 03.
Konturlar/piktogramma indikatorlari: ≥ 3:1.

3) O’qishga zarar yetkazmagan yorqin effektlar (glow)

3. 1 Yoritish shakllari

Outer Glow (yumshoq konturi): 1-2 ta noaniq halqa, radiusi masshtabga qarab 8-24 px.
Neon Stroke: yupqa chiziq 1-2 px yuqori yorqinlik + yumshoq tashqi soya.
Inset Glow: fokusdagi inputlar uchun ichki yoritish.

3. 2 Cheklovchilar

Hech qachon kuchli yorugʻlikning ustiga mayda matn qoʻymang.
Glow holatni almashtirmaydi; u shakl/ikona/ustun chizig’ini to’ldiradi.
Katta maydonlarda (banner/xeder) - shaffoflikni 20-35% gacha kamaytiring.

3. 3 Mavzularga moslashish

Yorug’lik mavzusida neon radiusi bo’yicha kuchsiz va qisqaroq, aks holda - «kislotali» ta’sir.
High-contrast - chiroqlar o’chiriladi, aniq kontur/ramka qoladi.

4) Bosmaxona va ierarxiya

Asosiy kontent kegli: 16-18 px; aniq masshtabli sarlavhalar (masalan, 12 nuqtali shkala).
Chizmalar: ultra-lightdan qochish; minimum Regular/Medium.
Satrlararo oraliq 1. 45–1. 6.
Matndagi urg’u - rang bilan emas, balki masshtab/og’irlik/ikonka bilan; rang - faqat qoʻshimcha rang sifatida.

5) To’rlar, ritm, fon

Ustunlar: 12 (desktop), 6 (tablet), 4 (mobile).
Gorizontal modul 8 px; vertikal - seksiyasiga qarab 8/12/16 px.
Orqa fon gradienti: asosiy CTA zonasidagi radial zaif «oreol».
Taktil shovqin (grain) L = ± 0. 02 - «plastmassasiz» chuqurlik uchun.

6) Komponentlar (patternlar)

6. 1 tugmalar

Primary:’brandNeon’+’on-primary’toʻldirish ≥ 4. 5:1, glow radiusi hover uchun 12-16 px.
Secondary: shaffof neon aylanma (1-2 px) va yumshoq outer glow bilan hover.
Tertiary: matnli, yoritilmagan, faqat chiziq/belgi.

• Hover: − Δ L fon (0. 02–0. 04) + engil glow.
• Active: quyuq, oʻchirilgan yoki kichiklashtirilgan glow.
• Focus: 2-3 px kontrastli halqa (noaniq), nafaqat rang.

6. 2 Kirish maydonlari

Default: neutral 1 px.
Focus: neon stroke + maydon ichidagi zaif inset glow; placeholder kamaytirilgan kontrast (lekin ≥ 3:1).
Error/Success: semantik rang konturi + piktogramma; glow minimal.

6. 3 Tablar/navigatsiya

Faol tovoq indikatori - neon liniyasi 2 px + yumshoq blur 8 px.
Xoverlar - kursor ostida oson yoritish (shadow spread 4-6 px).

6. 4 Kartochkalar/bannerlar

Turnir kartochkalari: butun ramka yoritilmasligi uchun burchaklardagi neon ramkasi (qisqa «burchaklar»).
Banneram - matn ostidagi qoraytirilgan niqob (overlay 40-60%), neon-fon kontentni yemasligi uchun.

7) Mikroqarz qilish va animatsiya

Davomiyligi: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (doklar/modalkalar).
Egri chiziq:’cubic-bezier (0. 2, 0. 0, 0. 2, 1) «moddiy» tuyg’u uchun.
Neon puls: cheksiz miltillamasdan hoverda bitta aylanish.
Tizimli voqealar (g’alaba/yutuq): 300-500 ms tezlikda yorug’lik chaqnashi.

8) Foydalanish imkoniyati va yuqori kontrast rejimlari

Barcha ma’nolar rang va yorqinliksiz mavjud: shakl, belgi, matn yorlig’i, ta’kidlash.
Qo’llab-quvvatlash’prefers-contrast’,’forced-colors’; yoqilganda - glow o’chirib qo’ying, ramka va quyishlarni kuchaytiring, kontrastlarni tekshiring.
Daltonizm uchun: biz yagona signal sifatida «qizil-yashil» juftligidan qochamiz; piktogramma va matndan foydalanamiz.

9) Unumdorlik

Katta blur va filter: blur () bilan box-shadowni minimallashtiring.
Soxta elementlar va kompozitor qatlamlari (transform/opacity) soyalarini afzal koʻring.
Mobil telefonlarda - animatsiyalarning «engil» preseti; past FPSda intensiv glow oʻchirilishi.
Neon-gradientlar - katta o’lchamlarda rastr assetalari (WebP/AVIF) sifatida renderlash.

10) Rang va uslub tokenlari (misol)

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-presetlar (parchalar)

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) Ma’lumotlarni vizualizatsiya qilish

Serial grafikalari: asosiy qator - neutral, ajratilgan qator - qalinligi va shakli ko’paytirilgan neon.
Nuqta/ustun: fonga 3:1 ≥; imzolar - 4- ≥. 5:1.
Tanlangan seriyaning yoritilishi - yumshoq outer glow (sm), doimiy miltillashsiz.

12) Kontent bloklari va promo

Promo-fon neonlaridagi matn har doim ploshkada/overleyda (40-60%), qat’iy kontrast bo’yicha.
«Glitch »/skan liniyalari - faqat kam uchraydigan urg’u sifatida, sahifasiga 2-3 seksiyadan ko’p bo’lmagan holda.

13) Ikonkalar va rasmlar

Ikonkalar - faol holatlar uchun neon shtrixli chiziqli/duoton.
Rasmlar - minimal quyilgan «neon konturi bo’yicha»; matn atrofida mayda porlashdan qochish.

14) Marketing vs mahsulot

Marketing bannerlari yuqori’C’xrom va murakkab yoritgichlardan foydalanishi mumkin.
Mahsulotda (shakllar, jadvallar, balanslar) - pasaytirilgan’C’, qisqa glow-effektlar va qat’iy kontrast.

15) iGaming uchun matnli qoidalar

Mas’ul bildirishnomalar (18 +, limitlar, KYC/AML, tavakkalchiliklar) - kontrast bo’yicha AAA, glowsiz.
Koeffitsientlar jadvallarida/peshqadamlarda - o’sish/tushishni faqat rang bilan emas, balki o’qlar/piktogrammalar va yog’bilan belgilang.

16) Mahalliylashtirish va moslashtirish

Kirill/lotin: kegl va harflararo oraliqlarning bir xil metrikasi.
Ikki qatorli CTA - matnda glow’ni o’chirib qo’ying, uni kontur/fon yonida qoldiring.
RTL - faqat yo’naltirilgan effektlarni aks ettiradi.

17) Revyu chek-varag’i (dizayn/ishlab chiqish)

Kontrast

• ≥ matni 4. 5:1; yirik ≥ 3:1; tizimli bildirishnomalar - AAA.

Glow

• Glow matn bilan kesishmaydi; prezetalar doirasida radius va alfa.

Holatlar

• Hover/Active/Focus faqat rang/yorugʻlik bilan emas, balki shakl bilan ham farqlanadi.

Unumdorlik

• Bir necha og’ir blurlarsiz; mobil telefonlar uchun «engil» preset mavjud.

Foydalanish imkoniyati

• High-contrast rejimi toʻgʻri (glow off, on doirasi).

Semantika

• Neon «go’zallik uchun» emas, balki ma’noni (harakat/fokus/maqom) aks ettiradi.

18) Anti-patternlar

Katta maydonlarning tinimsiz neon quyilishi → ko’zlarning charchashi.
Doimiy miltillash/pulsatsiya → tirnash xususiyati va kirish muammolari.
Yorqin glow ustidagi matn substratsiz.
Yagona signal - rang/porlash (shakl/ikona/chiziq yo’q).
Bitta ekranda kelishilmagan glow intensivligi (vizual «pyuresi»).

19) A/B va metrika

CTA tugmalari va kirish xatolari uchun glow (alfa/radius) intensivligini sinab koʻring.
Neon-fokus kiritilgandan keyin time-to-action va shakllardagi xatolarni kuzatish.
Ko’rish qulayligi bo’yicha UX-so’rovlar (ayniqsa uzoq sessiyalarda).

20) Dizayn-tizimdagi hujjatlar

«Neon/Accent» sahifasi: palitralar (mahsulot/marketing), glow tokenlari, komponent namunalari, video-demo mikro aloqalar.
«Kontrast matritsasi»:’fg × bg’i’-’uchun haqiqiy koeffitsiyentlar.
Frontend uchun preset-klasslar va snippetlar to’plami.

Qisqacha xulosa

Gamble Hub uchun Neon/Accent - nuqta, semantik, unumdor. Nur, qarama-qarshilik va qulaylikni buzmasdan, harakatlarga qaraydi. Dvigatel - tokenlar (OKLCH), «yengil» glow-presetlar, qat’iy holatlar, high-contrastda o’chiriladigan effektlar. Bu brendning yorqin xususiyatini beradi, lekin qulay va tez mahsulot boʻlib qolmoqda.