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

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) # 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' 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 # 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

Հիմնական տեքստը և իկոնիկները կառավարման տարրերում 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 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-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)) ;/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/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-ը առանց հոսանքների հաստատվում է ինտերֆեյսի անվերահսկելի դրեյֆը։

Live ռեզյումե

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