Системаи рангӣ ва палитрҳои бренди

1) Чаро рангро ба расмият дароред

• огоҳии бренд ва пайдарҳамии визуалӣ,
• хондан ва дастрасӣ (WCAG),
• интерфейси миқёс (мавзӯъҳо, платформаҳо, маҳалҳо),
• таҷрибаҳои пешгӯишавандаи A/B (контраст, CTR, хатогиҳо).

2) таҳкурсии система: моделҳо ва ченакҳо

OKLCH (тавсия дода мешавад): дарки яксон, назорат кардани сабукии 'L' and saturation 'C' ҳангоми нигоҳ доштани сояи 'H' қулай аст.
Лаборатория/LCH: инчунин мувофиқ; OKLCH дар дарк устувортар аст.
SRGB: фазои ниҳоии намоиш; Ҷамъбаст ҳамеша дар SRGB ва WCAG тасдиқ карда мешавад.
Контраст (WCAG 2). 2): матни асосӣ ≥ 4. 5:1, ≥ калон 3:1; огоҳиҳои интиқодӣ - то ҳадди имкон ба AAA (7:1) равона шавед.

3) Қабатҳои система: аз бренд то семантика

1. Аслии бренди: 1-2 сояҳои бренди (+ аксенти дастгирӣ).
2. Семантикаи интерфейс: нақшҳо ('ибтидоӣ', 'миёна', 'муваффақият', 'огоҳӣ', 'хатар', 'маълумот', 'бетараф').
3. Тарозуи оҳанг: қадамҳои сабукӣ (масалан, 25/50/100...900).
4. Темы: 'сабук '/' торик' (+ контраст, AMOLED).
5. Ҳолатҳо: 'пешфарз/hover/фаъол/фокус/ғайрифаъол'.
6. Контекст: сатҳҳо ('bg/base', 'bg/нозук', 'bg/баланд') ва матн ('fg/ибтидоӣ', 'fg/миёна', 'fg/хомӯш').
7. Визуализатсияи маълумот: палитраҳои ҷудогона ва бефосила.

4) Асоси бренд: интихоб ва маҳдудиятҳо

Hue-ро интихоб кунед ва сабукии кориро барои бренд дар мавзӯъҳои сабук ва торик муайян кунед (аксар вақт 'L ≈ 0. 60–0. 70 'барои пур кардани тугмаҳо дар рӯшноӣ ва' L ≈ 0. 70–0. 80 'барои матн/нишонаҳо дар торик).
Маҳдудияти хромаи 'C': баланд 'C' дар баннерҳо зебо аст, аммо хонишро дар UI вайрон мекунад - 2 версияро нигоҳ доред: "маркетинг" (бой) ва "хӯрокворӣ" (маҳдудтар).
Тағирёбандагонро ислоҳ кунед: асосӣ ('бренди/ибтидоӣ'), алтернативӣ ('бренди/alt') ва дастгирии бетараф ('бетараф').

5) Тарозуи оҳанг

• Барои OKLCH, ҳаракат кунед 'L' steps (масалан, 0. 98→0. 90→0. 80→…→0. 18) ва 'C' ба кунҷҳои миқёс каме коҳиш медиҳанд, то аз "лой" дар рӯшноӣ ва "торикӣ" дар торикӣ канорагирӣ кунанд.
• Нуқтаҳои гузаришро ислоҳ кунед: '50/100/300/500 (калид )/700/900'.
• Дар ҳар як қадам, муқоисаи ҷуфтро бо заминаи асосӣ ва бо ранги матни пешбинишуда санҷед.

Намунаи бренди/миқёси ибтидоӣ (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)

Матнҳои 'он' ба таври худкор ҳисоб карда мешаванд (ниг. § 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' background-ро ба 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 +, хатогиҳои пардохт) - ба AAA равона карда шаванд (7:1).
Давлатҳои саҳроӣ ва сарҳадҳо - ҳадди аққал 3:1.
Пайвандҳоро на танҳо бо ранг фарқ кунед (underscore/focus-style).

10) Матни контрасти худкор мувофиқ ('on -')

