Renk sistemi ve markalı paletler

1) Neden rengi resmileştirmek

• marka bilinirliği ve görsel tutarlılık,
• Okunabilirlik ve kullanılabilirlik (WCAG),
• Ölçeklendirme arayüzleri (temalar, platformlar, yerel ayarlar),
• Öngörülebilir A/B deneyleri (kontrast, TO, hatalar).

2) Sistem temelleri: modeller ve metrikler

OKLCH (önerilen): algısal olarak tekdüze, 'H' gölgesini korurken 'L've doygunluk' C 'hafifliğini kontrol etmek uygundur.
Lab/LCH: ayrıca uygun; OKLCH algıda daha kararlıdır.
sRGB: sonlu ekran alanı; Toplamlar her zaman sRGB ve WCAG'de doğrulanır.
Kontrast (WCAG 2. 2): temel metin ≥ 4. 5:1, büyük ≥ 3:1; Kritik bildirimler - mümkünse AAA'yı (7:1) hedefleyin.

3) Sistemin katmanları: markadan semantiğe

1. Marka çekirdeği: 1-2 markalı tonlar (+ destekleyici vurgu).
2. Arayüz semantiği: roller ('birincil', 'ikincil', 'başarı', 'uyarı', 'tehlike', 'bilgi', 'nötr').
3. Ton ölçekleri: hafiflik adımları (örn. 25/50/100...900).
4. Темы: 'Açık'/' karanlık' (+ yüksek kontrastlı, AMOLED).
5. Durumlar: 'default/hover/active/focus/disabled'.
6. Bağlam: yüzeyler ('bg/base', 'bg/subtil', 'bg/elevated') ve metin ('fg/primary', 'fg/secondary', 'fg/sessize alınmış').
7. Veri görselleştirme: ayrı ayrı ve sürekli paletler.

4) Marka çekirdeği: seçimler ve kısıtlamalar

Ton'u seçin ve markanın çalışma açıklığını açık ve koyu temalarda (genellikle 'L≈0 tanımlayın. 60–0. 70 'düğmeleri ışıkta ve L≈0 doldurmak için. 70–0. 80 'karanlıkta metin/simgeler için).
'C' kromunu sınırlayın: yüksek 'C' afişlerde güzeldir, ancak UI'de okunabilirliği bozar - 2 sürümü saklayın: "pazarlama" (zengin) ve "bakkal" (daha kısıtlı).
Değişkenleri düzeltin: ana ('marka/birincil'), alternatif ('marka/alt') ve nötr destek ('nötr').

5) Ton ölçekleri

• OKLCH için, 'L' adımlarını hareket ettirin (örn. 0. 98→0. 90→0. 80→…→0. 18) ve 'C', ışıkta "kir've karanlıkta" bulanıklıktan "kaçınmak için ölçeğin kenarlarına hafifçe indirgenir.
• Kontrol noktalarını düzeltin: '50/100/300/500 (anahtar )/700/900'.
• Her adımda, çiftin kontrastını temel arka planla ve beklenen metin rengiyle kontrol edin.

Marka/birincil ölçek örneği (OKLCH, yaklaşık)

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) Anlamsal roller ve haritalama

Ayrı marka ve semantik: "Başarı" marka yeşili olmak zorunda değildir.

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-' metinleri otomatik olarak hesaplanır (bkz. § 10).

7) Işık/karanlık temalar ve yüzeyler

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)

Her iki temada da eşit kontrast hedeflerini korumak; Saf siyah üzerinde beyazı "körleştirmekten" kaçının - 'L' arka planını ~ 0'a yükseltin. 16.

8) Durumlar ve etkileşim

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) Sorumluluk ve WCAG

Kontrollerdeki temel metin ve simgeler ≥ 4'tür. 5:1.
Anahtar sistem bildirimleri (KYC/AML, 18 +, ödeme hataları) - AAA'yı hedefler (7:1).
Alan durumları ve sınırları - en az 3:1.
Bağlantıları yalnızca renkle değil (alt çizgi/odak stili) ayırt edin.

