Neon/Accent ոճը Gamble Hub

1) Հասկացություն և սկզբունքներ

Neon/Accent-ը տեսողական լեզու է, որտեղ հիմնական մակերեսը մնում է զսպված (dark-first), իսկ օգտագործողի ուշադրությունը ուղղվում է կարճ նեոնային բռնկումներով 'ակցենտային ուրվագծեր, մոմեր, պետությունների լուսավորություն և միկրո ազդանշաններ։ Նպատակը 'արագ հայտնաբերումը (CTA, ֆոկուս, ծանուցում) և բարձր ընթերցանությունը առանց ծանրաբեռնվածության։

Հիմնական սկզբունքները

1. Շեշտը դրվում է։ 90/10: մինչև 10 տոկոսը էկրանի տարածքը կարող է ունենալ «լույս»։

2. Սեմանտիկան ավելի կարևոր է, քան բրենդի։ Neon-ը իմաստը տարբերելու միջոց է, ոչ միայն «պայծառություն»։

3. Հակադրությունը առաջնային է։ Ցանկացած լուսավոր օբյեկտ չի նվազեցնում տեքստի կարդալը (առնվազն AA)։

4. Ռիթմը և դադարը։ Անիմացիան կարճ է, կանխատեսելի, սարդերով և պարզ ֆիզիկայով։

5. Արտադրողականությունը և հասանելիությունը։ Թույլ սարքերի վրա չկա ծանր քայքայում/ստվեր։ բոլոր էֆեկտները փորձարկվում են HC ռեժիմներում։

2) Գույնը և լույսը 'պալիտրա և դերեր

2. 1 Հիմնական մակերեսները (dark-first)

«bg/bert» -ը խորը գրաֆիտն է, որն ունի թեթև աղմուկ/հացահատիկ (նվազեցնում է «շերտերը» աստիճաններով)։

«bg/elevated» -ը մի փոքր ավելի պայծառ է քարտերի և մոդելների համար։

«fg/primary» - գրեթե սպիտակ, բայց ոչ մաքուր (# FFF 24L 240։ 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 Հակադրող զույգեր

Տեքստ/իկոնիկներ ֆոնի համար ՝ 244։ 5: 1 (սովորական), 243:1 (մեծ/ճարպային)։

Տեքստը նեոնային ծոցին ՝ 384։ 5:1. Բարձր 'C' նվազեցրեք 'C _ 112' մինչև 0։ 01–0. 03.

Ուրվագծեր/իկոնկի-ազդանշաններ ՝ 353: 1 շրջակա միջավայրին։

3) Լուսավոր էֆեկտները (glow) առանց ընթերցանության վնասելու

3. 1 Ճակնդեղի ձև

Syster Glow (փափուկ կոմպոզիցիա) '1-2 օղակներ, 8-24 px շառավղը կախված մասշտաբից։

Neon Stroke: բարակ գիծ 1-2 px բարձր պայծառության + փափուկ արտաքին ստվեր։

Inset Glow: Ներքին «լուսաբացը» ֆոկուսում ինպուտների համար։

3. 2 Սահմանափակումներ

Երբեք մի փոքր տեքստ մի տեղադրեք ինտենսիվ հոսքի վերևում։

Glow չի փոխարինում վիճակը։ այն լրացնում է ձևը/իկոն/ընդգծումը։

Մեծ վայրերում (բանկա/հեդեր) - նվազեցրեք հոսքի անթափանցելիությունը մինչև 20-35 տոկոսը։

3. 3 Հարմարեցում դեպի

Light-թեմայում այն թույլ է և կարճ շառավղով, հակառակ դեպքում '«թթվային» ազդեցություն։

High-www.r.ru-ի մեջ, մոմերը անջատվում են, մնում է հստակ ստանդարտ/շրջանակի։

4) Տպագրություն և հիերարխիա

Բովանդակության հիմնական կեգլը '16-18 px; վերնագրեր, որոնք ունեն հստակ չափսեր (օրինակ, 12 կետանոց սանդղակ)։

Սկսելով 'խուսափում ենք ultra-light; Նվազագույն Regular/Lenta.ru։

Միջտարածաշրջանային թիվ 1։ 45–1. 6.

