Neon/Accent tarzı Gamble Hub

1) Kavram ve ilkeler

Neon/Accent, ana yüzeyin gizli kaldığı (karanlık ilk) görsel bir dildir ve kullanıcının dikkati kısa neon flaşlarla yönlendirilir: vurgu konturları, parlamalar, durum aydınlatması ve mikro sinyaller. Amaç: Hızlı eylem algılama (CTA, odak, bildirim) ve aşırı yük olmadan yüksek okunabilirlik.

1. Accent - dozlanmış. 90/10: Ekran alanının %10'una kadar "ışık" olabilir.

2. Semantik markadan daha önemlidir. Neon, sadece "parlaklık'değil, anlamı vurgulamanın bir yoludur.

3. Kontrast önceliklidir. Herhangi bir aydınlık nesne metnin okunabilirliğini azaltmaz (AA minimum).

4. Ritim ve duraklama. Animasyon kısa, öngörülebilir, duraklamalar ve net fizik ile.

5. Performans ve kullanılabilirlik. Zayıf cihazlarda ağır bulanıklık/gölge yok; Tüm efektler HC modlarında test edilir.

2) Renk ve ışık: palet ve roller

2. 1 koyu-ilk

'bg/baz' - hafif gürültü/tahıl ile derin grafit (degradelerde "şeritleri" azaltır).
'bg/elevated' - kartlar ve modeller için biraz daha hafif.
'fg/birincil' - neredeyse beyaz, ama temiz değil (# FFF L≈0. OKLCH'de 90) parlamayı azaltmak için.

2. 2 Aksan neonları (OKLCH, yer işaretleri)

Cyber Blue: 'oklch (0. 74 0. 16,250)'ana marka aksanıdır.
Elektrik Mor: 'oklch (0. 70 0. 17 310) '- ikincil, dizi veya oyun olayları için.
Zehirli kireç: 'Oklch (0. 82 0. 14,140) 'nadir bir vurgulamadır (jackpot, kazan).
Coral'ı uyar: 'oklch (0. 72 0. 14 30) '- uyarılar/hatalar (kısıtlanmış "neon").

2. 3 Kontrast çifti

Arka plana metin/simgeler: ≥ 4. 5:1 (normal), ≥ 3:1 (büyük/yağlı).
Neon Dolgu Metni: ≥ 4. 5:1. Yüksek 'C'de,' C _ text 'değerini 0'a düşürün. 01–0. 03.
Anahatlar/gösterge simgeleri: Çevreye 3:1 ≥.

3) Okunabilirliğe zarar vermeden parlama efektleri

3. 1 Işıma biçimleri

Dış Işıma: Ölçeğe bağlı olarak 1-2 bulanıklaştırma halkası, yarıçapı 8-24 piksel.
Neon Kontur: ince çizgi 1-2 px yüksek parlaklık + yumuşak dış gölge.
Inset Glow: Odaktaki inpoot'lar için dahili "aydınlatma".

3. 2 Sınırlayıcılar

Asla yoğun ışımanın üstüne küçük metin yerleştirmeyin.
Işıma durumun yerini almaz; Şekil/simge/alt çizgiyi tamamlar.
Geniş alanlarda (banner/header) - ışımanın opaklığını %20-35'e düşürün.

3. 3 Temalara uyum sağlama

Işık temasında, neon yarıçapı daha zayıf ve daha kısadır, aksi takdirde bir "asit" etkisi vardır.
Yüksek kontrastta - ışıklar kapatılır, net bir anahat/çerçeve kalır.

4) Tipografi ve hiyerarşi

Temel içerik boyutu: 16-18 piksel; Ölçek başlıklarını temizleyin (örneğin, 12 noktalı ölçek).
Stil: ultra ışıktan kaçının; Düzenli/Orta minimum.
Satır aralığı 1. 45–1. 6.
Metindeki vurgu renk değil, ölçek/ağırlık/simge üzerindedir; renk - sadece ek olarak.

5) Izgaralar, ritim, arka plan

Sütunlar: 12 (masaüstü), 6 (tablet), 4 (mobil).
Yatay modül 8 px; Dikey - bölüme bağlı olarak 8/12/16 px.
Arka plan gradyanı: anahtar CTA bölgesinde radyal zayıf "hale".
Dokunsal gürültü (tane) L = ± 0. 02 - "plastik" olmadan derinlik için.

6) Bileşenler (desenler)

6. 1 Düğmeler

Birincil: 4 ≥ 'brandNeon' +'on-primary 'metnini doldurun. 5:1, ışıma yarıçapı 12-16 px açık.
İkincil: neon kontur (1-2 px) ve yumuşak dış ışıma ile şeffaf.
Üçüncül: metinsel, parlama yok, yalnızca alt çizgi/simge.

• Hover: − Δ L arka plan (0. 02–0. 04) + ışık parlaması.
• Etkin: koyu dolgu, kaldırılmış veya azaltılmış ışıma.
• Odak: Kontrast halkası 2-3 px (bulanıklık yok), sadece renk değil.

6. 2 Giriş alanları

Varsayılan: nötr 1 px ince çerçeve.
Odak: neon kontur + alanın içindeki zayıf iç metin ışıması; Azaltılmış kontrast yer tutucu (ancak ≥ 3:1).
Hata/Başarı: anlamsal renk anahattı + simge; Minimum parıltı.

6. 3 Sekmeler/gezinme

Etkin sekme göstergesi - neon satır 2 px + yumuşak bulanıklık 8 px.
Vurgulu - imlecin altında ışık aydınlatması (gölge yayılımı 4-6 px).

6. 4 Kartlar/Afişler

Turnuva kartları: köşelerde çerçeve neonu (kısa "köşeler"), böylece çerçevenin tamamı parlamaz.
Afişler - metnin altında karartılmış bir maske (%40-60 yer kaplaması), böylece neon arka plan içeriği "yemez".

