Rəng sistemi və marka palitraları

1) Niyə rəng rəsmiləşdirmək

• marka tanınması və vizual uyğunluq,
• oxuculuq və əlçatanlıq (WCAG),
• interfeyslərin (mövzular, platformalar, lokallar) ölçülməsi,
• proqnozlaşdırıla bilən A/B-təcrübələri (kontrast, CTR, səhvlər).

2) Sistemin əsasları: modellər və metriklər

OKLCH (tövsiyə olunur): «H» kölgəsini saxlayarkən «L» işıqlığını və «C» doyumunu idarə etmək üçün əlverişlidir.
Lab/LCH: həm də uyğun; OKLCH qavrayışda daha sabitdir.
sRGB: son ekran sahəsi; son qiymətlər həmişə sRGB və WCAG tərəfindən təsdiqlənir.
Kontrast (WCAG 2. 2): əsas mətn ≥ 4. 5:1, böyük ≥ 3:1; kritik bildirişlər - mümkün olan yerdə AAA (7:1) hədəf.

3) Sistem qatları: markadan semantikaya

1. Marka nüvəsi: 1-2 marka çalarları (+ dəstəkləyici vurğu).
2. Interfeys semantikası: rollar ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral').
3. Tonların şkalası: işıqlıq addımları (məsələn, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Hallar: 'default/hover/active/focus/disabled'.
6. Kontekst: səthlər ('bg/base', 'bg/subtle', 'bg/elevated') və mətn ('fg/primary', 'fg/secondary', 'fg/muted').
7. Verilənlərin vizuallaşdırılması: ayrı-ayrı diskret və davamlı palitralar.

4) Marka-nüvə: seçim və məhdudiyyətlər

Əsas çalarları seçin (Hue) və işıqlı və qaranlıq mövzularda (tez-tez 'L ≈ 0 marka üçün iş işığını təyin edin. 60–0. 70 'light və' L ≈ 0 düymələrini doldurmaq üçün. 70–0. 80 'üçün mətn/ikonlar dark).
«C» xromunu məhdudlaşdırın: yüksək 'C' bannerlərdə gözəldir, lakin UI-də oxuculuğu pozur - 2 versiyanı saxlayın: «marketinq» (zəngin) və «məhsul» (təmkinli).
Variativləri düzəldin: əsas ('brand/primary'), alternativ ('brand/alt') və neytral dayaq ('neutral').

5) Tonların şkalası (tonal scales)

• OKLCH üçün 'L' addımlarını hərəkət etdirin (məs., 0. 98→0. 90→0. 80→…→0. 18), a 'C' yüngül və qaranlıq «bulanıqlıq» «çirkli» qarşısını almaq üçün ölçü kənarlarına qədər kiçik.
• Nəzarət nöqtələrini qeyd edin: '50/100/300/500 (key )/700/900'.
• Hər addımda əsas fon və gözlənilən mətn rəngi ilə cütlüyün kontrastını yoxlayın.

Nümunə ölçüsü brand/primary (OKLCH, təxminən)

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) Semantik rollar və mappinq

Marka və semantikanı bölüşün: «uğur» marka yaşıl olmalıdır.

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-' mətnləri avtomatik hesablanır (bax § 10).

7) Yüngül/qaranlıq mövzular və səthlər

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)

Hər iki mövzuda bərabər kontrast məqsədləri saxlayın; təmiz qarada «kor» ağlardan çəkinin - 'L' fonu ~ 0-a qaldırın. 16.

8) Vəziyyət və interaktivlik

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) Məsuliyyət və WCAG

Əsas mətn və idarəetmə elementlərində nişanlar - ≥ 4. 5:1.
Əsas sistem bildirişləri (KYC/AML, 18 +, ödəniş səhvləri) - AAA-ya nişan alın (7:1).
Sahələrin vəziyyəti və sərhədləri - 3: 1-dən aşağı deyil.
Linklər yalnız rəng deyil (vurğulama/focus-stil).

10) Əks mətnin avtomatik seçilməsi ('on-')

