Түс жүйесі және брендтік палитралар

1) Не үшін түсін рәсімдеу

• брендтің танымалдылығы мен көрнекі консистенттілігі,
• қол жетімділік (WCAG),
• (тақырыптар, платформалар, жергілікті жерлер),
• болжамды A/B-эксперименттер (контраст, CTR, қателер).

2) Жүйе негіздері: модельдер мен метрика

OKLCH (ұсынылады): перцептуалды біркелкі, 'H' реңкі сақталған кезде 'L' жарықтығын және 'C' қанықтығын бақылауға ыңғайлы.
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. Батырмаларды light және 'L 70 ≈ құю үшін' 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 +, төлем қателіктері) - ААА-ға бағытталамыз (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' матрицасы және CI-дегі WCAG тестілері.
• Датавизге арналған жеке палитралар (дальтонизмді қолдайтын).
• Мәнерлер линтері «дымқыл» түстерге тыйым салады.
• Гайдлайндағы «Ерекшеліктер мен себептер» беті.

17) Қарсы үлгілер

Бренд-акцентті бір UX сигналында «табыс/қате» деп араластыру.
Тек иерархияға ғана сүйену.
Жарық/қараңғы үндестірілмесін (тақырыптардың бірінде «кеткен» қарама-қарсылық).
Қатты HEX белгісі жоқ → бақыланбайтын интерфейс дрейфі.

Қысқаша түйіндеме

Жоғарыдан төмен қарай палитра жасаңыз: бренд-ядро → семантикалық рөлдер → тон шкаласы → тақырыптар → жай-күй. OKLCH-те жұмыс істеңіз, белгілерді бекітіңіз, 'on' және WCAG-тексерулерді автоматтандырыңыз. Датавиздер үшін палитрларды бөлек жүргізіңіз. Бұл брендтің тұрақтылығын, өнімнің оқылушылығын және масштабталуын қамтамасыз етеді.