Neon/Accent Gamble Hub stili

1) Düşünje we ýörelgeler

Neon/Accent esasy ýüzüň saklanýan (dark-first) wizual dili bolup, ulanyjynyň ünsüni gysga neon çyralary: aksent konturlary, şöhleler, ýagdaýlaryň yşyklandyrylyşy we mikro-signallar gönükdirýär. Maksat: hereketi çalt ýüze çykarmak (CTA, fokus, habar bermek) we artykmaç ýüklenmezden ýokary okalmak.

1. Aksent - dozaly. 90/10: ekranyň meýdanynyň 10% -ine çenli "ýagtylyk" bolup biler.

2. Semantika markadan has möhümdir. Neon diňe "ýagtylyk" däl, manyny tapawutlandyrmagyň usulydyr.

3. Kontrast birmeňzeş. Islendik ýagty obýekt tekstiň okalmagyny peseltmeýär (iň az AA).

4. Ritm we arakesme. Animasiýa gysga, öňünden aýdyp boljak, arakesmeler we aç-açan fizika bilen.

5. Öndürijilik we elýeterlilik. Gowşak enjamlarda agyr bulaşyk/kölegeler ýok; ähli täsirler HC re modeimlerinde synagdan geçirilýär.

2) Reňk we ýagtylyk: palitra we rollar

2. 1 Esasy ýüzler (dark-first)

'bg/base' - ýeňil ses/däne bilen çuňňur grafit (gradientlerdäki "zolaklary" azaldar).
'bg/elevated' - kartoçkalar we modallar üçin birneme ýagty.
'fg/primary' - ak diýen ýaly, ýöne arassa däl (#FFF → L ≈ 0. 90-da OKLCH).

2. 2 Aksent neonlary (OKLCH, görkezmeler)

Cyber Blue: `oklch(0. 74 0. 16 250) '- esasy marka-aksent.
Electric Purple: `oklch(0. 70 0. 17 310) '- yzygiderlilik ýa-da oýun wakalary üçin ikinji derejeli.
Toxic Lime: `oklch(0. 82 0. 14 140) '- seýrek highlight (jekpot, ýeňiş).
Alert Coral: `oklch(0. 72 0. 14 30) '- duýduryşlar/ýalňyşlyklar (çäklendirilen "neon").

2. 3 Ters jübütler

Fon teksti/nyşanlary: ≥ 4. 5:1 (adaty), ≥ 3:1 (uly/ýagly).
Neon guýulýan teksti: ≥ 4. 5:1. Ýokary 'C' -de 'C _ text' -ni 0-a çenli azaldyň. 01–0. 03.
Konturlar/nyşan-görkezijiler: gurşawa 3:1 ≥.

3) Okalyşa zyýan bermezden ýagty effektler

3. 1 Ýagtylygyň görnüşleri

Daşarky şöhle (ýumşak kontury): 1-2 bulaşyk halkalar, radiusy masştabyna baglylykda 8-24 px.
Neon Stroke: inçe çyzyk 1-2 px ýokary ýagtylyk + ýumşak daşarky kölege.
Inset Glow: fokusda input üçin içerki "yşyklandyryş".

3. 2 Çäklendirijiler

Hiç haçan güýçli ýagtylygyň üstünde ownuk tekst goýmaň.
Glow ýagdaýy çalyşmaýar; ol formany/nyşany/altını doldurýar.
Uly ýerlerde (banner/heder) - ýalpyldawuklygy 20-35% -e çenli peseldiň.

3. 3 Mowzuklara uýgunlaşmak

Ýeňil temada neon radiusy boýunça has gowşak we gysga, ýogsam "kislotaly" täsir edýär.
"High-contrast" -da ýagtylyklar öçürilýär, anyk kontur/çarçuwa galýar.

4) Çaphana we iýerarhiýa

Esasy mazmun kegli: 16-18 px; aýdyň masştably sözbaşylar (mysal üçin, 12 nokatly masştab).
Çyzgylar: ultra-lightdan gaça durýarys; iň az Regular/Medium.
Hatara aralyk 1. 45–1. 6.
Tekstde aksent - reňk bilen däl-de, masştab/agram/nyşan bilen; Reňk - diňe goşmaça.

