מערכת צבעים ופלטות ממותגות

1) מדוע להפוך את הצבע לרפורמי

• מודעות מותג ועקביות חזותית,
• קריאות וזמינות (WCAG),
• ממשקי סקייפינג (נושאים, פלטפורמות, מקומות),
• ניסויי A/B צפויים (ניגוד, CTR, שגיאות).

2) יסודות מערכת: מודלים ומדדים

(OKLCH (מומלץ: אחיד מבחינה תפיסתית, נוח לשלוט בקלילות 'L' ורוויה' C תוך שמירה על הגוון 'H'.
מעבדה/LCH: גם להתאים; OKLCH הוא יציב יותר בתפיסה.
SRGB: מרחב תצוגה סופי; הסכומים תמיד מאומתים ב-SRGB וב-WCAG.
ניגוד (WCAG 2. 2): טקסט בסיס 4. 5:1, גדול 3:1; הודעות קריטיות - כוונו לאיי-איי-איי (7:1) היכן שאפשר.

3) שכבות של המערכת: ממותג לסמנטיקה

1. ליבת מותג: 1-2 גוונים ממותגים (+ מבטא תומך).
2. סמנטיקה ממשק: תפקידים (”ראשי”, ”משני”, ”הצלחה”, ”אזהרה”, ”סכנה”, ”מידע”, ”נייטרלי”).
3. מאזני טון: צעדי קלילות (למשל: 25/50/100...900).
4. 'אור '/' אפל' (+ ניגודיות גבוהה, AMOLED).
5. קובע: ”ברירת מחדל/ריחוף/פעיל/פוקוס/נכה”.
6. הקשר: משטחים (”bg/base”, ”bg/עדין”, ”bg/מוגבה”) וטקסט (”fg/primary”, ”fg/secondary”, ”fg/musted”).
7. הדמיית נתונים: פרידה נפרדת ומשוחררת.

4) ליבת מותג: בחירות וריסונים

בחר גוון והגדר את הקלילות העובדת עבור המותג באור ובנושאים אפלים (לרוב ”L temporate 0”. 60–0. 70 "למילוי כפתורים באור ו 'L office 0. 70–0. 80 "לטקסט/אייקונים בחושך).
הגבלת כרום 'C': גבוה 'C' יפה על כרזות, אבל שובר את יכולת הקריאה ב-UI - שמור 2 גרסאות: ”שיווק” (עשיר) ו ”מכולת” (מאופק יותר).
תיקון המשתנים: ראשי (”מותג/ראשוני”), אלטרנטיבי (”מותג/אלט”) ותמיכה נייטרלית (”נייטרלי”).

5) מאזני טון

• עבור OKLICH, להזיז את steeps 'L&fospossible (למשל. 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)

שמור על מטרות ניגוד שוות בשני הנושאים; הימנע ”מסנוור” לבן על שחור טהור - להעלות את background ll ~ 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.
הבחנה בין קישורים לא רק לפי צבע (lundscore/mocus-style).

10) טקסט ניגודיות בכושר אוטומטי ('on-')

1. על פי OKLICH, לקבוע את התג הקדום. טקסט 'L _ on' so '(L_text vs. L_bg) mind 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) הקשר בינלאומי (אסוציאציות תרבותיות)

תן דעתך לקונוטציות מקומיות (לדוגמה: אדום - סכנה/תשומת לב; זהב - win/prize).
עבור 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 Tokens (מילון 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

פרומואים וטורנירים: השתמש בכיסוי ו-ג 'על הרקע כדי למנוע מהטקסט ”לשקוע”.
הודעות אחראיות (גבולות, 18 +, סיכונים) - בכנות AAA.
מטריצות/טבלאות: הבחנה בין מספרים וסימנים לשינויים (drough/ut) על ידי צורה וניגודיות, לא רק צבע.

16) רשימת מימושים

[ ] משקפי המותג ומאזניהם הטונאליים (OKLCH) מוגדרים.

[ ] תפקידים, מדינות ומשטחים מוגדרים לשני הנושאים.

[ ] דור אוטומטי, עם ניגוד מטרות.

[ ] מטריצות ו-WCAG במודיעים.

[ ] Palettes for dataviz (עם תמיכה בעיוורון צבעים).

סגנונות [ ] לינטר אוסרים צבעים ”גולמיים”.

[ ] יוצא מן הכלל ועמוד הנימוקים בהנחיה.

17) אנטי דפוסים

ערבב דגש מותג עם הצלחה/שגיאה באות UX אחד.
להסתמך רק על רוויה עבור היררכיה.
אין לסנכרן בין אור לחושך (ניגוד ”שמאלה” באחד הנושאים).
HARD HEX ללא אסימונים = = סחף ממשק בלתי מבוקר.

תקציר

לבנות לוח הצבעים מלמעלה למטה: ליבת המותג * תפקידים סמנטיים * tune scales> states. עבודה ב OKLCH, אסימונים סיכה, אוטומטי 'on-' ובדיקות WCAG. בנפרד, הכנס את הפלטות לדייטים. זה ייתן עקביות מותג, קריאות וקשקשים מוצר.