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) # keytone 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 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-' 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 # 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) 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 examples. 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)) ;/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/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.