Տեքստում շեշտը ոչ թե գույնն է, այլ մեծությունը/քաշը/իկոնիկան։ գույնը միայն որպես ավելցուկ է։

5) Ցանցեր, ռիթմ, ֆոն

Սյունակներ ՝ 12 (desktop), 6 (tablet), 4 (mobile)։

Հորիզոնական մոդուլը 8 px; ուղղահայաց '8/12/16 px կախված հատվածից։

Ֆոնային գրադիենտ 'ճառագայթային թույլ «ընկույզ» առանցքային CTA գոտում։

Մարտավարական աղմուկը (grain) L = 240։ 02 - խորության համար առանց պլաստիկի։

6) Բաղադրիչներ (արտոնագրեր)

6. 1 Կոճակներ

Primary: BrandNeon '+' on-primary 'տեքստը 4։ 5:1, glow շառավիղը 12-16 px-ի վրա hover-ի վրա։

Secondary: Թափանցիկ է նեոնային ծածկոցով (1-2 px) և փափուկ meder glow hover-ում։

Tertiary: Տեքստային, առանց ճակնդեղի, միայն ընդգծում/իկոնիկա։

Վիճակը

Hover: Winl Winl Fon (0։ 02–0. 04) + թեթև glow.

Action 'ավելի մութ ծոց, հանված կամ կրճատված է glow։

Focus: հակաբիոտիկ օղակը 2-3 px (առանց քայքայման), ոչ միայն գույնը։

6. 2 Մուտքային դաշտեր

Neutral 1 px-ի բարակ շրջանակը։

Focus: neon stroke + թույլ inset glow դաշտի ներսում; placeholder կրճատված հակադրություն (բայց 3,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/action), 240-320 մզ (չափաբաժիններ/մոդալներ)։

Կորեյը '"cubic-bezier (0։ 2, 0. 0, 0. 2, 1) «նյութական» զգացողության համար։

Neon-puls 'մեկ ցիկլ hover-ում, առանց անսահման միգրացիայի։

Ռուսական իրադարձություններ (հաղթանակ/նվաճում). լուսավորության կարճ աճը 300-500 մզ է 'խորտակվելով։

8) Բարձր հակադրության հասանելիությունն ու ռեժիմները

Բոլոր իմաստները հասանելի են առանց գույնի և կամքի 'ձև, իկոն, տեքստային պիտակ, ընդգծում։

Աջակցություն 'wwww.fers-ww.r.r., «forced-colors»; երբ մենք անջատում ենք գլոուն, ամրացնում ենք շրջանակներն ու ծոցերը, ստուգում հակադրությունները։

Դալթոնիզմի համար 'խուսափում ենք «կարմիր-կանաչ» զույգից որպես միակ ազդանշան։ օգտագործում ենք պիկոգրամներ և տեքստեր։

9) Արտադրողականությունը

Խառնեք big-shadow-ը մեծ բլուր և www.der: blur () բազմաթիվ տարրերի վրա։

Նախընտրեք ստվերը կեղծանուններից և կոմպոզիտորների շերտերից (transform/opacity)։

Բջջային վրա '«թեթև» դադարեցնում է անիմացիաները։ ինտենսիվ glow անջատումը ցածր FPS-ով։

Neon-gradients - ռենդերներ որպես բուսական ասպետներ (Pro P/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-ն է, որը առանձնացված է շարքով' նեոն, ավելացված հաստությամբ և գծապատկերներով։

Կետեր/սյունակներ ՝ 353:1 ֆոնին; ստորագրությունները 244 են։ 5:1.

Ընտրված շարքի լուսավորությունը փափուկ meder glow (sm) է, առանց մշտական չափման։

12) Կոնտենտային բլոկներ և պրոմո

Պրոմո-ֆոնային անհավատների տեքստը միշտ պլաշկի/օվերլեոյի վրա է (40-60 տոկոսը), խստորեն հակառակը։

«Գլիտչը »/սկան գծերը միայն հազվագյուտ կենտրոնացում են, ոչ ավելի քան 2-3 հատվածներ էջի վրա։

13) Իկոնկի և նկարազարդումներ