1. Ilə OKLCH müəyyən etmək. mətn 'L _ on' ki, '(L_text vs L_bg) ≥ 4. 5:1`.

2. Xrom yüksəkdirsə, 'C _ text' 0-a endirin. 01–0. 03.

3. Qaranlıq mövzu üçün 'L _ on' daha qaldırmaq 0. 02–0. 04 gleir kompensasiya.

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11) Verilənlərin vizuallaşdırılması

Kateqoriya palitraları: 8-12 rəng, tonizmə davamlı (alternativ əlamətlər olmadan «qırmızı-yaşıl» buxardan çəkinin).
Davamlı: 'bg/elevated' -dən imza kontrastına nəzarət edən aksentə.
Rəngsiz fərqlilik üçün nümunələr/markerlər əlavə edin.

12) Beynəlxalq kontekst (mədəniyyət assosiasiyaları)

Yerli konnotasiyaları nəzərə alın (məsələn, qırmızı - təhlükə/diqqət; qızıl - qalib/mükafat).
iGaming üçün: bir ekranda marka vurğuları ilə «uğur/təhlükə» münaqişələrindən çəkinin; İkonoqrafiya və imzalar "parlaqlıq 'dan daha vacibdir.

13) Dizayn sisteminə inteqrasiya

13. 1 Tokenlərin adlandırılması

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 Tokenlər (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 dəyişənləri (mövzu təbəqəsi)

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/sənədləşmə

Komponentlər yalnız tokenlərdən istifadə edir, birbaşa HEX/SRGB linterlər tərəfindən qadağan edilir.
Kitabxanada - «Kontrast matrisi» səhifəsi: faktiki əmsalları olan 'fg × bg' cədvəli.

14) Keyfiyyətə nəzarət prosesləri

Dizaynda: artbordlarda kontrastın yoxlanılması (hər iki rejim), dal tonizm üçün ayrı-ayrı presetlər.
Kodda: Birlik köməkçiləri kontrastı hesablayır və pozuntular zamanı düşür; kritik ekranlar üçün vizual snepshot.
CI/CD-də: bütün cüt tokenlərin və halların yoxlanılması, komponent, mövzu və faktiki dəyəri ilə hesabat.

15) iGaming xüsusiyyətləri

Promo və turnirlər: mətn «batmaz» üçün arxa planda overley və 'C' limiti istifadə edin.
Məsuliyyətli bildirişlər (limitlər, 18 +, risklər) - səmimi AAA.
Metriklər/cədvəllər: rəqəmlər və dəyişiklik işarələri (↑/↓) yalnız rənglə deyil, forma və kontrastla fərqləndirin.

16) Giriş çek siyahısı

• Marka çalarları və onların ton şkalaları (OKLCH) müəyyən edilmişdir.
• İki mövzu üçün rollar, hallar və səthlər təyin edilmişdir.
• Avtogenerasiya 'on-' hədəf kontrast ilə.
• Matrix 'fg × bg' və CI WCAG testləri.
• Dataviz üçün ayrı palitralar (daltonizm dəstəkləyir).
• Linter stilləri «xam» rəngləri qadağan edir.
• «Istisnalar və səbəblər» səhifəsi.

17) Anti-nümunələr

Marka vurğusunu bir UX siqnalında «uğur/səhv» ilə qarışdırın.
Yalnız iyerarxiya üçün doygunluğa güvənmək.
İşıq/qaranlığı sinxronlaşdırmayın (mövzulardan birində kontrast «getdi»).
Sabit HEX heç bir token → nəzarətsiz sürüklənmə interfeysi.

Qısa xülasə

Palitranı yuxarıdan aşağıya doğru qurun: marka nüvəsi → semantik rollar → ton şkalası → mövzu → vəziyyət. OKLCH-də çalışın, tokenləri düzəldin, «on» və WCAG yoxlamalarını avtomatlaşdırın. Ayrıca dataviz üçün palitraları aparın. Bu brendin davamlılığını, məhsulun oxunuşunu və miqyasını verəcəkdir.