Reňk ulgamy we marka palitralary

1) Näme üçin reňk resmileşdirmeli?

• markanyň tanalmagy we wizual yzygiderlilik,
• okalmagy we elýeterliligi (WCAG),
• interfeýsleri masştablamak (mowzuklar, platformalar, lokallar),
• öňünden aýdyp boljak A/B synaglary (kontrast, CTR, ýalňyşlyklar).

2) Ulgamyň esaslary: modeller we metrikler

OKLCH (maslahat berilýär): perseptual taýdan birmeňzeş, 'L' ýagtylygyny we 'H' kölegesini saklamak bilen 'C' doýgunlygyny gözegçilikde saklamak amatly.
Lab/LCH: hem amatly; OKLCH duýmak taýdan has durnukly.
sRGB: ahyrky görkeziş giňişligi; jemleýji bahalary elmydama sRGB we WCAG boýunça tassyklaýarys.
Kontrast (WCAG 2. 2): esasy teksti ≥ 4. 5:1, uly ≥ 3:1; tankydy habarnamalar - AAA-ny nyşana almak (7:1) mümkin bolan ýerlerde.

3) Ulgamyň gatlaklary: markadan semantika

1. Marka-özeni: 1-2 marka kölegesi (aksenti goldaýan).
2. Interfeýsiň semantikasy: rollar ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral').
3. Äheň şkalalary: ýagtylyk boýunça ädimler (mysal üçin, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Şertler: 'default/hover/active/focus/disabled'.
6. Kontekst: ýüzler ('bg/base', 'bg/subtle', 'bg/elevated') we tekst ('fg/primary', 'fg/secondary', 'fg/muted').
7. Maglumatlary wizuallaşdyrmak: aýratyn diskret we üznüksiz palitralar.

4) Marka-ýadro: saýlamak we çäklendirijiler

Esasy kölegäni (Hue) saýlaň we açyk we garaňky temalarda (köplenç 'L ≈ 0 marka üçin iş ýagtylygyny kesgitläň. 60–0. 70 'lightdaky düwmeleri doldurmak üçin we' L ≈ 0. 70–0. 80 'üçin/nyşanlar dark).
Krom 'C' -ni çäklendiriň: beýik 'C' -ni bannerlerde owadan, ýöne UI okalyşyny bozýarlar - 2 wersiýany saklaň: "marketing" (baý) we "azyk" (has sakly).
Variatiwleri düzüň: esasy ('brand/primary'), alternatiw ('brand/alt') we bitarap ('neutral').

5) Äheň şkalalary (tonal scales)

• OKLCH üçin 'L' ädimleri bilen hereket ediň (mysal üçin, 0. 98→0. 90→0. 80→…→0. 18), a 'C' ýagtylykda "hapa" we garaňkylykda "palçykdan" gaça durmak üçin şkalanyň gyralaryna birneme kiçeldiň.
• Gözegçilik nokatlaryny belläň: '50/100/300/500 (key )/700/900'.
• Her ädimde esasy fon we garaşylýan tekst reňki bilen jübütiň kontrastyny barlaň.

Brand/primary şkalasynyň mysaly (OKLCH, takmynan)

brand.primary.50  = oklch(0.98 0.03 230)
brand.primary.100 = oklch(0.94 0.05 230)
brand.primary.300 = oklch(0.86 0.08 230)
brand.primary.500 = oklch(0.74 0.10 230) # ключевой тон brand.primary.700 = oklch(0.56 0.09 230)
brand.primary.900 = oklch(0.32 0.07 230)

6) Semantiki rollar we mapping

Marka bilen semantikany bölüň: "üstünlik" marka-ýaşyl bolmaly däldir.

role.primary.bg    -> brand.primary.500 role.primary.text   -> fg.on-primary     # ≥ 4.5:1 к role.primary.bg role.success.bg    -> green.500 role.warning.bg    -> amber.500 role.danger.bg    -> red.500 role.info.bg     -> blue.500 role.neutral.bg    -> gray.200/700 (light/dark)

"On" tekstleri awtomatiki usulda hasaplanylýar (§ 10 serediň).

7) Açyk/garaňky mowzuklar we ýüzler

light:
bg/base   = oklch(0.98 0.01 260)
bg/subtle  = oklch(0.96 0.01 260)
bg/elevated = oklch(0.93 0.01 260)
fg/primary  = oklch(0.18 0.03 260) # ≈7:1 к bg/base fg/secondary = oklch(0.32 0.03 260) # ≥4.5:1 border    = oklch(0.80 0.02 260)

dark:
bg/base   = oklch(0.16 0.01 260)
bg/subtle  = oklch(0.20 0.01 260)
bg/elevated = oklch(0.24 0.01 260)
fg/primary  = oklch(0.90 0.02 260)
fg/secondary = oklch(0.78 0.02 260)
border    = oklch(0.34 0.02 260)

Iki mowzukda hem deň kontrast maksatlaryny saklaň; Arassa gara reňkde "kör" aklardan gaça duruň - 'L' fony 0-a ~. 16.

8) Ýagdaýlar we interaktiwlik

button/primary:
default.bg = brand.primary.500 hover.bg  = brand.primary.500 with +ΔC(0.01) -ΔL(0.02)
active.bg = brand.primary.700 focus.ring = brand.primary.300 # контраст кольца ≥ 3:1 к окружению disabled.bg= neutral.200 (light) / neutral.700 (dark)
text.on  = auto-contrast(default.bg)    # ≥ 4.5:1

9) Jogapkärçilik we WCAG

