Neon/Accent Style Gamble Hub

1) Концепция жана принциптер

Neon/Accent - бул негизги бети токтоо (dark-first) жана колдонуучунун көңүлү кыска неон жаркылдаган: акценттүү контурлар, жаркыраган, жаркыраган абалдар жана микро сигналдар. Максаты: тез аныктоо иш-аракет (CTA, Focus, эскертүү) жана жогорку окуу ашыкча жок.

1. Акцент - дозаланган. 90/10: экран аянттын 10% чейин "жарык" болушу мүмкүн.

2. Семантика брендден маанилүү. Неон - бул жөн гана "жаркырактык" эмес, маанини бөлүп көрсөтүүнүн жолу.

3. Контраст негизги болуп саналат. Ар бир жаркыраган объект тексттин окулушун азайтпайт (минималдуу AA).

4. Ритм жана тыныгуу. Анимация кыска, алдын ала айтууга болот, тыныгуулар жана так физика менен.

5. Аткаруу жана жеткиликтүүлүгү. алсыз түзмөктөрдө эч кандай оор бүдөмүк/көлөкө; бардык эффекттер HC режимдеринде сыналат.

2) Түсү жана жарык: палитра жана ролдору

2. 1 Негизги беттер (dark-first)

'bg/base' - бир аз ызы-чуу/дан менен терең графит (градиенттерде "тилкелерди" азайтат).
'bg/elevated' - карталар жана модалар үчүн бир аз жарык.
'fg/primary' - дээрлик ак, бирок таза эмес (#FFF → L ≈ 0. 90 боюнча OKLCH) жарык азайтуу үчүн.

2. 2 Басым неондор (OKLCH, көрсөтмөлөр)

Cyber Blue: `oklch(0. 74 0. 16 250) '- негизги бренд-басым.
Electric Purple: `oklch(0. 70 0. 17 310) '- экинчилик, ырааттуулук же оюн окуялары үчүн.
Toxic Lime: `oklch(0. 82 0. 14 140) '- сейрек highlight (джекпот, жеңиш).
Alert Coral: `oklch(0. 72 0. 14 30) '- эскертүүлөр/каталар (токтоо "неон").

2. 3 Карама-каршы түгөйлөр

Текст/фон иконалары: ≥ 4. 5:1 (кадимки), ≥ 3:1 (чоң/майлуу).
Неон куюуга текст: ≥ 4. 5:1. Жогорку 'C' менен 'C _ text' 0 чейин азайтыңыз. 01–0. 03.
Контурлар/сөлөкөт көрсөткүчтөр: ≥ 3:1 айлана-чөйрөгө.

3) жаркыраган таасирлери (glow) окууга зыян жок

3. 1 жаркыраган түрлөрү

Outer Glow (жумшак контур): 1-2 бүдөмүк шакек, радиусу масштабына жараша 8-24 px.
Neon Stroke: 1-2 px жогорку жарыктык + жумшак тышкы көлөкө жука сызык.
Inset Glow: ички "жарык" фокуста инсуттар үчүн.

3. 2 Чектегичтер

Эч качан интенсивдүү жаркыроонун үстүнө майда текстти жайгаштырбаңыз.
Glow абалын алмаштырбайт; Бул форма/сөлөкөт/баса толуктайт.
Чоң аянттарда (баннер/хедер) - жаркыраган тунуктукту 20-35% чейин азайтыңыз.

3. 3 Темаларга ылайыкташуу

Жарык темада неон радиусу боюнча алсызыраак жана кыска, антпесе - "кислоталык" эффект.
high-contrast - жарык өчүп, так контур/кадр бойдон калууда.

4) Типография жана иерархия

Негизги мазмун кегли: 16-18 px; так масштабдуу аталыштар (мисалы, 12 чекиттүү шкала).
Чиймелер: ultra-light качуу; минималдуу Regular/Medium.
Жол аралык интервал 1. 45–1. 6.
Текстте басым - түсү менен эмес, масштабы/салмагы/сөлөкөтү менен; түс - кошумча катары гана.

