霓虹灯/Accent风格赌博中心

1）概念和原则

Neon/Accent是一种视觉语言，其中主表面保持克制（深色第一），并且用户的注意力由短霓虹灯引导： 重音轮廓，发光，状态突出和微信号。目的：快速活动检测（CTA,焦点,通知）和高可读性,无过载.

1.口音-剂量。90/10：高达10%的屏幕面积可能有"光线"。

2.语义比品牌更重要。霓虹灯是一种突出意义的方式，而不仅仅是"亮度"。

3.对比是主要的。任何发光对象都不会降低文本的可读性（最低AA）。

4.节奏和暂停。动画短，可预测，停顿和清晰的物理。

5.性能和可用性。弱设备上没有严重的模糊/阴影；所有效果均以HC模式进行测试。

2）颜色和光线： 调色板和角色

2.1基面（黑暗第一）

"bg/base"是具有轻微噪声/晶粒的深石墨。
"bg/elevated"-卡片和时装设计师稍轻一些。
"fg/primary"几乎是白色但不干净（#FFF → L≈0。90在OKLCH中）以减少眩光。

2.2口音霓虹灯（OKLCH，地标）

Cyber Blue: `oklch(0.74 0.16,250）'是主要的品牌重点。
Electric Purple: `oklch(0.70 0.17,310）'是次要的，用于序列或游戏事件。
Toxic Lime: `oklch(0.82 0.14140）'是罕见的高光（大奖，胜利）。
Alert Coral: `oklch(0.72 0.14 30）"-警告/错误（克制"霓虹灯"）。

2.3对比对比

文本/背景图标：≥ 4。5：1（普通），≥ 3：1（大/脂肪）。

霓虹灯填充的文本： ≥ 4。5:1.在高"C"时，将"C_text"降低到0。01–0.03.

路径/指示符图标：≥ 3：1到周围环境。

3）发光效果（发光）不损害可读性

3.1发光形式

Outer Glow（软环）：1-2模糊环,半径为8-24 px,具体取决于尺度。
Neon Stroke：细线1-2 px高亮度+柔软的外阴影。
Inset Glow：聚焦的inputs的内部"子网"。

3.2个限制器

切勿将精美的文字放在强烈的光芒之上。
Glow不会取代状态；它补充了形状/图标/下划线。
在大区域（横幅/头）-将发光的不透明度降低多达20-35%。

3.3适应主题

在轻主题中，霓虹灯在半径上较弱和较短，否则是"酸性"效果。
在高对比度-发光被禁用，保持清晰的轮廓/框架。

4）印刷和层次结构

基本内容：16-18 px；标题具有清晰的标度（例如12点标度）。
刻字：避免超光；最低Regular/Medium。

字符串间距1。45–1.6.

文本中的重音不是颜色，而是比例/重量/图标；颜色-仅作为附加颜色。

5）网格，节奏，背景

列：12（桌面）、6（平板电脑）、4（移动）。
水平模块8 px；纵向-8/12/16 px，取决于部分。
背景梯度：关键CTA区域中的径向弱"光晕"。
触觉噪声（grain）L=± 0。02-用于没有"塑料"的深度。

6）组件（模式）

6.1个按钮

小学：填满"brandNeon"+"on primary"文本≥ 4。5：1, glow半径为12-16 px at hover。
中学：透明与霓虹灯旁路（1-2 px）和柔软的外光芒时hover。
Tertiary：文字，没有光芒，只有下划线/图标。

• Hover： − Δ L背景（0.02–0.04）+轻光。
• Active：深色填充、缩回或减少光泽。
• 焦点：2-3 px对比环（无模糊），不仅仅是颜色。

6.2个输入字段

默认值：neutral 1 px薄框架。
焦点：neon stroke+场内微弱的inset glow；对比度降低的placeholder（但≥ 3：1）。
错误/成功：语义颜色+象形图的轮廓；光泽最小。

6.3禁忌/导航

活性禁忌指示器-霓虹灯线2 px+柔软blur 8 px。
Hovers是光标下方的轻量级子图（shadow spread 4-6 px）。

6.4张卡片/横幅

锦标赛卡：拐角处的框架霓虹灯（短角），以免整个框架发光。
横幅是文本下方的暗面膜（超过40-60％），因此霓虹灯背景不会"吃掉"内容。

7）微创辅助和动画

持续时间：120-200 ms（hover），180-240 ms（focus/active），240-320 ms（码头/调制解调器）。
曲线：'cubic-bezier（0。2, 0.0, 0.2、1）'用于"物质"感觉。

霓虹灯-脉搏： 一个循环在移动,没有无限闪烁.

系统事件（胜利/成就）：短暂的300-500毫秒照明闪烁。

8）可用性和高对比度模式

所有含义均无颜色和光泽：形状，图标，文本标签，下划线。
支持"prefers-countrast"，"forced-colors"；启用-禁用光泽,放大边框和填充,检查对比度。
对于测距法：避免将"红绿色"对作为唯一信号；使用象形图和文本。

9）生产力

最大限度地减少盒子阴影与大blur和filter： blur（）在多个元素。
偏爱伪元素阴影和图层作曲家（变形/opacity）。
在移动上-动画的"轻松"预览；在低的FPS下关闭强光。
Neon梯度-在较大尺寸时渲染为位图asset（WebP/AVIF）。

10）颜色和样式令牌（示例）

json
{
"color": {
"dark": {
"bg": { "base": "oklch(0. 16 0. 01 260)", "elevated": "oklch(0. 22 0. 01 260)" },
"fg": { "primary": "oklch(0. 90 0. 02 260)", "secondary": "oklch(0. 78 0. 02 260)" },
"neon": {
"brand":  { "500": "oklch(0. 74 0. 16 250)" },
"purple": { "500": "oklch(0. 70 0. 17 310)" },
"lime":  { "500": "oklch(0. 82 0. 14 140)" },
"coral":  { "500": "oklch(0. 72 0. 14 30)" }
}
}
},
"elevation": {
"glow": {
"sm": { "blur": 8, "spread": 2, "alpha": 0. 35 },
"md": { "blur": 12, "spread": 4, "alpha": 0. 30 },
"lg": { "blur": 20, "spread": 6, "alpha": 0. 25 }
}
}
}

CSS预留（片段）

css
:root[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--fg-primary: oklch(0. 90 0. 02 260);
--neon-brand: oklch(0. 74 0. 16 250);
--glow-md: 0 0 12px rgba(0, 180, 255, 0. 30), 0 0 4px rgba(0, 180, 255, 0. 45);
}

.button--primary {
color: var(--on-primary);
background: var(--neon-brand);
box-shadow: none;
}
.button--primary:hover {
box-shadow: var(--glow-md);
transform: translateZ (0) ;/compositing/
}
:root[data-high-contrast].button--primary:hover {
box-shadow: none; outline: 2px solid var(--fg-primary);
}

11）数据可视化

序列图：主线是中线,特定线是厚度和形状标记增大的霓虹灯。

点/列： ≥ 3：1到背景；签名≥ 4。5:1.

所选系列的背光是柔软的外部光泽（sm）,没有永久闪烁。

12）内容块和促销

促销背景霓虹灯上的文字总是按对比严格，放在标题/超音上（40-60％）。
"Glitch"/扫描线仅作为稀有口音，每个页面不超过2-3个部分。

13）图标和插图

图标是具有霓虹灯笔触的线性/双子座，用于活动状态。
插图是具有最小填充度的"轮廓霓虹灯"；避免在文本周围发光。

14）营销vs产品

营销横幅可能会使用更高的"C"铬和复杂的发光。
在产品中（形状，表格，平衡）-降低的"C"，短的发光效果和严格的对比度。

15） iGaming的文本规则

负责任的通知（18+，限制，KYC/AML，风险）-对比度为AAA，无光泽。
在系数/排行榜表中-不仅用颜色表示身高/跌落，还用箭头/象形图和脂肪表示。

16）本地化和适应

西里尔字母/拉丁字母：凯格尔和字母间距的相同度量。
两行CTA-禁用文本上的光泽,将其保留在笔画/背景中。
RTL仅是定向效果（角度/眩光）的镜像。

17）审阅清单（设计/开发）

对比

• 第4 ≥桉文。5:1;主要≥ 3：1；系统通知-AAA。

Glow

• Glow与文本不重叠；预设中的半径和alpha。

状态

• Hover/Active/Focus可以通过形状来区分，而不仅仅是颜色/光。

生产力

• 没有多重重物；移动设备有"轻型"预设。

可用性

• 高对比模式是正确的（glow off，框架）。

语义学

• 霓虹灯反映了意义（行动/焦点/状态）而不是"为了美丽"。

18）反模式

大面积的坚实霓虹灯填充→眼睛疲劳。
持续的闪烁/脉动→刺激和可及性问题。
文字在明亮的光芒之上，没有基材。
唯一的信号是颜色/发光（没有形状/图标/下划线）。
在单个屏幕中发光强度不一致（视觉"kasha"）。

19） A/B和指标

在CTR CTA按钮上测试光强度（alpha/半径）和输入错误。
在输入neon焦点后跟踪时间对动作和形状错误。
关于视觉舒适度的UX民意调查（尤其是在冗长的会议中）。

20）设计系统中的文档

"Neon/Accent"页面：调色板（产品/营销）,发光令牌,组件示例,视频演示微共轭。
"对比度矩阵"："fg × bg"和"on-"的实际系数。
一组前置类和前置类。

简短摘要

Neon/Accent for Gamble Hub-点、语义、性能。光线将视线引导到动作而不会破坏对比度和舒适度。引擎是令牌（OKLCH），"轻巧"的光泽预设，严格的状态，高对比度的禁用效果。它具有鲜明的品牌特色，但仍然是一种舒适而快速的产品。