霓虹燈/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），「輕巧」的光澤預設，嚴格的狀態，高對比度的禁用效果。它具有鮮明的品牌特色，但仍然是一種舒適而快速的產品。