سیستم رنگ و پالت مارک

1) چرا رنگ رسمی

• آگاهی از برند و سازگاری بصری،
• قابلیت خواندن و در دسترس بودن (WCAG)
• رابط های پوسته پوسته شدن (تم ها، سیستم عامل ها، مناطق)،
• آزمایش های قابل پیش بینی A/B (کنتراست، CTR، خطاها).

2) مبانی سیستم: مدل ها و معیارها

OKLCH (توصیه می شود): از لحاظ ادراکی یکنواخت، مناسب است برای کنترل نور 'L' و اشباع 'C' در حالی که حفظ سایه 'H'.
آزمایشگاه/LCH: همچنین مناسب ؛ OKLCH در ادراک پایدارتر است.
sRGB: فضای نمایش محدود ؛ مجموع ها همیشه در sRGB و WCAG اعتبار دارند.
کنتراست (WCAG 2. 2): متن پایه ≥ 4. 5:1، ≥ بزرگ 3:1 ؛ اطلاعیه های بحرانی - هدف برای AAA (7:1) در صورت امکان.

3) لایه های سیستم: از نام تجاری تا معانی

1. هسته نام تجاری: 1-2 سایه مارک (+ حمایت از لهجه).
2. معانی رابط: نقش («اولیه»، «ثانویه»، «موفقیت»، «هشدار»، «خطر»، «اطلاعات»، «خنثی»).
3. مقیاس تن: مراحل سبک (به عنوان مثال 25/50/100...900).
4. Темы: 'نور '/' تاریک' (+ کنتراست بالا، AMOLED).
5. حالت ها: «پیش فرض/شناور/فعال/تمرکز/غیر فعال».
6. زمینه: سطوح ('bg/پایه'، 'bg/ظریف'، 'bg/بالا') و متن ('fg/اولیه'، 'fg/ثانویه'، 'fg/خاموش').
7. تجسم داده: پالت های گسسته و پیوسته جداگانه.

4) هسته برند: انتخاب ها و محدودیت ها

Hue را انتخاب کنید و سبکی کار را برای برند در مضامین روشن و تاریک (اغلب "L≈0 تعریف کنید. 60–0. 70 'برای پر کردن دکمه ها در نور و' L≈0. 70–0. 80 'برای متن/آیکون در تاریکی).
محدود کردن کروم «C»: «C» بالا در آگهی ها زیبا است، اما قابلیت خواندن در UI را از بین می برد - نسخه های 2 را نگه دارید: «بازاریابی» (غنی) و «مواد غذایی» (بیشتر محدود).
متغیرها را ثابت کنید: main ('brand/primary')، alternative ('brand/alt') و neutral support ('neutral').

5) مقیاس های تن

• برای OKLCH، مراحل 'L' را حرکت دهید (به عنوان مثال 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)

متون «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' background به ~ 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.
تشخیص لینک ها نه تنها بر اساس رنگ (تاکید/تمرکز سبک).

10) متن کنتراست خودکار ('on-')

1. با توجه به OKLCH، predlag را تعیین کنید. 'L _ on' so that '(L_text در مقابل L_bg) ≥ 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) زمینه بین المللی (انجمن های فرهنگی)

مفاهیم محلی را در نظر بگیرید (به عنوان مثال قرمز: خطر/توجه طلا - برنده/جایزه).
برای 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/سبک فرهنگ لغت)

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) فرآیندهای کنترل کیفیت

در طراحی: بررسی کنتراست در artboards (هر دو حالت)، ایستگاه از پیش تنظیم جداگانه برای کوری رنگ.
در کد: یاران واحد محاسبه کنتراست و سقوط در نقض ؛ تصاویر فوری بصری برای صفحه نمایش بحرانی.
در CI/CD: چک کردن تمام جفت نشانه ها و ایالت ها، گزارش با جزء، موضوع و ارزش واقعی.

15) ویژگی های iGaming

Promos و مسابقات: استفاده از پوشش و «C» محدودیت در پس زمینه برای جلوگیری از متن از غرق شدن.
اطلاعیه های مسئول (محدودیت ها، 18 +، خطرات) - صادقانه AAA.
معیارها/جداول: بین اعداد و نشانه های تغییرات (↑/↓) با شکل و کنتراست، نه فقط رنگ، تمایز قائل شوید.

16) چک لیست پیاده سازی

• سایه های برند و مقیاس های تونال آنها (OKLCH) تعریف می شوند.
• نقش ها، ایالت ها و سطوح برای دو موضوع تعیین شده است.
• تولید خودکار «on-» با کنتراست هدف.
• ماتریس 'fg × bg' و آزمون WCAG در CI.
• پالت های فردی برای dataviz (با پشتیبانی از کور رنگی).
• سبک های لینتر رنگ های «خام» را ممنوع می کنند.
• استثنائات و دلایل صفحه در دستورالعمل.

17) ضد الگوهای

تاکید بر نام تجاری را با موفقیت/خطا در یک سیگنال UX مخلوط کنید.
فقط به اشباع برای سلسله مراتب تکیه کنید.
نور/تاریکی را هماهنگ نکنید (کنتراست «چپ» در یکی از تم ها).
HEX سخت بدون نشانه → رانش رابط کنترل نشده.

خلاصه ای کوتاه

ساخت یک پالت از بالا به پایین: هسته نام تجاری → نقش معنایی → مقیاس تن → ایالات است. کار در OKLCH، نشانه های پین، چک های خودکار 'on-' و WCAG. به طور جداگانه، پالت ها را برای dataviz وارد کنید. این باعث ثبات نام تجاری، خوانایی و مقیاس پذیری محصول می شود.