Dolandyryş elementlerindäki esasy tekst we nyşanlar - ≥ 4. 5:1.
Esasy ulgam habarnamalary (KYC/AML, 18 +, töleg ýalňyşlyklary) - AAA-ny nyşana alýarys (7:1).
Meýdanlaryň ýagdaýy we çäkleri - 3: 1-den pes bolmaly däldir.
Baglanyşyklary diňe bir reňk bilen tapawutlandyrmaň (çyzmak/focus stili).

10) Kontrast teksti awtomatiki saýlamak ('on-')

1. OKLCH boýunça bellikler. 'L _ on' (L_text vs L_bg) teksti ≥ 4. 5:1`.

2. Eger hrom ýokary bolsa, 'C _ text' -ni 0-a çenli peseldiň. 01–0. 03.

3. Garaňky tema üçin 'L _ on' -y ýene 0-a göteriň. 02–0. 04 gleiriň öwezini dolmak üçin.

fg.on(colorX) = auto(colorX, targetContrast=4.5)

11) Maglumatlary wizuallaşdyrmak

Kategoriýa palitralary: 8-12 reňk, aralyga çydamly (alternatiw alamatlarsyz "gyzyl-ýaşyl" bugdan gaça duruň).
Dowamly: 'bg/elevated' -den gollaryň kontrastyna gözegçilik edýän aksente.
Reňksiz tapawutlandyrmak üçin pattern/marker goşuň.

12) Halkara kontekst (medeni birleşikler)

Lokal baglanyşyklary göz öňünde tutuň (mysal üçin, gyzyl - howp/üns; altyn - ýeňiş/baýrak).
iGaming üçin: bir ekranda marka aksentleri bilen "üstünlik/howp" gapma-garşylyklaryndan gaça duruň; ikonografiýa we gollar "ýagtylykdan" has möhümdir.

13) Dizaýn ulgamyna integrasiýa

13. 1 Bellikleri atlandyrmak

color.{theme}.{role    surface    brand}.{state    step}
примеры color.light.brand.primary.500 color.dark.role.success.bg color.light.surface.bg.base color.light.fg.on-primary

13. 2 Bellikler (JSON/Style Dictionary)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0.98 0.01 260)"} },
"brand":  { "primary": { "500": "oklch(0.74 0.10 230)" } },
"role":  { "primary": { "bg": "{color.light.brand.primary.500}" },
"danger": { "bg": "oklch(0.62 0.12 25)" } },
"fg": { "primary": "oklch(0.18 0.03 260)",
"on-primary": "auto({color.light.role.primary.bg},4.5)" }
}
}
}

13. 3 CSS üýtgemeleri (mowzuk gatlagy)

css
:root[data-theme="light"] {
--bg-base: oklch(0.98 0.01 260);
--brand-primary-500: oklch(0.74 0.10 230);
--fg-primary: oklch(0.18 0.03 260);
--on-primary: color-contrast(var(--brand-primary-500)); / автоподбор /
}
[data-theme="dark"] {
--bg-base: oklch(0.16 0.01 260);
--brand-primary-500: oklch(0.74 0.10 230);
--fg-primary: oklch(0.90 0.02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 Figma/resminamalar

Komponentler diňe bellikleri ulanýarlar, göni HEX/SRGB linterler tarapyndan gadagan edilýär.
Kitaphanada - "Kontrast matrisa" sahypasy: hakyky koeffisiýentleri bolan 'fg × bg' tablisasy.

14) Hil gözegçiligi prosesleri

Dizaýnda: artbordlarda kontrasty barlamak (iki re regimeim), distonizm üçin aýratyn presetler.
Kodda: birlik-halperler kontrasty hasaplaýarlar we düzgün bozulan halatynda ýykylýar; möhüm ekranlar üçin wizual snepşotlar.
CI/CD-de: ähli jübütleri we ýagdaýlary barlamak, komponent, tema we hakyky many bilen hasabat.

15) iGaming aýratynlyklary

Mahabatlar we ýaryşlar: Tekstiň "gark bolmazlygy" üçin fonda overley we 'C' çäklendirmesini ulanyň.
Jogapkär habarnamalar (çäkler, 18 +, töwekgelçilikler) - AAA.
Metrikler/tablisalar: üýtgeşmeleriň sanlaryny we alamatlaryny (↑/↓) diňe reňk bilen däl, görnüşi we gapma-garşylygy bilen tapawutlandyryň.

16) Girizmegiň çek-sanawy

• Marka kölegeleri we olaryň äheňleri (OKLCH) kesgitlenildi.
• Iki mowzuk üçin rollar, ýagdaýlar we ýüzler berildi.
• Maksatly kontrast bilen 'on-' awtogenerasiýasy.
• CI-de 'fg × bg' matrisi we WCAG synaglary.
• Datawiz üçin aýratyn palitralar (daltonizmi goldaýan).
• Stilleriň linteri "çig" reňkleri gadagan edýär.
• Gidline "Kadadan çykmalar we sebäpler" sahypasy.

17) Anti-patternler

Marka-aksenti bir UX signalynda "üstünlik/ýalňyşlyk" bilen garyşdyryň.
Diňe iýerarhiýa üçin doýgunlyga bil bagla.
"Light/dark" -y sinhronlaşdyrma (mowzuklaryň birinde "giden" kontrast).
Belliksiz gaty HEX → gözegçiliksiz interfeýs süýşmesi.

Gysgaça gysgaça

Palitrany ýokardan aşak guruň: marka-ýadro → semantik rollar → äheňler ölçegi → mowzuklar → ýagdaýlar. OKLCH-de işläň, bellikleri düzäň, on- we WCAG barlaglaryny awtomatlaşdyryň. Datawiz üçin aýratyn palitralary geçiriň. Bu, markanyň yzygiderliligini, önümiň okalmagyny we ulalmagyny üpjün eder.