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

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) # ключевой тон 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' 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 # контраст кольца ≥ 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.
تشخیص لینک ها نه تنها بر اساس رنگ (تاکید/تمرکز سبک).

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.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)); / автоподбор /
}
[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 وارد کنید. این باعث ثبات نام تجاری، خوانایی و مقیاس پذیری محصول می شود.