5) Torlar, ritm, fon

Sütünler: 12 (desktop), 6 (tablet), 4 (mobile).
Gorizontal modul 8 px; dik - seksiýasyna baglylykda 8/12/16 px.
Fon gradienti: esasy CTA zonasyndaky radial gowşak "oreol".
Taktil ses (grain) L = ± 0. 02 - "plastiksiz" çuňluk üçin.

6) Komponentler (patternler)

6. 1 Düwmeler

Primary: doldurmak 'brandNeon' + 'on-primary' tekst ≥ 4. 5:1, radiusy 12-16 px hower.
Secondary: neon bilen aç-açan (1-2 px) we hower bilen ýumşak daşarky şöhle.
Tertiary: tekst, ýalpyldawuk, diňe nygtamak/nyşan.

• Hover: − Δ L fon (0. 02–0. 04) + ýeňil glow.
• Active: has garaňky doldurmak, aýyrmak ýa-da azaltmak.
• Focus: 2-3 px kontrast halkasy (bulanyksyz), diňe reňk däl.

6. 2 Giriş meýdanlary

Default: neutral 1 px.
Focus: neon stroke + meýdanyň içinde gowşak inset glow; az kontrast placeholder (ýöne 3:1 ≥).
Error/Success: semantik reňk kontury + piktogram; glow minimal.

6. 3 Tablar/nawigasiýa

Aktiw tagtanyň görkezijisi - neon çyzygy 2 px + ýumşak blur 8 px.
Howers - kursoryň aşagyndaky ýeňil yşyklandyryş (shadow spread 4-6 px).

6. 4 Kartoçkalar/bannerler

Ýaryşlaryň kartoçkalary: çarçuwanyň hemmesiniň şöhle saçmazlygy üçin burçlarda neon çarçuwasy (gysga "burçlar").
Banneram - neon-fon mazmuny "iýmezligi" üçin tekstiň aşagyndaky garaňky maska ​ ​ (40-60%).

7) Mikrokreditler we animasiýa

Dowamlylygy: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (doklar/modallar).
Egri: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) "maddy" duýgy üçin.
Neon-impuls: hower-de bir aýlaw, tükeniksiz ýalpyldawuk.
Ulgamlaýyn wakalar (ýeňiş/üstünlik): 300-500 ms gysga yşyklandyryş çyrasy.

8) Elýeterlilik we ýokary kontrastly reimesimler

Manylaryň hemmesi reňk we ýagtylyk bolmazdan elýeterlidir: forma, nyşan, tekst belligi, nygtamak.
Goldaw 'prefers-contrast', 'forced-colors'; açylanda - glow öçürýäris, çarçuwalary we guýmalary güýçlendirýäris, kontrastlary barlaýarys.
Uzaklyk üçin: ýeke-täk signal hökmünde "gyzyl-ýaşyl" jübütden gaça durýarys; piktogrammalary we teksti ulanýarys.

9) Öndürijilik

Uly blur we filter: blur () elementleri bilen box-shadow-y iň pes derejä çykaryň.
Pseudo elementlerden we kompozitor gatlaklaryndan kölegeleri saýlaň (transform/opacity).
Jübi telefonlarynda - animasiýalaryň "ýeňil" preseti; Pes FPS-de intensiw şöhleleri öçürmek.
Neon-gradientler - uly ululykda raster assets (WebP/AVIF) hökmünde renderlemek.

10) Reňk we stil bellikleri (mysal)

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 (bölekler)

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) Maglumatlary wizuallaşdyrmak

Serial grafikalary: esasy hatar - neutral, aýratyn hatar - galyňlygy we şekilli bellikler bilen neon.
Nokatlar/sütünler: fona 3:1 ≥; gollar - ≥ 4. 5:1.
Saýlanan seriýanyň yşyklandyrylyşy - ýumşak daşarky şöhle (sm), hemişelik ýalpyldawuk.

12) Mazmun bloklary we mahabat