5) Торлор, ритм, фон

Мамычалар: 12 (desktop), 6 (tablet), 4 (mobile).
Горизонталдык модулу 8 px; тик - 8/12/16 px бөлүмүнө жараша.
Фон градиенти: негизги CTA зонасында радиалдык алсыз "ореол".
Тактиль ызы-чуу (grain) L = ± 0. 02 - "пластикалык" жок тереңдик үчүн.

6) компоненттери (үлгүлөрү)

6. 1 баскычтары

Primary: толтуруу 'brandNeon' + 'on-primary' текст ≥ 4. 5:1, glow радиусу 12-16 px hover.
Secondary: неон айлампасы менен тунук (1-2 px) жана hover менен жумшак outer glow.
Tertiary: текст, жарык жок, бир гана баса/сөлөкөт.

• Hover: − Δ L фон (0. 02–0. 04) + жарык жарык.
• Active: караңгы куюп, алынып салынган же кыскартылган glow.
• Focus: 2-3 px каршы шакек (бүдөмүк жок), бир гана түс эмес.

6. 2 Киргизүү талаалары

Default: ичке кадр neutral 1 px.
Focus: neon stroke + талаанын ичинде алсыз inset glow; placeholder кыскартылган контраст (бирок ≥ 3:1).
Error/Success: семантикалык түстөгү контур + пиктограмма; glow минималдуу.

6. 3 Tab/багыттоо

Индикатор активдүү табак - неон сызык 2 px + жумшак blur 8 px.
Hovers - курсор астында жарык (shadow spread 4-6 px).

6. 4 Карталар/баннерлер

Турнирлердин карталары: бурчтардагы (кыска "бурчтар") неон алкагы, бүт алкак жаркырап кетпеши үчүн.
Баннерлер - текст астындагы караңгылатылган маска (40-60% overlay), ошондуктан неон-фон мазмунду "жебейт".

7) Микро иш-аракеттер жана анимация

Узундугу: 120-200 мс (hover), 180-240 мс (focus/active), 240-320 мс (доктор/модалдар).
Ийри сызык: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) "материалдык" сезим үчүн.
Neon-пульс: чексиз жарк эткен жок, hover бир цикл.
Системалуу окуялар (жеңиш/жетишүү): 300-500 мс өчүрүү менен жарык кыска.

8) Жеткиликтүүлүк жана жогорку контрасттык режимдери

Бардык мааниси эч кандай түс жана жаркыраган бар: форма, сөлөкөт, текст белги, баса.
Колдоо 'prefers-contrast', 'forced-colors'; күйгүзгөндө - жарыкты өчүрүп, рамкаларды жана боёкторду бекемдейбиз, карама-каршылыктарды текшеребиз.
көлөкө үчүн: бир сигнал катары "кызыл-жашыл" жуп качуу; Биз пиктограммаларды жана текстти колдонобуз.

9) аткаруу

чоң blur жана filter менен минималдаштыруу box-shadow: blur () элементтердин көп.
Pseudoelements жана композиторлор катмарынын көлөкө артык (transform/opacity).
Уюлдук - "жеңил" Animation Preset; төмөн FPS менен интенсивдүү glow өчүрүү.
Неон-градиенттер - чоң өлчөмдөгү растр assets (WebP/AVIF) катары рендерлөө.

10) Түстөр жана стилдер белгилер (мисал)

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 Presets (үзүндүлөр)

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) Маалыматтарды визуалдаштыруу

Сериялык графика: негизги катар - neutral, бөлүнгөн катар - калыңдыгы жана формасынын маркерлери жогорулаган неон.
Чекиттер/тилкелер: ≥ 3:1 фон; кол тамгалар - ≥ 4. 5:1.
тандалган сериясы Lighting - жумшак outer glow (см), туруктуу жылтылдаган жок.

12) Мазмун блоктору жана промо