7) Mikro etkileşimler ve animasyon

Süreler: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (dock/modals).
Eğri: 'kübik-bezier (0. 2, 0. 0, 0. 2, 1) '"maddi'bir his için.
Neon nabzı: Gezinme başına bir döngü, sonsuz yanıp sönme yok.
Sistem olayları (kazan/başarma): Zayıflama ile 300-500 ms arka ışık kısa bir patlama.

8) Kullanılabilirlik ve yüksek kontrast modları

Tüm anlamlar renk ve parıltı olmadan kullanılabilir: şekil, simge, metin etiketi, alt çizgi.
'Prefers-contrast', 'forced-colors' desteği; Açıldığında - parlamayı kapatın, çerçeveleri ve dolguları güçlendirin, kontrastları kontrol edin.
Renk körlüğü için: tek sinyal olarak kırmızı-yeşil çifti önlemek; Piktogramlar ve metinler kullanın.

9) Performans

Büyük bir bulanıklık ve filtreyle kutu gölgesini en aza indirin: Birden çok öğe üzerinde bulanıklık ().
Sözde öğeli gölgeleri ve katman oluşturucuları (transform/opacity) tercih edin.
Mobilde - animasyonların "hafif'bir ön ayarı; Düşük FPS'de yoğun parlamayı devre dışı bırakır.
Neon degradeleri - büyük boyutlarda raster varlıkları (WebP/AVIF) olarak oluşturulur.

10) Renk ve stil belirteçleri (örnek)

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ı (parçalar)

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) Veri görselleştirme

Seri grafikler: ana satır nötrdür, vurgulanan satır artan kalınlık ve şekil işaretleyicileri ile neondur.
Noktalar/sütunlar: Arka plana 3:1 ≥; İmzalar - ≥ 4. 5:1.
Seçilen serinin aydınlatması, sürekli titreme olmadan yumuşak dış parıltıdır (sm).

12) İçerik blokları ve tanıtımları

Promosyon arka plan neonlarındaki metin - her zaman bir plaka/kaplama üzerinde (%40-60), kesinlikle aksine.
"Glitch "/tarama hatları - sadece nadir bir vurgu olarak, sayfa başına en fazla 2-3 bölüm.

13) Simgeler ve resimler

Simgeler - etkin durumlar için neon konturlu doğrusal/duoton.
Çizimler - minimum dolgu ile "kontur boyunca neon"; Metnin etrafında küçük bir parlamadan kaçının.

14) Pazarlama vs ürün

Pazarlama afişleri daha yüksek 'C' krom ve karmaşık ışımalar kullanabilir.
Üründe (formlar, tablolar, denge) - azaltılmış 'C', kısa parlama efektleri ve katı kontrast.

15) iGaming için Metinsel Kurallar

Kritik bildirimler (18 +, limitler, KYC/AML, riskler) - Aksine AAA, parlama yok.
Katsayı tablolarında/skor tablolarında - büyümeyi/düşüşü sadece renkle değil, oklarla/simgelerle ve yağ içeriğiyle gösterir.

16) Yerelleştirme ve adaptasyon

Kiril/Latin: Aynı pin ve harf aralığı metrikleri.
İki satırlı CTA - metin için ışımayı devre dışı bırakın, kontur/arka planda bırakın.
RTL - ayna sadece yönlü efektler (köşeler/vurgular).

17) İnceleme kontrol listesi (tasarım/geliştirme)

Kontrast

• Metin ≥ 4. 5:1; Büyük ≥ 3:1; Sistem bildirimleri - AAA.

Işıma

• Işıma metinle örtüşmüyor; Hazır ayarlar içinde yarıçap ve alfa.

Devletler

• Hover/Active/Focus sadece renk/ışık değil, şekil ile ayırt edilebilir.

Performans

• Birden fazla ağır bulanıklık olmadan; Mobil cihazlar için bir "ışık" ön ayarı vardır.

Kullanılabilirlik

• Yüksek kontrastlı mod doğrudur (parlama kapalı, kareler açık).

Semantik

• Neon, "güzellik için'değil, anlamı (eylem/odak/durum) yansıtır.

18) Anti-desenler

Geniş alanların katı neon dolguları - göz yorgunluğu.
Sürekli titreme/dalgalanma - tahriş ve erişilebilirlik sorunları.
Altlık olmadan parlak parıltı üzerine metin.
Tek sinyal renk/ışıma (şekil/simge/alt çizgi yok).
Bir ekranda tutarsız parlama yoğunlukları (görsel "yulaf lapası").

19) A/B ve metrikler

TO CTA düğmeleri ve giriş hataları için ışıma yoğunluğunu (alfa/yarıçap) test edin.
Neon odağını girdikten sonra harekete geçme süresi ve form hatalarını izleme.
Görsel konfor üzerine UX anketleri (özellikle uzun oturumlarda).

20) Tasarım sistemindeki belgeler

"Neon/Accent" sayfası: paletler (ürün/pazarlama), kızdırma belirteçleri, bileşen örnekleri, mikro etkileşimlerin video demosu.
"Kontrast matris": 'fg × bg've'on' için gerçek katsayılar.
Ön uç için hazır ayar sınıfları ve parçacıklar kümesi.

Kısa Özet

Gamble Hub için Neon/Accent - nokta, anlamsal, üretken. Işık, bakışı kontrast ve konforu bozmadan harekete geçirir. Motor - belirteçleri (OKLCH), "ışık" ışıma ön ayarları, katı durumlar, yüksek kontrastta devre dışı bırakılmış efektler. Bu, markanın parlak karakterini verir, ancak kullanışlı ve hızlı bir ürün olarak kalır.