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' - მდე. 01–0. 03.
კონტურები/ინდიკატორის ხატები: 3:1 ევრო გარემოსთან.

3) მანათობელი ეფექტები (glow) კითხვის დაზიანების გარეშე

3. 1 სიკაშკაშის ფორმა

გარე Glow (რბილი წრე): 1-2 ბუნდოვანი რგოლი, რადიუსი 8-24 px, დამოკიდებულია მასშტაბზე.
Neon Stroke: თხელი ხაზი 1-2 px მაღალი სიკაშკაშე + რბილი გარე ჩრდილი.
Inset Glow: შიდა „განათება“ აქცენტით.

3. 2 შეზღუდვები

არასოდეს განათავსოთ პატარა ტექსტი ინტენსიური სიკაშკაშის თავზე.
Glow არ ცვლის მდგომარეობას; იგი ავსებს ფორმას/ხატს/ხაზს.
დიდ ადგილებში (ბანერი/კედარი) - შეამცირეთ სიკაშკაშის გაუმჭვირვალე 20-35% -მდე.

3. 3 თემებზე ადაპტაცია

მსუბუქი თემაში ნეონი უფრო სუსტი და მოკლეა, ვიდრე რადიუსი, წინააღმდეგ შემთხვევაში - „მჟავა“ ეფექტი.
მაღალი კონტექსტში - სიკაშკაშე გამორთულია, რჩება მკაფიო კონტური/ჩარჩო.

4) სტამბა და იერარქია

ძირითადი შინაარსი: 16-18 px; სათაურები მკაფიო მასშტაბით (მაგალითად, 12 წერტილის მასშტაბი).
შენიშვნა: თავიდან ავიცილოთ ულტრა-მსუბუქი; მინიმალური რეგულარული/საშუალო.
ხაზოვანი ინტერვალი 1. 45–1. 6.
ტექსტში აქცენტი არ არის ფერი, არამედ მასშტაბი/წონა/ხატი; ფერი - მხოლოდ როგორც დამატებითი.

5) ბადური, რიტმი, ფონ

სვეტები: 12 (desktop), 6 (tablet), 4 (მობილური).
ჰორიზონტალური მოდული 8 px; ვერტიკალური - 8/12/16 px, დამოკიდებულია მონაკვეთზე.
ფონის გრადიენტი: რადიალური სუსტი „ჰალო“ საკვანძო CTA ზონაში.
ტაქტიკური ხმაური (დიდი) L = ± 0. 02 - სიღრმისთვის „პლასტმასის“ გარეშე.

6) კომპონენტები (ნიმუშები)

6. 1 ღილაკები

Primary: 'brandNeon' + 'primary' ტექსტი 4. 5:1, glow სხივი 12-16 px hover.
საშუალო: გამჭვირვალე ნეონის კონტურით (1-2 px) და რბილი გარედან glow.
Tertiary: ტექსტი, ბრწყინვალების გარეშე, მხოლოდ ხაზგასმით/ხატით.

• Hover: − SL ფონი (0. 02–0. 04) + მსუბუქი glow.
• აქტიური: მუქი შევსება, ამოღებული ან შემცირებული glow.
• Focus: კონტრასტული რგოლი 2-3 px (დაბინდვის გარეშე), არა მხოლოდ ფერი.

6. 2 შეყვანის ველი

Default: თხელი ჩარჩო neutral 1 px.
Focus: neen stroke + სუსტი inset glow ველის შიგნით; შემცირებული კონტრასტის placeholder (მაგრამ 3:1).
Error/Success: სემანტიკური ფერის კონტური + პიქტოგრამა; მინიმალური.

6. 3 ტაბი/ნავიგაცია

აქტიური ტაბის ინდიკატორი არის ნეონის ხაზი 2 px + რბილი blur 8 px.
Chovers არის მსუბუქი განათება კურსორის ქვეშ (shadow spread 4-6 px).

6. 4 ბარათები/ბანერები

ტურნირების ბარათები: კუთხეებში ნეონის ჩარჩო (მოკლე „კუთხეები“) ისე, რომ მთელი ჩარჩო არ ანათებდეს.
ბანერები არის დაბნეული ნიღაბი ტექსტის ქვეშ (overlay 40-60%) ისე, რომ ნეონ ფონ არ „ჭამს“ შინაარსს.

7) მიკრო ექსპლუატაცია და ანიმაცია

ხანგრძლივობა: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (დოქები/მოდალები).
მრუდი: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) „მატერიალური“ შეგრძნებისთვის.
ნეონის პულსი: ერთი ციკლი ჰოვერზე, უსასრულო მოციმციმე გარეშე.
სისტემური მოვლენები (გამარჯვება/მიღწევა): მოკლე განათება 300-500 ms გამკაცრებით.

8) მაღალი კონტრასტის ხელმისაწვდომობა და რეჟიმები

