Neon/Accent Gamble Hub стилі

1) Тұжырымдама және қағидаттар

Neon/Accent - бұл көрнекі тіл, онда негізгі бет ұстамды (dark-first) болып қалады, ал пайдаланушының назары қысқа неондық жарқылдармен: акцентті контурлармен, жарқылдармен, жай-күйлерді жарықтандырумен және микро-сигналдармен бағытталады. Мақсаты: әрекетті жылдам анықтау (CTA, фокус, хабарлама) және шамадан тыс жүктемесіз жоғары оқылым.

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) + жеңіл glow.
• 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 Табалар/навигация

Белсенді табақ индикаторы - неон сызығы 2 px + жұмсақ blur 8 px.
Ховерлер - меңзердің астында жеңіл жарық (shadow spread 4-6 px).

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

Турнирлердің карточкалары: рама-неон бұрыштары бойынша (қысқа «бұрыштар»), бүкіл рама жарқырамауы үшін.
Баннерлер - неон-фон контентті «жемеуі» үшін мәтін астындағы қараңғыланған маска (overlay 40-60%).

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

Ұзақтығы: 120-200 мс (hover), 180-240 мс (focus/active), 240-320 мс (доктар/модалкалар).
Қисық: 'cubic-bezier (0. 2, 0. 0, 0. 2. 1) «материалдық» сезім үшін.
Неон-пульс: hover бір цикл, шексіз жыпылықтамай.
Жүйелiк оқиғалар (жеңiс/жетiстiк): 300-500 мс жарықтандырудың қысқа жарқылдауы.

8) Қол жетімділік және жоғары контрастылық режимдері

Барлық мағыналар түсі мен жарқырауынсыз қолжетімді: пішін, белгі, мәтіндік лейбл, астын сызу.
'prefers-contrast', 'forced-colors'; қосылғанда - glow ажыратамыз, рамкалар мен құймаларды күшейтеміз, қарама-қайшылықтарды тексереміз.
Дальтонизм үшін: жалғыз сигнал ретінде «қызыл-жасыл» жұбынан аулақ боламыз; пиктограммалар мен мәтінді пайдаланамыз.

9) Өнімділік

Көптеген элементтерде үлкен blur және filter: blur () бар box-shadow бағдарламасын барынша азайтыңыз.
Жалған элементтердің көлеңкелерін және композиторлық қабаттарды (transform/opacity) таңдаңыз.
Ұялы телефондарда - анимацияның «жеңіл» пресеті; төмен FPS кезінде қарқынды glow ажыратылады.
Неон-градиенттер - үлкен мөлшерде растрлық ассеттер (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 пресеттері (үзінділер)

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.
Таңдалған серияның жарықтандырылуы - жұмсақ outer glow (sm), тұрақты жыпылықтаусыз.

12) Контенттік блоктар және промо

Промо-фондық неондардағы мәтін әрқашан плашкада/оверледе (40-60%), қатаң түрде қарама-қарсылық бойынша.
«Глитч »/скан-сызықтар - тек сирек акцент ретінде, бір бетте 2-3 секциядан аспайды.

13) Иконалар мен иллюстрациялар

Иконалар - белсенді күйге арналған неонды штрихі бар сызықтық/дуотон.
Иллюстрациялар - «неон контур бойынша» ең аз құйылған; мәтіннің айналасында ұсақ жарқылдауды болдырмау.

14) Маркетинг vs өнім

Маркетингтік баннерлер жоғары 'C' хромын және күрделі жарқырауды пайдалана алады.
Өнімде (пішіндер, кестелер, теңгерім) - төмендетілген 'C', қысқа glow-эффектілер және қатаң контраст.

15) iGaming үшін мәтіндік ережелер

Жауапты хабарламалар (18 +, лимиттер, KYC/AML, тәуекелдер) - AAA контраст бойынша, glow жоқ.
Коэффициенттер кестелерінде/лидбордтарда - өсу/құлау түсімен ғана емес, бағыттамалармен/пиктограммалармен және майлылығымен белгілеңіз.

16) Оқшаулау және бейімдеу

Кириллица/латынша: кегль мен әріпаралық аралықтардың бірдей өлшемдері.
Екі жолды CTA - мәтіннің жанында glow өшіріңіз, оны жиектің/аяның жанында қалдырыңыз.
RTL - тек бағытталған әсерлер (бұрыштар/бликтер).

17) Ревью чек-парағы (дизайн/әзірлеу)

Қарама-қарсылық

• ≥ мәтіні 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 (альфа/радиус) қарқындылығын тестілеңіз.
Neon-фокусты енгізгеннен кейін time-to-action және пішін қателерін қадағалау.
Көрермендер жайлылығы бойынша UX-сауалнамалар (әсіресе ұзақ сессияларда).

20) Дизайн-жүйедегі құжаттама

«Neon/Accent» беті: палитралар (өнім/маркетинг), glow токендері, компоненттердің мысалдары, видео-демо микро әрекеттер.
«Контраст матрицасы»: 'fg × bg' және 'on-' үшін нақты коэффициенттер.
Фронтендке арналған preset-сыныптар мен сниппеттер жиынтығы.

Қысқаша түйіндеме

Gamble Hub үшін Neon/Accent - нүктелі, семантикалық, өнімді. Жарық қарама-қарсылық пен жайлылықты бұзбай, әрекетке көзқарасты бағыттайды. Қозғалтқыш - токендер (OKLCH), «жеңіл» glow-пресеттер, қатаң жағдайлар, high-contrast ажыратылатын әсерлер. Бұл брендтің жарқын сипатын береді, бірақ ыңғайлы және жылдам өнім болып қалады.