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) # keytone 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 to the 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 # ring contrast ≥ 3:1 to the disabled environment. 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 examples. 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)) ;/auto-fit/
}
[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.