Колірна система та брендові палітри

1) Навіщо формалізувати колір

• впізнаваності бренду і візуальної консистентності,
• читання та доступності (WCAG),
• масштабування інтерфейсів (теми, платформи, локалі),
• передбачуваних A/B-експериментів (контраст, CTR, помилки).

2) Підстави системи: Моделі та метрики

OKLCH (рекомендується): перцептуально рівномірна, зручно контролювати світлоту'L'і насиченість'C'при збереженні відтінку'H'.
Lab/LCH: також годиться; OKLCH стабільніше по сприйняттю.
sRGB: кінцевий простір відображення; підсумкові значення завжди валідуємо в sRGB і по WCAG.
Контраст (WCAG 2. 2): базовий текст ≥ 4. 5:1, великий ≥ 3:1; критичні повідомлення - цілитися в AAA (7:1) там, де це можливо.

3) Шари системи: від бренду до семантики

1. Бренд-ядро: 1-2 фірмових відтінку (+ підтримуючий акцент).
2. Семантика інтерфейсу: роли (`primary`, `secondary`, `success`, `warning`, `danger`, `info`, `neutral`).
3. Шкали тонів: кроки по світлоті (наприклад, 25/50/100...900).
4. Теми: `light` / `dark` (+ high-contrast, AMOLED).
5. Стани: `default/hover/active/focus/disabled`.
6. Контекст: поверхонь ('bg/base','bg/subtle','bg/elevated') і тексту ('fg/primary','fg/secondary','fg/muted').
7. Візуалізація даних: окремі дискретні та безперервні палітри.

4) Бренд-ядро: вибір та обмежувачі

Виберіть головний відтінок (Hue) і визначте робочу світлоту для бренду в світлій і темній темах (часто'L≈0. 60–0. 70'для заливки кнопок в light і'L≈0. 70–0. 80'для тексту/іконок в dark).
Обмежте хрому «C»: високі'C'красиво на банерах, але ламають читаність в UI - тримайте 2 версії: «маркетингова» (насичена) і «продуктова» (стриманіша).
Зафіксуйте варіативи: основний ('brand/primary'), альтернативний ('brand/alt') і нейтральна опора ('neutral').

5) Шкали тонів (tonal scales)

• Для OKLCH рухайте'L'ступенями (напр., 0. 98→0. 90→0. 80→…→0. 18), а'C'злегка зменшуйте до країв шкали, щоб уникнути «бруду» в світлих і «каламутності» в темних.
• Фіксуйте контрольні точки: `50/100/300/500 (key)/700/900`.
• На кожному кроці перевіряйте контраст пари з базовим фоном і з очікуваним кольором тексту.

Приклад шкали brand/primary (OKLCH, наближено)

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) Семантичні ролі та мапінг

Поділяйте бренд і семантику: «успіх» не зобов'язаний бути бренд-зеленим.

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-» розраховуються автоматично (див. § 10).

7) Світла/темна теми і поверхні

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)

Зберігайте рівні цілі контрасту в обох темах; уникайте «сліпучих» білих на чистому чорному - піднімайте'L'фону до ~ 0. 16.

8) Стани та інтерактивність

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) Відповідальність і WCAG

Базовий текст та іконки в керуючих елементах - ≥ 4. 5:1.
Ключові системні повідомлення (KYC/AML, 18 +, платіжні помилки) - цілимося в AAA (7:1).
Стану та межі полів - не нижче 3:1.
Посилання відрізняйте не тільки кольором (підкреслення/focus-стиль).

10) Автопідбір контрастного тексту ('on-')

1. За OKLCH визначити текст'L _ on'так, щоб'( L_text vs L_bg) ≥ 4. 5:1`.

2. Якщо хрому висока, знизити'C _ text'до 0. 01–0. 03.

3. Для темної теми піднімати'L _ on'ще на 0. 02–0. 04, щоб компенсувати глейр.

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

11) Візуалізація даних

Категоріальні палітри: 8-12 кольорів, стійких до дальтонізму (уникайте пар «червоний-зелений» без альтернативних ознак).
Безперервні: від'bg/elevated'до акценту з контролем контрасту підписів.
Додавайте патерни/маркери для різниці без кольору.

12) Міжнародний контекст (культурні асоціації)

Враховуйте локальні конотації (напр., червоний - небезпека/увага; золото - виграш/приз).
Для iGaming: уникайте конфліктів «успіх/небезпека» з брендовими акцентами в одному екрані; іконографія і підписи важливіші за «яскравість».

13) Інтеграція в дизайн-систему

13. 1 Іменування токенів

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 Токени (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-змінні (шар тем)

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/документація

Компоненти використовують тільки токени, прямі HEX/SRGB заборонені лінтерами.
У бібліотеці - сторінка «Матриця контрасту»: таблиця'fg × bg'з фактичними коефіцієнтами.

14) Процеси контролю якості

У дизайні: перевірка контрасту на артбордах (обидва режими), окремі пресети для дальтонізму.
В коді: юніт-хелпери обчислюють контраст і падають при порушеннях; візуальні снепшоти для критичних екранів.
У CI/CD: перевірка всіх пар токенів і станів, звіт з компонентом, темою і фактичним значенням.

15) Специфіка iGaming

Промо і турніри: використовуйте оверлів і обмеження'C'на фонах, щоб текст не «тонув».
Відповідальні повідомлення (ліміти, 18 +, ризики) - щиро AAA.
Метрики/таблиці: числа і знаки змін (↑/↓) розрізняйте формою і контрастом, а не тільки кольором.

16) Чек-лист впровадження

Визначено бренд-відтінки та їх тональні шкали (OKLCH).

• Задані ролі, стани і поверхні для двох тем.
• Автогенерація'on-'з цільовим контрастом.
• Матриця'fg × bg'і тести WCAG в CI.
• Окремі палітри для датавіз (з підтримкою дальтонізму).
• Лінтер стилів забороняє «сирі» кольори.
• Сторінка «Винятки і причини» в гайдлайні.

17) Анти-патерни

Змішувати бренд-акцент з «успіх/помилка» в одному UX-сигналі.
Покладатися тільки на насиченість для ієрархії.
Не синхронізувати light/dark (контраст «поїхав» в одній з тем).
Жорсткий HEX без токенів → неконтрольований дрейф інтерфейсу.

Коротке резюме

Будуйте палітру зверху вниз: бренд-ядро → семантичні ролі → шкали тонів → теми → стану. Працюйте в OKLCH, закріплюйте токени, автоматизуйте'on-'і WCAG-перевірки. Окремо ведіть палітри для датавіз. Це дасть консистентність бренду, читаність і масштабованість продукту.