ყველა მნიშვნელობა ხელმისაწვდომია ფერის და სიკაშკაშის გარეშე: ფორმა, ხატი, ტექსტური ეტიკეტი, ხაზგასმით.
მხარდაჭერა 'prefers-contrast', 'forced-colors'; ჩართვისას - გამორთეთ glow, გააძლიერეთ ჩარჩო და შევსება, შეამოწმეთ კონტრასტები.
დალტონიზმისთვის: თავიდან ავიცილოთ წყვილი „წითელი მწვანე“, როგორც ერთადერთი სიგნალი; ჩვენ ვიყენებთ პიქტოგრამებს და ტექსტს.

9) პროდუქტიულობა

შეამცირეთ ყუთის shadow დიდი blur და filter: blur () მრავალ ელემენტზე.
უპირატესობა მიანიჭეთ ჩრდილებს ფსევდო ელემენტებისა და კომპოზიტორების ფენებისგან (ტრანსფორმირება/დაცვა).
მობილური - „მსუბუქი“ შეჩერებულია ანიმაციები; ინტენსიური გოლის გამორთვა დაბალი FPS- ით.
ნეონის გრადიენტები - დაანგარიშება, როგორც რასტერული ასეტები (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.
შერჩეული სერიის განათება არის რბილი გარე glow (sm), მუდმივი ციმციმის გარეშე.

12) შინაარსის ბლოკები და პრომო

პრომო-ფონის ნეონების ტექსტი - ყოველთვის ტირიფის/ოვერლეზე (40-60%), მკაცრად კონტრასტის მიხედვით.
„Glitch “/სკანირების ხაზები - მხოლოდ როგორც იშვიათი აქცენტი, გვერდზე არაუმეტეს 2-3 მონაკვეთი.

13) ხატები და ილუსტრაციები

ხატები - ხაზოვანი/დუოტონი ნეონის შეხებით აქტიური პირობებისთვის.
ილუსტრაციები - „ნეონი კონტურზე“ მინიმალური შევსებით; თავიდან აიცილოთ ტექსტის გარშემო მცირე სიკაშკაშე.

14) მარკეტინგის პროდუქტი

მარკეტინგულ ბანერებს შეუძლიათ გამოიყენონ უფრო მაღალი ქრომი '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 განასხვავებს ფორმას და არა მხოლოდ ფერს/შუქს.

პროდუქტიულობა

• მრავალჯერადი მძიმე ბლურის გარეშე; მობილური „მსუბუქი“ შეჩერებაა.

წვდომა

• მაღალი კონტრასტის რეჟიმი სწორია (glow off, ჩარჩო).

სემანტიკა

• ნეონი ასახავს მნიშვნელობას (მოქმედება/ფოკუსი/სტატუსი) და არა „სილამაზისთვის“.

18) ანტი შაბლონები

დიდი ფართობის უწყვეტი ნეონის შევსება და თვალის დაღლილობა.
მუდმივი ციმციმება/პულსაცია, გაღიზიანება და ხელმისაწვდომობის პრობლემები.
ტექსტი ნათელი შუქის გარეშე სუბსტრატის გარეშე.
ერთადერთი სიგნალია ფერი/განათება (არ არსებობს ფორმა/ხატი/ხაზი).
არაკოორდინირებული glow ინტენსივობა ერთ ეკრანზე (ვიზუალური „ფაფა“).

19) A/B და მეტრიკა

შეამოწმეთ glow (ალფა/სხივი) ინტენსივობა CTR CTA ღილაკებზე და შეყვანის შეცდომებზე.
დროის თვალყურის დევნება და ფორმების შეცდომები ნეონის ფოკუსის შემოღების შემდეგ.
UX გამოკითხვები ვიზუალური კომფორტისთვის (განსაკუთრებით გრძელი სესიების დროს).

20) დოკუმენტაცია დიზაინის სისტემაში

გვერდი „Neon/Accent“: პალიტრა (პროდუქტი/მარკეტინგი), glow ნიშნები, კომპონენტების მაგალითები, მიკრო ეფექტების ვიდეო დემო დემო.
"კონტრასტის მატრიცა": ფაქტობრივი კოეფიციენტები "fg × bg" და 'on- ".
წინასწარი კლასების ნაკრები და snippets წინა პლანზე.

მოკლე რეზიუმე

Neon/Accent for Gamble Hub არის წერტილოვანი, სემანტიკური, პროდუქტიული. სინათლე თვალს ადევნებს მოქმედებას კონტრასტისა და კომფორტის დარღვევის გარეშე. ძრავა - ნიშნები (OKLCH), „მსუბუქი“ glow-presets, მკაცრი სახელმწიფოები, გამორთული ეფექტები მაღალი კონტრასტში. ეს იძლევა ბრენდის ნათელ ხასიათს, მაგრამ რჩება მოსახერხებელი და სწრაფი პროდუქტი.