Услуби Neon/Accent Gamble Hub

1) Консепсия ва принсипҳо

Neon/Accent забони визуалӣ мебошад, ки сатҳи асосӣ доно боқӣ мемонад (аввал торик) ва диққати корбарро бо дурахши кӯтоҳи неон равона мекунад: контурҳои акцент, дурахшон, равшании давлатӣ ва микро сигналҳо. Мақсад: муайянкунии амали зуд (CTA, фокус, огоҳӣ) ва хониши баланд бидуни изофабор.

1. Аксент - доз. 90/10: то 10% майдони экран метавонад "нур" дошта бошад.

2. Семантика аз бренд муҳимтар аст. Neon як роҳи таъкид кардани маъно аст, на танҳо "дурахшон".

3. Контраст ибтидоӣ аст. Ягон объекти равшанидиҳанда хониши матнро кам намекунад (АА минимум).

4. Ритм ва таваққуф. Аниматсия кӯтоҳ, пешгӯишаванда аст, бо таваққуф ва физикаи тоза.

5. Иҷро ва дастрасӣ. Ягон сояи вазнин/сояҳо дар дастгоҳҳои заиф; ҳамаи эффектҳо дар режими HC озмуда мешаванд.

2) Ранг ва нур: палитра ва нақшҳо

2. 1 торик-аввал

'bg/base' - графити амиқ бо садои сабук/ғалладона ("рахҳо" -ро дар градиентҳо коҳиш медиҳад).
'bg/баланд' - барои кортҳо ва моделҳо каме сабуктар.
'fg/ибтидоӣ' - қариб сафед, вале тоза нест (# FFF → L ≈ 0). 90 дар OKLCH) барои кам кардани дурахшон.

2. 2 Неонҳои Accent (OKLCH, нишонаҳо)

Кибер кабуд: 'оклч (0.). 74 0. 16,250) 'аксенти асосии бренди аст.
Арғувони барқӣ: 'оклч (0. 70 0. 17 310) '- миёна, барои пайдарпаӣ ё рӯйдодҳои бозӣ.
Оҳаки заҳролуд: 'оклч (0.). 82 0. 14,140) 'як лаҳзаи нодир аст (jackpot, win).
Ҳушдор Корал: 'оклч (0.). 72 0. 14 30) '- огоҳӣ/хатогиҳо (маҳдудшудаи "неон").

2. 3 Ҷуфтҳои контраст

Матн/нишонаҳо дар замина: ≥ 4. 5:1 (муқаррарӣ), ≥ 3:1 (калон/равғанӣ).
Neon Пур кардани матн: ≥ 4. 5:1. Дар баландии 'C', 'C _ text' -ро ба 0 камтар кунед. 01–0. 03.
Нишонаҳо/нишондиҳандаҳо: ≥ 3:1 ба муҳит.

3) Таъсири дурахшон бидуни зарар ба хондан

3. 1 Шаклҳои дурахшон

Дурахши берунӣ: 1-2 ҳалқаҳои норавшан, радиусаш 8-24 px вобаста аз миқёс.
Зарбаи Neon: хати лоғар 1-2 px равшании баланд + сояи мулоими берунӣ.
Inset Glow: "равшании" дохилӣ барои воридшавӣ дар фокус.

3. 2 Маҳдудкунандаҳо

Ҳеҷ гоҳ матни хурдро ба болои дурахши шадид ҷойгир накунед.
Glow вазъро иваз намекунад; он шакл/нишона/зерро пурра мекунад.
Дар минтақаҳои калон (баннер/сарлавҳа) - шаффофияти дурахшонро то 20-35% кам кунед.

3. 3 Мутобиқ шудан ба мавзӯъҳо

Дар мавзӯи нур, неон дар радиус заифтар ва кӯтоҳтар аст, вагарна он таъсири "кислота" дорад.
Баръакси баланд - чароғҳо хомӯш карда мешаванд, контур/чаҳорчӯбаи равшан боқӣ мемонад.

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

Андозаи мундариҷаи асосӣ: 16-18 px; сарлавҳаҳои миқёси равшан (масалан, ҷадвали 12-баллӣ).
Услуб: аз нури ултра дурӣ ҷӯед; Ҳадди ақали муқаррарӣ/миёна.
Фосилаи хати 1. 45–1. 6.
Таъкид дар матн на ба ранг, балки ба миқёс/вазн/нишона; ранг - танҳо ҳамчун иловагӣ.