Mahabat-fon neonlaryndaky tekst - elmydama plastinkada/overleýde (40-60%), düýbünden tersine.
"Glitç "/skan-çyzyklar - diňe seýrek aksent hökmünde, sahypasyna 2-3 bölümden köp bolmaly däldir.

13) Nyşanlar we suratlar

Nyşanlar - işjeň ýagdaýlar üçin neon ştrih bilen çyzykly/duoton.
Suratlar - iň az guýulýan "konturda neon"; tekstiň töwereginde ownuk şöhle saçmazlyk.

14) Marketing vs önüm

Marketing bannerleri has ýokary 'C' hromy we çylşyrymly şöhleleri ulanyp biler.
Önümde (formalar, tablisalar, balanslar) - "C", gysga glow-effektler we berk kontrast.

15) iGaming üçin tekst düzgünleri

Jogapkär habarnamalar (18 +, çäkler, KYC/AML, töwekgelçilikler) - AAA kontrast boýunça, glow bolmazdan.
Koeffisiýentleriň/liderbordlaryň tablisalarynda - ösüş/güýz diňe bir reňk bilen däl, eýsem oklar/piktogrammalar we ýaglyk bilen belläň.

16) Lokalizasiýa we uýgunlaşma

Kiril/latyn: kegl we harplar arasyndaky aralyklaryň birmeňzeş metrikleri.
Iki hatly CTA - tekstde şöhläni öçürýäris, kontekstde/fonda goýýarys.
RTL - diňe ugrukdyrylan effektleri görkeziň (burçlar/şöhleler).

17) Rewýunyň çek-sanawy (dizaýn/ösüş)

Kontrast

• Teksti ≥ 4. 5:1; uly ≥ 3:1; ulgam habarnamalary - AAA.

Glow

• Glow tekst bilen gabat gelmeýär; radius we alfa presetleriň içinde.

Döwlet

• Hover/Active/Focus diňe reňk/ýagtylyk bilen däl-de, görnüşi bilen tapawutlanýar.

Öndürijilik

• Köp agyr blur bolmazdan; jübi üçin "ýeňil" preset bar.

Elýeterlilik

• High-contrast düzgüni dogry (glow off, on çarçuwasy).

Semantika

• Neon "gözellik üçin" däl-de, manyny (hereket/fokus/status) görkezýär.

18) Anti-patternler

Uly meýdanlaryň üznüksiz neon guýmalary → gözleriň ýadawlygy.
Yzygiderli ýalpyldawuk/impuls → gaharlanma we elýeterlilik problemalary.
Ýagty ýagtylygyň üstünde substratsyz tekst.
Onlyeke-täk signal reňk/ýagtylyk (görnüş/nyşan/nygtamak ýok).
Bir ekranda glow-yň utgaşdyrylmadyk intensiwligi (wizual "porsy").

19) A/B we metrikler

CTA düwmeleriniň we giriş ýalňyşlyklarynyň CTR-de glow intensiwligini (alfa/radius) synagdan geçiriň.
Neon-fokus girizilenden soň time-to-action we form ýalňyşlyklaryny yzarlamak.
UX-synlar (esasanam uzyn sessiýalarda).

20) Dizaýn-ulgamdaky resminamalar

"Neon/Accent" sahypasy: palitralar (önüm/marketing), glow bellikleri, komponentleriň mysallary, mikro-gatnaşyk wideo-demosy.
"Kontrast matrisi": 'fg × bg' we 'on-' üçin hakyky koeffisiýentler.
Frontend üçin preset-synplar we snippetler toplumy.

Gysgaça gysgaça

Gamble Hub üçin Neon/Accent - nokat, semantik, öndürijilikli. Yşyk, kontrasty we rahatlygy bozman, herekete seredýär. Hereketlendiriji - tokenler (OKLCH), "ýeňil" glow-presetler, berk ýagdaýlar, ýokary kontrastdaky öçürilip bilinýän täsirler. Bu bolsa markanyň ýagty häsiýetini berýär, ýöne amatly we çalt önüm bolup galýar.