1. Мувофиқи маълумоти OKLCH, предлагро муайян кунед. матни 'L _ on' so '(L_text vs L_bg) ≥ 4. 5:1`.

2. Агар хром баланд бошад, 'C _ text' to 0 камтар аст. 01–0. 03.

3. Барои мавзӯи торик, 'L _ on' -ро 0-и дигар баланд кунед. 02–0. 04 барои ҷуброн кардани дурахшон.

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

11) Визуализатсияи маълумот

Палеттҳои категориявӣ: 8-12 ранг ба нобиноёни ранг тобовар (аз ҷуфтҳои сурх-сабз бидуни аломатҳои алтернативӣ канорагирӣ кунед).
Муттасил: аз 'bg/баланд' ба аксент бо назорати контрастии имзоҳо.
Илова кардани намунаҳо/нишонаҳо барои шинохтан бе ранг.

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)

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 Фигма/ҳуҷҷатгузорӣ

Компонентҳо танҳо нишонаҳоро истифода мебаранд, мустақиман HEX/SRGB аз ҷониби линтерҳо манъ аст.
Дар китобхона - саҳифаи "Матритсаи контраст": ҷадвали 'fg × bg' бо коэффисиентҳои воқеӣ.

14) Равандҳои назорати сифат

Дар тарҳ: санҷиши контраст дар лавҳаҳои рассомӣ (ҳарду шакл), пешнамоишҳои алоҳида барои нобиноёни ранг.
Дар рамз: ёрдамчиёни воҳид контрастро ҳисоб мекунанд ва ба қонуншиканиҳо меафтанд; аксҳои визуалӣ барои экранҳои интиқодӣ.
Дар CI/CD: санҷиши ҳамаи ҷуфтҳои аломатҳо ва ҳолатҳо, ҳисобот бо ҷузъ, мавзӯъ ва арзиши воқеӣ.

15) Хусусиятҳои IGaming

Аксияҳо ва мусобиқаҳо: Сарпӯши сарпӯш ва маҳдудияти 'C' -ро дар пасманзар истифода баред, то матн аз ғарқ шудани матн пешгирӣ карда шавад.
Огоҳиҳои масъул (маҳдудиятҳо, 18 +, хатарҳо) - самимона AAA.
Ченакҳо/ҷадвалҳо: Байни рақамҳо ва аломатҳои тағирот (↑/↓) аз рӯи шакл ва контраст фарқ кунед, на танҳо ранг.

16) Рӯйхати санҷиши амалисозӣ

• Сояҳои бренд ва миқёси тоналии онҳо (OKLCH) муайян карда шудаанд.
• Нақшҳо, иёлотҳо ва сатҳҳо барои ин ду мавзӯъ муқаррар карда шудаанд.
• Насли худкори 'on -' бо муқоисаи мақсаднок.
• 'fg × bg' санҷишҳои матритса ва WCAG дар CI.
• Палеттҳои инфиродӣ барои dataviz (бо дастгирии нобиноёни ранг).
• Услубҳои линтер рангҳои "хом" -ро манъ мекунанд.
• Саҳифаи истисноҳо ва сабабҳо дар дастур.

17) Анти-намунаҳо

Таваҷҷӯҳи брендро бо муваффақият/хатогӣ дар як сигнали UX омехта кунед.
Танҳо ба қаноатмандӣ барои иерархия такя кунед.
Равшанӣ/торикиро ҳамоҳанг накунед (контрасти "чап" дар яке аз мавзӯъҳо).
HEX-и сахт бе токенҳо → кашидани интерфейси идоранашаванда.

Хулосаи мухтасар

Аз боло то поён палитра созед: ядрои бренди → нақшҳои семантикӣ → тарозуи оҳанг → мавзӯъҳо → давлатҳо. Кор дар OKLCH, нишонаҳои PIN, санҷиши автоматии 'on-' ва WCAG. Алоҳида, ба палитра барои dataviz ворид шавед. Ин пайдарҳамии бренд, хониш ва миқёси маҳсулотро фароҳам меорад.