5) Торҳо, ритм, замина

Сутунҳо: 12 (мизи корӣ), 6 (планшет), 4 (мобилӣ).
Модули уфуқӣ 8 px; амудӣ - 8/12/16 px вобаста ба фасл.
Градиенти замина: "гало" -и радиалӣ дар минтақаи калидии CTA.
Ғавғо (ғалла) L = ± 0. 02 - барои умқи бе "пластикӣ".

6) Компонентҳо (намунаҳо)

6. 1 Тугмаҳо

Ибтидоӣ: пур кардани матни 'brand' Neon '+' on-primary 'матни ≥ 4. 5:1, радиуси дурахшон 12-16 px дар hover.
Дуюм: шаффоф бо контури неон (1-2 px) ва дурахши мулоими берунӣ дар hover.
Сеюм: матн, на дурахш, танҳо зерхат/нишона.

• Hover: − Δ L замина (0. 02–0. 04) + дурахши сабук.
• Фаъол: пуркунии торик, хориҷ ё кам кардани дурахшон.
• Фокус: ҳалқаи контраст 2-3 px (норавшан нест), на танҳо ранг.

6. 2 Майдонҳои вуруд

Пешфарз: чаҳорчӯбаи тунуки 1 px.
Фокус: зарбаи неон + дурахши заиф дар дохили майдон; ихтисор кардани ҷойгоҳ (аммо ≥ 3:1).
Хато/Муваффақият: нақшаи ранги семантикӣ + нишона; ҳадди аққал дурахшон.

6. 3 Ҷадвал/паймоиш

Нишондиҳандаи ҷадвали фаъол - хати неон 2 px + мулоими мулоим 8 px.
Hovers - равшании рӯшноӣ дар зери курсор (паҳншавии соя 4-6 px).

6. 4 корт/баннерҳо

Кортҳои мусобиқа: чаҳорчӯбаи неон дар кунҷҳо ("кунҷҳои кӯтоҳ"), то ки тамоми чаҳорчӯба дурахшад.
Баннерҳо - ниқоби тира дар зери матн (қабати 40-60%) то ки пасзаминаи неон мундариҷаро "нахӯрад".

7) Микро-ҳамкорӣ ва аниматсия

Давомнокӣ: 120-200 ms (hover), 180-240 ms (фокус/фаъол), 240-320 ms (docks/modals).
Хати каҷ: 'кубик-безиер (0. 2, 0. 0, 0. 2, 1) 'барои ҳассосияти "моддӣ".
Набзи неон: як давр дар як теппа, бидуни чашмакзании беохир.
Рӯйдодҳои система (бурд/ноил шудан): инфиҷори кӯтоҳ 300-500 мс бо афтидан.

8) Дастрасӣ ва режими контрасти баланд

Ҳама маъноҳо бе ранг ва дурахшон дастрасанд: шакл, нишона, нишонаи матн, зерхат.
Дастгирии 'бартарӣ-контраст', 'рангҳои маҷбурӣ'; ҳангоми фурӯзон - дурахшонро хомӯш кунед, чаҳорчӯбҳоро мустаҳкам кунед ва пур кунед, муқоисаро тафтиш кунед.
Барои нобиноёни ранг: ҳамчун сигнали ягона ҷуфти сурх-сабзро пешгирӣ кунед; пиктограмма ва матнро истифода баред.

9) Иҷро

Кам кардани сояи қуттӣ бо нуқсони калон ва филтр: норавшан () дар элементҳои гуногун.
Сояҳои псевдо-элементҳо ва композиторони қабатро бартарӣ диҳед (табдил/шаффофият).
Дар мобилӣ - пешнамоиши "сабук" -и аниматсияҳо; хомӯш кардани дурахши шадид дар FPS паст.

Градиентҳои Neon - ҳамчун дороиҳои растерӣ (Web

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) Визуализатсияи маълумот

Графикҳои силсилавӣ: сатри асосӣ бетараф аст, сатри равшаншуда неон бо ғафсии зиёд ва аломатҳои шакл мебошад.
Нуқтаҳо/сутунҳо: ≥ 3:1 ба замина; имзоҳо - ≥ 4. 5:1.
Равшании силсилаи интихобшуда дурахши мулоими берунӣ (sm) аст, бе дурахши доимӣ.

