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

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) # ключевой тон 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)

'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 # контраст кольца ≥ 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 ფიგმა/დოკუმენტაცია

კომპონენტები იყენებენ მხოლოდ ნიშნებს, პირდაპირი 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- სთვის. ეს მისცემს ბრენდის თანმიმდევრულობას, პროდუქტის წაკითხულობას და მასშტაბურობას.