Neon/Accent üslubu Gamble Hub

1) Konsepsiya və prinsiplər

Neon/Accent - əsas səthin təmkinli qaldığı (dark-first) vizual dildir və istifadəçinin diqqəti qısa neon flaşları ilə yönəldilir: vurğu konturları, parıltılar, halların işıqlandırılması və mikro siqnallar. Məqsəd: hərəkətin sürətli aşkarlanması (CTA, fokus, bildiriş) və həddindən artıq yüklənmədən yüksək oxunuş.

1. Aksent - dozalı. 90/10: Ekran sahəsinin 10% -ə qədər «işıq» ola bilər.

2. Semantika brenddən daha vacibdir. Neon yalnız «parlaqlıq» deyil, mənanı vurğulamağın bir yoludur.

3. Kontrast birincidir. Hər hansı bir parlaq obyekt mətnin oxunuşunu azaltmır (minimum AA).

4. Ritm və fasilə. Animasiya qısa, proqnozlaşdırıla bilən, fasilələr və aydın fizika ilə.

5. Performans və mövcudluq. Zəif cihazlarda ağır bulanıqlıq/kölgə yoxdur; bütün effektlər HC rejimlərində sınaqdan keçirilir.

2) Rəng və işıq: Palitra və rollar

2. 1 Əsas səthlər (dark-first)

'bg/base' - yüngül səs-küy/taxıl ilə dərin qrafit (qradiyentlərdə «zolaqları» azaldır).
'bg/elevated' - kartlar və moda üçün bir az daha yüngül.
'fg/primary' - demək olar ki, ağ, lakin təmiz deyil (#FFF → L ≈ 0. 90-da OKLCH) parıltıları azaltmaq üçün.

2. 2 Vurğu neonları (OKLCH, işarələr)

Cyber Blue: `oklch(0. 74 0. 16 250) '- əsas marka-vurğu.
Electric Purple: `oklch(0. 70 0. 17 310) '- ardıcıllıq və ya oyun hadisələri üçün ikincidir.
Toxic Lime: `oklch(0. 82 0. 14 140) '- nadir highlight (cekpot, qələbə).
Alert Coral: `oklch(0. 72 0. 14 30) '- xəbərdarlıqlar/səhvlər (təmkinli «neon»).

2. 3 Kontrast cütlər

Fon üçün mətn/nişanlar: ≥ 4. 5:1 (adi), ≥ 3:1 (böyük/yağlı).
Neon doldurma mətni: ≥ 4. 5:1. Yüksək 'C' -də 'C _ text' -ni 0-ə endirin. 01–0. 03.
Konturlar/nişan göstəriciləri: ≥ 3:1.

3) Oxuma qabiliyyətinə zərər vermədən parlaq effektlər

3. 1 Parıltı formaları

Outer Glow (yumşaq kontur): 1-2 bulanıq ring, radius 8-24 px miqyasından asılı olaraq.
Neon Stroke: nazik xətt 1-2 px yüksək parlaqlıq + yumşaq xarici kölgə.
Inset Glow: fokusda Inset üçün daxili «işıqlandırma».

3. 2 Məhdudlaşdırıcılar

Heç vaxt intensiv parıltı üzərində kiçik mətn yerləşdirməyin.
Glow vəziyyəti əvəz etmir; forma/ikona/vurğulamanı tamamlayır.
Böyük sahələrdə (banner/heder) - parıltının qeyri-şəffaflığını 20-35% -ə endirin.

3. 3 Mövzulara uyğunlaşma

Yüngül mövzuda neon radius baxımından daha zəif və qısadır, əks halda - «turşu» effekti.
High-contrast - parıltı söndürülür, aydın kontur/çərçivə qalır.

4) Mətbəə və iyerarxiya

