Գունավոր համակարգ և բրենդային պալիտրա

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», «neutral»)։

3. Տոնների մասշտաբները 'քայլերը լույսի վրա (օրինակ ՝ 25/50/100... 900)։

4. Темы: `light` / `dark` (+ high-contrast, AMOLED).

5. Վիճակը ՝ «www.ru/hover/action/focus/wwww.abled»։

6. Համատեքստ ՝ մակերեսներ («bg/bull», «bg/www.tle», «bg/elevated») և տեքստ («fg/primary», «fg/secondary», «fg/muted»)։

7. Տվյալների վիզուալիզացիան 'առանձին դիսկրետ և շարունակական պալիտրա։

4) Բրենդի միջուկը 'ընտրություն և սահմանափակումներ

Ընտրեք հիմնական երանգը (Hue) և տեղադրեք բրենդի աշխատանքային լուսավորությունը թեթև և մութ թեմաներում (հաճախ 'L 350։ 60–0. 70 'կոճակները light և' L 240-ի համար։ 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)

Տեքստերը ինքնաբերաբար հաշվարկվում են (տե՛ ս 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' fon» մինչև 240։ 16.

8) Վիճակը և ինտերակտիվ լինելը

Յուրաքանչյուր դերի համար տվեք վիճակ վերահսկվող «CorL» և «Core C» -ի հետ

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

Հիմնական տեքստը և իկոնիկները կառավարման տարրերում 244 են։ 5:1.

Հիմնական ծանուցումները (KYC/AML, 18 +, հիբրիդային սխալները) - ամբողջովին AAA (7: 1)։

Դաշտերի վիճակն ու սահմանները 3: 1-ից ցածր չեն։

Հղումները տարբերվում են ոչ միայն գույներով (ընդգծում/focus-ոճ)։

10) Հակադրական տեքստի ավտոպբորը («one»)

Տրամաբանություն 'բաղադրիչի ծոցն ընտրելիս հաշվարկել «on-color»։

1. Համաձայն OKLCH-ի, որոշեք նախապաշարումը։ "L _ on" տեքստը այնպես, որ "(L _ ensvs L _ bg) 244։ 5:1`.
2. Եթե քրոմը բարձր է, ապա իջեցրեք «C _ 112» մինչև 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-105 (թեմաների շերտ)

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/2019

Բաղադրիչները օգտագործում են միայն հոսանքներ, ուղիղ HEX/MSGB-ը արգելված է լինտերով։

Գրադարանում կա «Հակադրող մատրիցա» էջը 'www.'fg nobg' իրական գործակիցների հետ։

14) Որակի կառավարման գործընթացները

Դիզայնի մեջ 'հակադրության ստուգում արթբորդի վրա (երկու ռեժիմները), առանձին ճնշումներ հեռահաղորդակցության համար։

Կոդի մեջ, unit-helpers հաշվարկում են հակադրություն և ընկնում են խախտումների ժամանակ։ տեսողական ձիթապտղեր կրիտիկական էկրանների համար։

CI/CD-ում 'բոլոր զույգ հոսանքների և վիճակների ստուգում, զեկույց ռուսական, թեման և իրական արժեքը։

15) iGaming հատկությունները

Պրոմո և օրինակներ 'օգտագործեք օվերներ և «C» սահմանափակումներ, որպեսզի տեքստը «թունուլ» չլինի։

Պատասխանատու ծանուցումները (լիմիտներ, 18 +, ռիսկերը) - AAA-ի անկեղծ։

Չափումներ/սեղաններ 'փոփոխությունների թվեր և նշաններ (108/105) տարբերեք ձևը և հակադրությունը, ոչ միայն գույնը։

16)

• Հայտնաբերվել են բրենդի երանգները և դրանց տոնային մասշտաբները (OKLCH)։
• Երկու թեմաների համար դերեր, վիճակներ և մակերեսներ։
• Autogration 'one' '' - նպատակային հակադրությամբ։
• Մատրիցա 'fg nobg' և WCAG թեստերը CI-ում։
• Դանավիզների համար առանձին պալիտրա (դալոնիզմի աջակցությամբ)։
• Լինթերը արգելում է «հում» գույները։
• «Բացառություններ և պատճառներ» էջը։

17) Anti-patterna

Խառնել բրենդի շեշտը «հաջողության/սխալի» հետ մեկ UX ազդանշանում։

Ապավինել միայն հիերարխիայի համար։

Մի համաժամեցնել light/dark (հակադրություն «հեռացավ» թեմաներից մեկում)։

Կոշտ HEX-ը առանց հոսանքների հաստատվում է ինտերֆեյսի անվերահսկելի դրեյֆը։

Ռուսական ռեզյումե

Վերևից ներքև կառուցեք պալիտրա 'բրենդը, որը պարունակում է սերմնահեղուկ դերեր երանգների մասշտաբային մասշտաբով, որոնք համապատասխանում են համապատասխան վիճակի թեմային։ Աշխատեք OKLCH-ում, ամրացրեք հոսանքները, ավտոմատիզացրեք 'one' և WCAG ստուգումները։ Առանձին-առանձին պալիտրա տվեք դանավիզների համար։ Դա կտա բրենդի հետևողականությունը, կարդալը և ապրանքի մեծացումը։