10) Kontrast metni otomatik sığdırma ('on-')

1. OKLCH'e göre, predlag'ı belirleyin. Metin 'L _ on' böylece '(L_text vs L_bg) ≥ 4. 5:1`.

2. Krom yüksekse, 'C _ text' değerini 0'a düşürün. 01–0. 03.

3. Karanlık bir tema için, 'L _ on' başka bir 0 yükseltin. 02–0. Parlamayı dengelemek için 04.

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

11) Veri görselleştirme

Kategorik paletler: Renk körlüğüne karşı dirençli 8-12 renk (alternatif işaretler olmadan kırmızı-yeşil çiftlerden kaçının).
Sürekli: 'bg/elevated'den imzaların kontrast kontrolü ile aksana.
Renk olmadan ayırt edilebilirlik için desenler/işaretleyiciler ekleyin.

12) Uluslararası bağlam (kültürel dernekler)

Yerel çağrışımları göz önünde bulundurun (örn. kırmızı - tehlike/dikkat; altın - kazanma/ödül).
IGaming için: Tek bir ekranda markalı aksanlarla başarı/tehlike çatışmalarından kaçının; İkonografi ve imza "parlaklık'tan daha önemlidir.

13) Tasarım sistemine entegrasyon

13. 1 Belirteçleri adlandırma

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 Jeton (JSON/Stil Sözlüğü)

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 değişkenleri (tema katmanı)

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/dokümantasyon

Bileşenler sadece belirteçleri kullanır, doğrudan HEX/SRGB linters tarafından yasaklanmıştır.
Kütüphanede - sayfa "Kontrast matris": tablo 'fg × bg' gerçek katsayıları ile.

14) Kalite kontrol süreçleri

Tasarımda: çalışma yüzeylerinde kontrast denetimi (her iki mod), renk körlüğü için ayrı hazır ayarlar.
Kodda: birim yardımcıları kontrastı hesaplar ve ihlallerde düşer; Kritik ekranlar için görsel anlık görüntüler.
CI/CD'de: tüm belirteç ve durum çiftlerini kontrol eder, bileşen, tema ve gerçek değerle rapor verir.

15) iGaming'in özellikleri

Promosyonlar ve turnuvalar: Metnin 'batmasını' önlemek için arka planlardaki bindirme ve 'C' kısıtlamasını kullanın.
Sorumlu bildirimler (limitler, 18 +, riskler) - içtenlikle AAA.
Metrikler/tablolar: Sayıları ve değişiklik işaretlerini (↑/↓) sadece renk değil, şekil ve kontrast ile ayırt edin.

16) Uygulama kontrol listesi

• Marka tonları ve tonal ölçekleri (OKLCH) tanımlanmıştır.
• Roller, durumlar ve yüzeyler iki tema için ayarlanır.
• Hedef kontrastlı otomatik nesil 'on-'.
• 'fg × bg' matris ve CI WCAG testleri.
• Dataviz için bireysel paletler (renk körlüğü desteği ile).
• Linter stilleri "ham" renkleri yasaklar.
• Kılavuzdaki İstisnalar ve Nedenler sayfası.

17) Anti-desenler

Marka vurgusunu bir UX sinyalinde başarı/hata ile karıştırın.
Hiyerarşi için yalnızca doygunluğa güvenin.
Açık/koyu senkronize etmeyin (temalardan birinde'sol "kontrastı).
Belirteçler olmadan sert HEX - kontrolsüz arayüz kayması.

Kısa özet

Yukarıdan aşağıya bir palet oluşturun: marka çekirdeği - anlamsal roller - ton ölçekleri - temalar - durumlar. OKLCH'de çalışın, belirteçleri sabitleyin, 'on-'ve WCAG kontrollerini otomatikleştirin. Ayrı olarak, dataviz için paletleri girin. Bu, marka tutarlılığı, okunabilirlik ve ürün ölçeklenebilirliği sağlayacaktır.