Түс системасы жана бренддик палитра

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. 70 'light жана' L ≈ 0 баскычтарын толтуруу үчүн. 70–0. 80 'кара текст/иконалар үчүн).
Chrome 'C' менен чектелсин: жогорку 'C' баннерлерде кооз, бирок UIде окууга жөндөмдүүлүктү бузат - 2 версияны сактаңыз: "маркетинг" (бай) жана "азык-түлүк" (токтоо).
негизги ('brand/primary'), альтернатива ('brand/alt') жана нейтралдуу таяныч ('neutral').

5) обондордун шкала (тонал 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) Семантикалык ролдору жана mapping

Бренд менен семантиканы бөлүшүңүз: "ийгилик" бренд-жашыл болушу керек эмес.

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)

Эки темада тең карама-каршы максаттарды сактаңыз; таза кара "сокур" ак алыс - ~ 0 чейин 'L' фонду көтөрүп. 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 өзгөчөлүктөрү

Промо жана турнирлер: текст "чөгүп" эмес, арткы бетинде overley жана 'C' чектөө колдонуу.
Жоопкерчиликтүү билдирүүлөр (лимиттер, 18 +, тобокелдиктер) - чын жүрөктөн AAA.
Метрика/таблицалар: сандарды жана өзгөрүүлөрдүн белгилерин (↑/↓) түс менен гана эмес, формасы жана карама-каршылыгы менен айырмалаңыз.

16) Киргизүү чек-тизмеси

• Бренд көлөкөлөрү жана алардын тоналдык шкаласы (OKLCH) аныкталган.
• эки темалар үчүн ролдорду, шарттарды жана бетин белгиленген.
• Автогенерация 'on-' максаттуу контраст менен.
• Matrix 'fg × bg' жана WCAG тесттер CI.
• dataviz үчүн өзүнчө палитра (далтонизм колдоо менен).
• Линтер стилдери "чийки" түстөрдү тыюу салат.
• Гайдлайндагы "Өзгөчөлүктөр жана себептер" баракчасы.

17) Анти-үлгүлөрү

бир UX сигналы менен "ийгилик/ката" менен бренд басым аралаштырып.
Иерархия үчүн гана каныккандыкка таянуу.
жарык/dark синхрондоштуруу эмес (контраст темалардын биринде "кетти").
Катуу HEX эч кандай белгилер → көзөмөлсүз drift interface.

Кыскача резюме

жогорку төмөн палитра куруу: бренд-өзөк → семантикалык ролдору → обон шкаласы → тема → абалы. OKLCH менен иштөө, токендерди бекитүү, 'on' жана WCAG текшерүүлөрүн автоматташтыруу. Өзүнчө dataviz үчүн палитра жүргүзүү. Бул бренддин консистенттүүлүгүн, буюмдун окулушу жана масштабдуулугун берет.