Əsas məzmun kegle: 16-18 px; aydın miqyaslı başlıqlar (məsələn, 12 nöqtəli şkala).
Cədvəllər: ultra-işıqdan qaçın; minimum Regular/Medium.
Sətirlərarası interval 1. 45–1. 6.
Mətndə vurğu - rəngdə deyil, miqyasda/çəkidə/ikonada; rəng - yalnız əlavə kimi.

5) Mesh, ritm, fon

Sütunlar: 12 (desktop), 6 (tablet), 4 (mobile).
Üfüqi modul 8 px; şaquli - seksiyasından asılı olaraq 8/12/16 px.
Fon qradiyenti: əsas CTA zonasında radial zəif «halo».
Toxunma səs-küy (grain) L = ± 0. 02 - «plastik» olmadan dərinlik üçün.

6) Komponentlər (nümunələr)

6. 1 düymələr

Primary: doldurma 'brandNeon' + 'on-primary' mətn ≥ 4. 5:1, glow radius hover 12-16 px.
Secondary: neon konturlu şəffaf (1-2 px) və hover ilə yumşaq outer glow.
Tertiary: mətn, heç bir parıltı, yalnız vurğulama/ikona.

• Hover: − Δ L fon (0. 02–0. 04) + yüngül glow.
• Active: daha qaranlıq doldurma, silinmiş və ya azaldılmış glow.
• Focus: kontrast ring 2-3 px (bulanıq olmadan), yalnız rəng deyil.

6. 2 Giriş sahələri

Default: nazik çərçivə neutral 1 px.
Focus: neon stroke + sahə daxilində zəif inset glow; azalmış kontrast placeholder (lakin ≥ 3:1).
Error/Success: semantik rəng konturu + piktoqram; glow minimum.

6. 3 Tablar/naviqasiya

Aktiv lövhə göstəricisi - neon xətti 2 px + yumşaq blur 8 px.
Hovers - kursor altında yüngül işıqlandırma (shadow spread 4-6 px).

6. 4 Kart/Banner

Turnirin kartları: bütün çərçivənin parıldamaması üçün künclərdə (qısa «künclər») neon çərçivəsi.
Banneram - mətn altında qaranlıq maska (overlay 40-60%), neon-fon məzmunu «yemir».

7) Mikrodalğa və animasiya

Uzunluğu: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (doklar/modallar).
Əyri: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) «maddi» hiss üçün.
Neon-pulse: sonsuz yanıb-sönmədən hover bir dövr.
Sistemli hadisələr (qələbə/nailiyyət): 300-500 ms azalma ilə qısa işıq sıçrayışı.

8) Əlçatanlıq və yüksək kontrast rejimləri

Bütün mənalar rəng və parıltı olmadan mövcuddur: forma, ikona, mətn etiketi, vurğulama.
Dəstək 'prefers-contrast', 'forced-colors'; Açdıqda - glow-u söndürürük, çərçivə və doldurmaları gücləndiririk, təzadları yoxlayırıq.
Renk tonizmi üçün: yeganə siqnal kimi «qırmızı-yaşıl» cütündən qaçırıq; piktoqramlardan və mətndən istifadə edirik.

9) Performans

Bir çox elementdə böyük blur və filter: blur () ilə box-shadow-u minimuma endirin.
Pseudo elementlərdən və kompozitorlardan (transform/opacity) kölgələrə üstünlük verin.
Mobil - «yüngül» animasiya preseti; aşağı FPS intensiv glow off.
Neon qradiyentlər - böyük ölçülü raster assetləri (WebP/AVIF) kimi renderləşdirilir.

10) Rəng və üslub tokenləri (nümunə)

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 hazır ayarları (fraqmentlər)

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) Verilənlərin vizuallaşdırılması

Serial qrafikləri: əsas sıra - neutral, xüsusi sıra - artan qalınlığı və forma işarələri ilə neon.
Nöqtələr/sütunlar: fona ≥ 3:1; imzalar - ≥ 4. 5:1.
Seçilmiş seriyanın işıqlandırılması - yumşaq outer glow (sm), daimi parıltı olmadan.

