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

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) # keytone 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 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' мәтіндері автоматты түрде есептеледі (қараңыз § 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 # 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) Жауапкершілік және 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 examples. 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)) ;/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/құжаттама

Компоненттер тек белгілерді ғана пайдаланады, тікелей 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-тексерулерді автоматтандырыңыз. Датавиздер үшін палитрларды бөлек жүргізіңіз. Бұл брендтің тұрақтылығын, өнімнің оқылушылығын және масштабталуын қамтамасыз етеді.