Իկոնիկները գծային/դուոտոն են, որն ունի ոչ ակտիվ վիճակներ։

Նկարները '«ոչ մի բովանդակություն» նվազագույն ծոցով։ խուսափել տեքստի շուրջ փոքր շերտերից։

14) Մարքեթինգը vs ապրանքը

Մարքեթինգային բանկերը կարող են օգտագործել ավելի բարձր «C» և բարդ հոսանքներ։

Ապրանքում (ձևեր, սեղաններ, հավասարակշռություն) - կրճատված 'C', կարճ glow-էֆեկտներ և խիստ հակադրություն։

15) iGaming-ի համար տեքստային կանոնները

Պատասխանատու ծանուցումներ (18 +, լիմիտներ, KYC/AML, ռիսկեր) - AAA հակադրությամբ, առանց glow։

Գործակիցների/առաջնորդների աղյուսակներում աճը/անկումը նշեք ոչ միայն գույնով, այլ սլաքներով/պիկտոգրամներով և ճարպով։

16) Տեղայնացումը և հարմարեցումը

Կիրիլիցա/լատիներեն 'նույն քեգլի և միջբուկվային ընդմիջումները։

Երկտարյա CTA-ն անջատում է այն տեքստի մեջ, թողնում այն շապիկի/ֆոնի մոտ։

RTL-ը միայն ուղղակիորեն ազդեցություններ է (անկյուններ/բլոկներ)։

17) Չեկի թերթիկը (դիզայն/զարգացում)

Հակադրություն

• Թիվ 4 տեքստը։ 5:1; Թիվ 3:1; Ծանուցումները AAA են։

Glow

• Glow չի հատվում տեքստով; շառավղը և ալֆան ճնշումների սահմաններում։

Վիճակը

• Hover/Action/Focus-ը տարբերվում է ձևից, ոչ միայն գույնով/լույսով։

Արտադրողականությունը

• Առանց շատ ծանր բլուր; կա «թեթև» ճնշում բջջային համար։

Հասանելիություն

• High-35r.ru ռեժիմը ճիշտ է (glow off, շրջանակը)։

Սեմանտիկան

• Նեոնը արտահայտում է իմաստը (գործողություն/ֆոկուս/կարգավիճակ), ոչ թե «գեղեցկության համար»։

18) Anti-patterna

Մեծ տարածքների շարունակական նեոնային ծոցերը նպաստում են աչքերի հոգնեցուցմանը։

Մշտական չափումը/իմպուլսացիան բացատրում է վրդովմունքը և հասանելիության խնդիրները։

Տեքստը պայծառ glow-ի վերևում է առանց պահանջների։

Միակ ազդանշանը գույնն/ճեղքումը (չկա ձև/իկոն/ընդգծում)։

Glow-ի չհամաձայնեցված ինտենսիվությունը մեկ էկրանին (տեսողական «շա»)։

19) A/B և մետրերը

Փորձարկեք glow (ալֆա/շառավիղը) CTR CTA կոճակների և մուտքագրման սխալների վրա։

Time-to-action-ի հետևում և ձևերի սխալները neon-focus-ից հետո։

UX-հարցումները տեսողական հարմարավետության մասին (հատկապես երկար տարբերակներում)։

20) Մոսկվա դիզայնի համակարգում

«Neon/Accent» էջը 'պալիտրա (ապրանք/մարքեթինգ), գլոու, բաղադրիչների օրինակներ, վիդեո դեմո միկրովիզաիմոդենիա։

«Հակադրող մատրիցա» 'իրական գործակիցները «fg nobg» և «one» համար։

Preset դասարանների և ներքնազգեստի հավաքածու առջևի համար։

Live ռեզյումե

Neon/Accent-ի համար Gamble Hub-ը կետային, սեմանտիկ, արտադրող է։ Լույսը ուղղում է մտածելակերպին առանց հակադրության և հարմարավետության։ Շարժիչը հոսանքներ է (OKLCH), «թեթև» glow-prosets, խիստ վիճակներ, անջատված ազդեցություններ high-ensrance-ում։ Սա բրենդի վառ բնույթ է տալիս, բայց մնում է հարմար և արագ արտադրանք։