顏色系統和品牌調色板

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.接口語義：角色（「primary」，「secondary」，「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/secondary」，「fg/muted」）。
7.數據可視化：單獨的離散和連續調色板。

4）品牌核心： 選擇和限制

選擇主色調（Hue）,並在明暗主題（通常為'L≈0中定義品牌的工作亮度。60–0.70'用於在燈光和'L≈0中填充按鈕。70–0.80'用於黑暗中的文本/圖標）。
限制「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 （key）/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）語義角色和mapping

分享品牌和語義：「成功」不需要品牌綠色。

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」背景提高到~ 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定義-。文本"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詞典）

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 Figma/文檔

組件僅使用令牌，Linter禁止使用直接HEX/SRGB。
庫中是「對比矩陣」頁面：帶有實際系數的表「fg × bg」。

14）質量控制流程

在設計中：檢查藝術板（兩種模式）上的對比度，以及用於測距的單獨預設。
在代碼中：unit輔助器計算對比度，並在違規時下降；用於關鍵屏幕的視覺快照。
在CI/CD中：檢查所有令牌對和狀態，報告組件，主題和實際值。

15） iGaming的細節

促銷和錦標賽：在背景上使用overlay和「C」限制，以防止文本「下沈」。
負責任的通知（限制，18+，風險）-真正的AAA。
度量/表格：數字和更改符號（↑/↓）區分形狀和對比度,而不僅僅是顏色。

16）實施支票

• 已定義品牌色調及其音階（OKLCH）。
• 為兩個主題設置角色、狀態和曲面。
• 具有目標對比度的自發生。
• CI中的「fg × bg」矩陣和WCAG測試。
• Dataviz的單獨調色板（支持達爾頓）。
• Linter樣式禁止「原始」顏色。
• 天線中的「異常和原因」頁面。

17）反模式

將品牌口音與單個UX信號中的「成功/錯誤」混合在一起。
僅依靠層次結構的飽和度。
不要同步light/dark（其中一個主題的對比「離開」）。
沒有令牌的硬HEX →無法控制的界面漂移。

簡短的摘要

從上到下構建調色板：品牌核心→語義角色→音階→主題→狀態。在OKLCH中運行,固定令牌,自動化「on-」和WCAG檢查。單獨運行dataviz的調色板。這將提供品牌一致性、可讀性和產品可擴展性。