ფერის სისტემა და ბრენდის პალიტრა

1) რატომ უნდა შევინარჩუნოთ ფერი

• ბრენდის აღიარება და ვიზუალური თანმიმდევრულობა,
• წაკითხული და ხელმისაწვდომობა (WCAG),
• ინტერფეისების მასშტაბირება (თემები, პლატფორმები, ლოკალი),
• პროგნოზირებადი A/B ექსპერიმენტები (კონტრასტი, CTR, შეცდომები).

2) სისტემის საფუძვლები: მოდელები და მეტრიკები

OKLCH (რეკომენდებულია): percepture ერთგვაროვანი, მოსახერხებელია გააკონტროლოს 'L' მსუბუქი და 'C გაჯერება' H- ჩრდილის შენარჩუნებისას.
ლაბორატორია/LCH: ასევე შესაფერისია; OKLCH უფრო სტაბილურია აღქმის თვალსაზრისით.
sRGB: რუქის საბოლოო სივრცე; საბოლოო მნიშვნელობები ყოველთვის არის sRGB და WCAG.
კონტრასტი (WCAG 2. 2): ძირითადი ტექსტი 4. 5:1, დიდი, 3:1; კრიტიკული ცნობები - კოცნა AAA- ში (7:1), სადაც ეს შესაძლებელია.

3) სისტემის ფენები: ბრენდიდან სემანტიკამდე

1. ბრენდის ბირთვი: 1-2 ბრენდის ჩრდილში (+ დამხმარე აქცენტი).
2. ინტერფეისის სემანტიკა: როლები ('primary', '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/საშუალო', 'fg/muted').
7. მონაცემთა ვიზუალიზაცია: ცალკეული დისკრეტული და უწყვეტი პალიტრა.

4) ბრენდის ბირთვი: არჩევანი და შეზღუდვები

შეარჩიეთ მთავარი ჩრდილის (Hue) და განსაზღვრეთ ბრენდის სამუშაო შუქი მსუბუქი და მუქი თემებით (ხშირად 'L-0). 60–0. 70 'ღილაკების შუქზე და' L-0. 70–0. 80 'ტექსტისთვის/ხატებისთვის dark).
შეზღუდეთ ქრომი 'C': მაღალი 'C "ლამაზია ბანერებზე, მაგრამ ისინი არღვევენ კითხვას UI- ში - შეინარჩუნეთ 2 ვერსია:" მარკეტინგის "(გაჯერებული) და" პროდუქტის "(თავშეკავებული).
ჩაწერეთ ვარიაციები: მთავარი ('brand/primary'), ალტერნატიული ('brand/alt') და ნეიტრალური მხარდაჭერა ('neutral').

5) ტონის მასშტაბები (ტონალური სკალეტები)

• OKLCH- სთვის გადაიტანეთ 'L' ნაბიჯები (მაგ., 0. 98→0. 90→0. 80→…→0. 18), და 'C' ოდნავ შეამცირეთ მასშტაბის კიდეები, რათა თავიდან აიცილოთ „ტალახი“ ნათელ და „სიბინძურეში“.
• ჩაწერეთ საკონტროლო წერტილები: '50/100/300/500 (კეი )/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' fon 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.
ბმულები განასხვავეთ არა მხოლოდ ფერით (ხაზგასმით/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 ფიგმა/დოკუმენტაცია

კომპონენტები იყენებენ მხოლოდ ნიშნებს, პირდაპირი HEX/SRGB აკრძალულია ლინტერებით.
ბიბლიოთეკაში - გვერდი „კონტრასტის მატრიცა“: ცხრილი „fg × bg“ ფაქტობრივი კოეფიციენტებით.

14) ხარისხის კონტროლის პროცესები

დიზაინში: კონტრასტის შემოწმება არტბორდებზე (ორივე რეჟიმი), ცალკეული პრესეტები დისტანციზმისთვის.
კოდში: ერთეული ჰელპერები ითვლიან კონტრასტს და იშლება დარღვევების დროს; ვიზუალური ფიფქები კრიტიკული ეკრანებისთვის.
CI/CD- ში: ყველა წყვილი ნიშნის და მდგომარეობის შემოწმება, მოხსენება კომპონენტთან, თემასთან და ფაქტობრივ მნიშვნელობასთან.

15) iGaming სპეციფიკა

პრომო და ტურნირები: გამოიყენეთ აურზაური და შეზღუდვა „C“ ფონებზე ისე, რომ ტექსტი არ „დაიხრჩო“.
პასუხისმგებელი შეტყობინებები (ლიმიტები, 18 +, რისკები) - გულწრფელად AAA.
მრიცხველები/ცხრილები: ცვლილებების ნომრები და ნიშნები () განასხვავეთ ფორმა და კონტრასტი და არა მხოლოდ ფერი.

16) განხორციელების შემოწმების სია

• განისაზღვრება ბრენდის ჩრდილები და მათი ტონალური მასშტაბები (OKLCH).
• მოცემულია ორი თემის როლები, მდგომარეობა და ზედაპირი.
• Autogentation 'on' სამიზნე კონტრასტით.
• მატრიცა 'fg × bg' და WCAG ტესტები CI- ში.
• ცალკეული პალიტრები Datavis- სთვის (დალტონიზმის მხარდაჭერით).

ლინტერის სტილი კრძალავს „ნედლეულ“ ფერებს.
გვერდი „გამონაკლისები და მიზეზები“ ჰაიდლაინში.

17) ანტი შაბლონები

აურიეთ ბრენდის აქცენტი „წარმატება/შეცდომა“ ერთ UX სიგნალში.
მხოლოდ იერარქიისთვის სიმდიდრის იმედი.
არ სინქრონიზაცია მსუბუქი/ბნელი (კონტრასტი „დატოვა“ ერთ-ერთ თემაში).
მკაცრი HEX ტოქსინების გარეშე არის უკონტროლო ინტერფეისის დრიფტი.

მოკლე რეზიუმე

ააშენეთ პალიტრა ზემოდან ქვემოთ: ბრენდის ბირთვი - სემანტიკური როლები - ტონის მასშტაბები, თემა და მდგომარეობა. იმუშავეთ OKLCH- ში, დააფიქსირეთ ნიშნები, ავტომატიზაცია 'on-' და WCAG ტესტები. ცალკე შეინარჩუნეთ პალიტრა datavis- სთვის. ეს მისცემს ბრენდის თანმიმდევრულობას, პროდუქტის წაკითხულობას და მასშტაბურობას.