System kolorów i markowe palety

1) Dlaczego sformalizować kolor

• świadomość marki i spójność wizualna,
• czytelność i dostępność (WCAG),
• interfejsy skalowania (tematy, platformy, lokalizacje),
• przewidywalne eksperymenty A/B (kontrast, CTR, błędy).

2) Fundamenty systemowe: modele i metryki

OKLCH (zalecany): jednolity percepcyjnie, wygodnie jest kontrolować lekkość 'L' i nasycenie' C', zachowując odcień 'H'.
Lab/LCH: również pasuje; OKLCH jest bardziej stabilny w percepcji.
sRGB: skończona przestrzeń wyświetlania; sumy są zawsze zatwierdzane w sRGB i WCAG.
Kontrast (WCAG 2. 2): tekst podstawowy ≥ 4. 5:1, duże ≥ 3:1; powiadomienia krytyczne - w miarę możliwości cel dla AAA (7:1).

3) Warstwy systemu: od marki po semantykę

1. Rdzeń marki: 1-2 odcienie marki (+ akcent nośny).
2. Semantyka interfejsu: role („podstawowe”, „wtórne”, „sukces”, „ostrzeżenie”, „niebezpieczeństwo”, „informacje”, „neutralne”).
3. Waga tonalna: stopnie lekkości (np. 25/50/100...900).
4. Тера: 'light '/' dark' (+ high-contrast, AMOLED).
5. Stany: „domyślnie/zawisnąć/aktywny/ostrość/wyłączony”.
6. Kontekst: powierzchnie („bg/base”, „bg/subtelne”, „bg/elevated”) i tekst („fg/primary”, „fg/secondary”, „fg/muted”).
7. Wizualizacja danych: oddzielne dyskretne i ciągłe palety.

4) Rdzeń marki: wybory i ograniczenia

Wybierz odcień i zdefiniuj roboczą lekkość dla marki w jasnych i ciemnych motywach (często 'L-0. 60–0. 70 'do napełniania przycisków w świetle i' L-0. 70–0. 80 'dla tekstu/ikon w ciemności).
Limit chrome 'C': high 'C' jest piękny na banerach, ale łamie czytelność w interfejsie użytkownika - zachowaj 2 wersje: „marketing” (bogaty) i „spożywczy” (bardziej powściągliwy).
Naprawić zmienne: główne ("marka/podstawowa"), alternatywne ("marka/alt') i neutralne wsparcie (" neutralne ").

5) Wagi tonalne

• W przypadku OKLCH przesuń kroki 'L' (np. 0. 98→0. 90→0. 80→…→0. 18) oraz „C” nieznacznie zmniejszają się do krawędzi skali, aby uniknąć „brudu” w świetle i „mętności” w ciemności.
• Naprawić punkty kontrolne: „50/100/300/500 (klucz )/700/900”.
• Na każdym kroku sprawdź kontrast pary z podstawowym tłem i z oczekiwanym kolorem tekstu.

Przykład marki/skali pierwotnej (OKLCH, przybliżony)

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) Role semantyczne i odwzorowanie

Oddzielna marka i semantyka: „sukces” nie musi być zielony.

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)

Teksty 'on-' są obliczane automatycznie (patrz § 10).

7) Jasne/ciemne motywy i powierzchnie

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)

Utrzymanie równych celów kontrastowych w obu dziedzinach; unikać „oślepiania” białego na czystej czerni - podnieść powierzchnię do ~ 0. 16.

8) Państwa i interaktywność

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) Odpowiedzialność i WCAG

Podstawowe teksty i ikony w sterownikach to ≥ 4. 5:1.
Kluczowe powiadomienia systemowe (KYC/AML, 18 +, błędy płatności) - cel AAA (7:1).
Pole stanów i granic - co najmniej 3:1.
Odróżnić linki nie tylko przez kolor (underscore/focus-style).

10) Tekst kontrastu auto-fit („on-”)

1. Według OKLCH, określić predlag. tekst „L _ on 'so that” (L_text vs L_bg) ≥ 4. 5:1`.

2. Jeśli chrom jest wysoki, dolny 'C _ text' do 0. 01–0. 03.

3. Dla ciemnego tematu podnieś 'L _ on' kolejne 0. 02–0. 04, aby zrównoważyć blask.

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

11) Wizualizacja danych

Kategoryczne palety: 8-12 kolorów odpornych na ślepotę kolorów (unikać czerwono-zielonych par bez alternatywnych znaków).
Ciągłe: od 'bg/elevated' do akcentu z kontrolą kontrastu podpisów.
Dodaj wzory/markery dla zauważalności bez koloru.

12) Kontekst międzynarodowy (stowarzyszenia kulturalne)

Rozważmy lokalne konotacje (np. czerwony - niebezpieczeństwo/uwaga; złoto - wygrana/nagroda).
Dla iGaming: Unikaj konfliktów sukcesu/zagrożenia z markowymi akcentami na jednym ekranie; ikonografia i podpis są ważniejsze niż „jasność”.

13) Integracja z systemem projektowania

13. 1 Nazywanie żetonów

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 Żetony (JSON/Słownik stylu)

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 zmienne CSS (warstwa tematyczna)

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/dokumentacja

Elementy używają tylko żetonów, bezpośrednie HEX/SRGB są zabronione przez liniowców.
W bibliotece - strona „Matryca kontrastu”: tabela 'fg × bg' z rzeczywistymi współczynnikami.

14) Procesy kontroli jakości

W projekcie: kontrola kontrastu na tablicach artystycznych (oba tryby), oddzielne ustawienia wstępne dla ślepoty kolorów.
W kodzie: pomocnicy jednostki obliczają kontrast i upadają w naruszeniach; migawki wizualne dla krytycznych ekranów.
W CI/CD: sprawdzanie wszystkich par żetonów i stanów, raportowanie ze składnikiem, motywem i rzeczywistą wartością.

15) Specyfika iGaming

Promocje i turnieje: Użyj nakładki i ograniczenia 'C' na tle, aby zapobiec „zatonięciu” tekstu.
Odpowiedzialne powiadomienia (limity, 18 +, ryzyko) - szczerze AAA.
Mierniki/tabele: Rozróżnić liczby i oznaki zmian (wg kształtu i kontrastu, nie tylko kolor.

16) Lista kontrolna wdrażania

• Definiuje się odcienie marki i ich wagi tonalne (OKLCH).
• Role, stany i powierzchnie są ustawione dla dwóch tematów.
• Automatyczna generacja „on-” z kontrastem docelowym.
• matryca „fg × bg” i testy WCAG w CI.
• Poszczególne palety dla dataviz (z obsługą ślepoty kolorowej).
• Style Lintera zabraniają „surowych” kolorów.
• Wyjątki i powody strony w wytycznych.

17) Anty-wzory

Wymieszaj nacisk marki z sukcesem/błędem w jednym sygnale UX.
Polegaj tylko na nasyceniu dla hierarchii.
Nie synchronizować światła/ciemności (kontrast „lewy” w jednym z tematów).
Twardy HEX bez żetonów → niekontrolowany dryf interfejsu.

Krótkie podsumowanie

Zbuduj paletę od góry do dołu: rdzeń marki → role semantyczne → wagi tonalne → motywy → stany. Praca w OKLCH, tokeny szpilkowe, automatyczne 'on-' i kontrole WCAG. Osobno wpisz palety dla dataviz. Zapewni to spójność marki, czytelność i skalowalność produktu.