12) Məzmun blokları və promo

Promo-fon neonlarında mətn - həmişə splash/overlay (40-60%), ciddi kontrast.
«Glitch »/skan xətləri - yalnız nadir vurğu kimi, səhifə başına 2-3 bölmədən çox deyil.

13) Simvollar və illüstrasiyalar

Nişanlar - aktiv hallar üçün neon ştrixli xətti/duoton.
İllüstrasiyalar - minimal doldurma ilə «kontur boyunca neon»; mətn ətrafında kiçik parıltı qarşısını almaq.

14) Marketinq vs məhsul

Marketinq bannerləri daha yüksək 'C' xrom və mürəkkəb parıltı istifadə edə bilər.
Məhsulda (formalar, cədvəllər, balans) - azaldılmış 'C', qısa glow effektləri və ciddi kontrast.

15) iGaming üçün mətn qaydaları

Məsuliyyətli bildirişlər (18 +, limitlər, KYC/AML, risklər) - AAA kontrast, glow olmadan.
Əmsal cədvəllərində/Liderbordlarda - böyümə/düşmə yalnız rənglə deyil, oxlarla/piktogramlarla və yağlılıqla işarə edin.

16) Lokalizasiya və uyğunlaşma

Kiril/latın əlifbası: keql və hərflərarası intervalların eyni metrikləri.
İki sətirli CTA - mətndə glow-u söndürün, kontur/fonda buraxın.
RTL - güzgü yalnız yönlü effektlər (künclər/parıltı).

17) Review check-list (dizayn/inkişaf)

Kontrast

• Mətn ≥ 4. 5:1; böyük ≥ 3:1; sistem bildirişləri - AAA.

Glow

• Glow mətn ilə üst-üstə düşmür; ön ayarlar daxilində radius və alfa.

Dövlət

• Hover/Active/Focus yalnız rəng/işıq deyil, forma ilə fərqlənir.

Performans

• Heç bir çox ağır blur; mobil üçün «yüngül» preset var.

Mövcudluq

• High-contrast rejimi düzdür (glow off, on çərçivə).

Semantika

• Neon «gözəllik üçün» deyil, mənanı (hərəkət/fokus/status) əks etdirir.

18) Anti-nümunələr

Böyük sahələrin davamlı neon doldurulması → gözlərin yorulması.
Daimi titrəmə/dalğalanma → qıcıqlanma və əlçatanlıq problemləri.
substrat olmadan parlaq glow üzərində mətn.
Yeganə siqnal rəng/parıltı (forma/ikona/vurğulama yoxdur).
Bir ekranda razılaşdırılmamış glow intensivliyi (vizual «sıyıq»).

19) A/B və metrika

CTR CTA düymələri və giriş səhvləri üzərində glow intensivliyini (alfa/radius) test edin.
Neon-fokusu daxil etdikdən sonra time-to-action və forma səhvlərini izləmək.
UX sorğuları (xüsusilə uzun sessiyalarda).

20) Dizayn sistemində sənədləşmə

«Neon/Accent» səhifəsi: palitralar (məhsul/marketinq), glow tokenləri, komponent nümunələri, video-demo mikro əlaqələri.
«Kontrast matrisi»: 'fg × bg' və 'on-' üçün faktiki əmsallar.
Frontend üçün preset sinif və snippet dəsti.

Qısa xülasə

Gamble Hub üçün Neon/Accent - nöqtəli, semantik, məhsuldar. İşıq kontrast və rahatlığı pozmadan hərəkətə baxır. Mühərrik - tokenlər (OKLCH), «yüngül» glow-presetlər, ciddi vəziyyətlər, high-contrast-da söndürülə bilən effektlər. Bu brendin parlaq xarakterini verir, lakin rahat və sürətli məhsul olaraq qalır.