12) Блокҳои мундариҷа ва таблиғот

Матн дар neons пасзаминаи Promo - ҳамеша дар табақ/қабати (40-60%), баръакс.
Хатҳои "Glitch "/скан - танҳо ҳамчун аксенти нодир, на бештар аз 2-3 бахш дар як саҳифа.

13) Нишонаҳо ва тасвирҳо

Нишонаҳо - хатӣ/дуотон бо зарбаи неон барои ҳолатҳои фаъол.
Тасвирҳо - "неон дар баробари контур" бо пур кардани ҳадди аққал; аз дурахши хурд дар атрофи матн канорагирӣ кунед.

14) Маркетинг ва маҳсулот

Баннерҳои маркетингӣ метавонанд дурахшони баландтари 'C' ва мураккабро истифода баранд.
Дар маҳсулот (шаклҳо, ҷадвалҳо, мувозинат) - камшавии 'C', таъсири дурахши кӯтоҳ ва контрастҳои қатъӣ.

15) Қоидаҳои матнӣ барои бозикунӣ

Огоҳиҳои интиқодӣ (18 +, маҳдудиятҳо, KYC/AML, хатарҳо) - Баръакс, AAA.
Дар ҷадвалҳои коэффисиент/лидерҳо - афзоиш/афтоданро на танҳо бо ранг, балки бо тирҳо/нишонаҳо ва таркиби равған нишон медиҳанд.

16) Маҳаллисозӣ ва мутобиқшавӣ

Кириллӣ/Лотинӣ: Нишондиҳандаҳои фосилаи якхела ва ҳарфҳо.
Ду сатри CTA - хомӯш кардани дурахшон барои матн, онро дар зарба/замина гузоред.
RTL - оина танҳо эффектҳои самтӣ (кунҷҳо/нуқтаҳо).

17) Рӯйхати назоратӣ (тарроҳӣ/таҳия)

Контраст

• Матни ≥ 4. 5:1; калон ≥ 3:1; огоҳиҳои система - AAA.

Дурахшон

• Дурахшон бо матн мувофиқат намекунад; радиус ва алфа дар дохили presets.

Давлатҳо

• Hover/Active/Focus аз рӯи шакл фарқ мекунанд, на танҳо ранг/нур.

Иҷро

• Бе норавшании чандинкарата; як "сабук" барои мобилӣ мавҷуд аст.

Мавҷудият

• Ҳолати контрасти баланд дуруст аст (дурахшидан, чаҳорчӯбаҳо).

Семантика

• Neon маънои (амал/фокус/ҳолат) -ро инъикос мекунад, на "барои зебоӣ".

18) Анти-намунаҳо

Неони сахт майдонҳои калонеро пур мекунад → хастагии чашм.

Мушкилоти доимоамалкунанда/пора-пора

Матн бо дурахши дурахшон бидуни зер.
Сигнали ягона ранг/дурахшон аст (шакл/нишона/зерхат нест).
Шиддатнокии номувофиқ дар як экран ("porridge" визуалӣ).

19) A/B ва ченакҳо

Санҷиши шиддатнокии дурахшон (алфа/радиус) барои тугмаҳои CTR CTA ва хатогиҳои вуруд.
Пайгирии вақт ба амал ва хатогиҳо пас аз ворид шудан ба фокуси неон.
Пурсишҳои UX оид ба бароҳати визуалӣ (хусусан дар ҷаласаҳои дароз).

20) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Саҳифаи "Neon/Accent": палитрҳо (маҳсулот/маркетинг), нишонаҳои дурахшон, намунаҳои компонент, намоиши видеоии микро-ҳамкорӣ.
"Матритсаи контраст": коэффисиентҳои воқеӣ барои 'fg × bg' ва 'on-'.
Маҷмӯи синфҳои пешакӣ ва порчаҳо барои frontend.

Хулосаи мухтасар

Neon/Accent for Gamble Hub - нуқта, семантикӣ, самаранок. Нур нигоҳро ба амал бидуни ихтилоф ва тасаллӣ халалдор мекунад. Муҳаррик - токенҳо (OKLCH), пешнамоишҳои дурахшони "сабук", ҳолати қатъӣ, таъсири ғайрифаъол дар контраст. Ин хусусияти дурахшони брендро медиҳад, аммо маҳсулоти қулай ва зуд боқӣ мемонад.