Промо-фон неондорунда текст - ар дайым плашкада/оверледе (40-60%), катуу карама-каршылыкта.
"Glitch "/сканерлөө линиялары - сейрек кездешүүчү басым катары гана, бир баракка 2-3 секциядан ашпайт.

13) Сөлөкөттөр жана иллюстрациялар

Иконалар - активдүү абалдар үчүн неон штрих менен сызыктуу/дуотон.
Иллюстрациялар - минималдуу куюлган "контур боюнча неон"; тексттин айланасында майда жарык болбоого.

14) Маркетинг vs продукт

Маркетинг баннерлер жогорку Chrome 'C' жана татаал жаркыраган колдоно аласыз.
Буюмда (формалар, таблицалар, баланс) - төмөндөтүлгөн 'C', кыска glow-эффекттер жана катуу контраст.

15) iGaming үчүн текст эрежелери

Жоопкерчиликтүү билдирүүлөр (18 +, лимиттер, KYC/AML, тобокелдиктер) - AAA контраст боюнча, glow жок.
Коэффициенттердин таблицаларында/лидбордддордо - өсүү/төмөндөө түсү менен гана эмес, жебелер/пиктограммалар жана майлуулугу менен белгиленет.

16) Локализация жана адаптация

Кириллица/латын ариби: кегль жана буква аралык интервалдардын бирдей метриктери.
Эки саптуу CTA - тексттин алдында glow өчүрүп, аны обводдо/фонунда калтырабыз.
RTL - күзгү гана багытталган эффекттер (бурчтар/жарыктар).

17) Review текшерүү тизмеси (дизайн/иштеп чыгуу)

Контраст

• Текст ≥ 4. 5:1; ири ≥ 3:1; системалык билдирүүлөр - AAA.

Glow

• Glow текст менен кесилишпейт; радиус жана альфа пресеттердин чегинде.

Мамлекет

• Hover/Active/Focus гана түс/жарык эмес, түрү менен айырмаланат.

Өндүрүмдүүлүк

• Жок бир нече оор blur; мобилдик үчүн "жеңил" пресет бар.

Жеткиликтүүлүк

• High-contrast режими туура (glow off, on алкактары).

Семантика

• Неон маанисин чагылдырат (аракет/фокус/статус), "сулуулук үчүн" эмес.

18) Анти-үлгүлөрү

Чоң аянттардын үзгүлтүксүз неон куюулары → көз чарчоо.
Туруктуу жылтылдоо/пульсация → кыжырдануу жана жеткиликтүүлүк көйгөйлөрү.
субстрат жок жаркыраган glow үстүнөн текст.
гана белги - түс/жарык (эч кандай түрү/сөлөкөт/баса).
Бир экранда макулдашылбаган glow интенсивдүүлүгү (визуалдык "ботко").

19) A/B жана метрика

CTR CTA баскычтарында жана киргизүү каталар боюнча glow интенсивдүүлүгүн (альфа/радиус) сыноо.
Time-to-action жана neon-фокусту киргизгенден кийин ката формаларын көзөмөлдөө.
UX-сурамжылоолор көрүүчүлөрдүн ыңгайлуулугу боюнча (өзгөчө узун сессияларда).

20) Дизайн системасында документтер

"Neon/Accent" бети: палитралар (продукт/маркетинг), glow токендери, компоненттердин мисалдары, видео-демо микро-аракеттер.
"Контраст матрицасы": 'fg × bg' и 'on-' үчүн иш жүзүндөгү коэффициенттер.
Фронтенд үчүн preset класстар жана сниппеттер топтому.

Кыскача резюме

Gamble Hub үчүн Neon/Accent - чекит, семантикалык, өндүрүмдүү. Жарык карама-каршылыкты жана ыңгайлуулукту бузбастан, иш-аракет үчүн көз карашты багыттайт. Кыймылдаткыч - токендер (OKLCH), "жарык" glow-алдын ала жазуулар, катуу шарттар, high-contrast өчүрүү таасирлери. Бул бренддин жаркын мүнөзүн берет, бирок ыңгайлуу жана тез продукт бойдон калууда.