颜色系统和品牌调色板

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) # keytone 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 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"背景提高到~ 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定义-。文本"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 examples. 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)) ;/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 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的调色板。这将提供品牌一致性、可读性和产品可扩展性。