ネオン/アクセントスタイルのギャンブルハブ

1）概念と原則

ネオン/アクセントは、主面が目立たない（暗い）視覚言語であり、アクセントの輪郭、輝き、状態照明、マイクロ信号などの短いネオンフラッシュによってユーザーの注意が向けられています。目的：速い行為の検出（CTA、焦点、通知）および積み過ぎのない高い可読性。

1.アクセント-投与量。90/10：画面領域の最大10％が「光」を持つことができます。

2.意味論はブランドよりも重要です。ネオンは、単なる「明るさ」ではなく、意味を強調する方法です。

3.コントラストは主です。任意の明るいオブジェクトは、テキストの可読性を低下させません（AA最小）。

4.リズムと一時停止。アニメーションは短く、予測可能で、一時停止と明確な物理学があります。

5.パフォーマンスと可用性。弱いデバイスに重いぼかし/影はありません。すべての効果はHCモードでテストされます。

2）色およびライト： パレットおよび役割

2.1ダークファースト

'bg/base'-光ノイズ/粒子を持つ深度グラファイト（グラデーションの「ストライプ」を減らします）。
'bg/elevated'-カードとモデルのために少し軽い。
'fg/primary'-ほとんど白ですが、クリーンではありません（#FFF→L≈0。OKLCHの90）まぶしさを減らすため。

2.2アクセントネオン（OKLCH、ランドマーク）

Cyber Blue： 'oklch （0。74 0.16,250）'は主要なブランドのアクセントです。
電気紫色：'oklch （0。70 0.17 310）'-セカンダリ、シーケンスやゲームイベントのために。
有毒な石灰：'oklch （0。82 0.14,140）'は珍しいハイライトです（大当たり、勝利）。
アラートサンゴ：'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輝きの形態

外の輝き：1-2のぼかしリング、スケールによって半径8-24 px。
ネオンストローク：薄いライン1-2 px高い明るさ+柔らかい外の影。
Inset Glow：インプットを集中させるための内部の「照明」。

3.2リミッター

強烈な輝きの上に小さなテキストを配置しないでください。
グローは状態を置き換えません。図形/アイコン/下線を補完します。
広い領域（バナー/ヘッダー）では、グローの不透明度を20〜35％に低減します。

3.3テーマへの適応

光のテーマでは、ネオンは弱くて半径が短く、さもなければ「酸」効果があります。
ハイコントラストでは-ライトがオフになり、明確な輪郭/フレームが残ります。

4）タイポグラフィと階層

基本的な内容のサイズ：16-18 px；クリアスケールヘッダー（例えば、12ポイントスケール）。
スタイル：超軽量を避けて下さい；通常/中程度の最小値。

線の間隔1。45–1.6.

テキストの強調は色ではなく、スケール/重量/アイコンです。色-追加としてのみ。

5）格子、リズム、背景

列：12（デスクトップ）、6（タブレット）、4（モバイル）。
横のモジュール8 px；垂直-セクションに応じて8/12/16 px。
背景勾配：主CTAゾーンの放射状の弱い「ハロー」。
触覚ノイズ（穀物）L=± 0。02-「プラスチック」なしの深さのため。

6）部品（パターン）

6.1ボタン

プライマリ：'brandNeon'+'on-primary'テキストを4 ≥塗りつぶします。5：1のホバーの白熱半径12-16 px。
二次的：ネオンの輪郭（1-2 px）およびホバーの柔らかい外の光沢と透明。
Tertiary：テキスト、グローなし、下線/アイコンのみ。

• ホバー：− Δ L背景（0。02–0.04）+光沢。
• アクティブ：暗い塗りつぶし、除去または減光。
• フォーカス：コントラストリング2-3 px（ボケなし）、色だけではありません。

6.2入力フィールド

デフォルト：ニュートラル1 px薄いフレーム。

焦点： 分野の中のネオン打撃+弱いinsetの輝き；コントラストプレースホルダの削減（ただし≥ 3：1）

エラー/成功：セマンティックカラーアウトライン+アイコン；最小限の輝き。

6.3タブ/ナビゲーション

アクティブなタブインジケータ-ネオンライン2 px+ソフトボケ8 px。
ホバー-カーソルの下の光の照明（シャドウスプレッド4-6 px）。

6.4枚のカード/バナー

トーナメントカード：フレーム全体が光らないようにコーナー（短い「コーナー」）のフレームネオン。
バナー-テキストの下に暗くなったマスク（40-60％をオーバーレイ）し、ネオンの背景がコンテンツを「食べる」ことがないようにします。

7）マイクロインタラクションとアニメーション

期間：120-200ミリ秒（ホバー）、180-240ミリ秒（フォーカス/アクティブ）、240-320ミリ秒（ドック/モーダル）。
曲線：'cubic-bezier （0。2, 0.0, 0.「素材」感覚のための2、1）'。
ネオンパルス：ホバーごとの1つの周期、無限の点滅。
システムイベント（勝利/達成）：減衰と300-500ミリ秒のバックライトの短いバースト。

8）可用性およびハイコントラスト・モード

すべての意味は色と輝きなしで利用できます：図形、アイコン、テキストラベル、下線。
'prefers-contrast'、' forced-colors'のサポート。オンにすると-輝きをオフにし、フレームとフィルを強化し、コントラストを確認します。
色の失明のため：唯一の信号として赤緑の組を避けて下さい；ピクトグラムとテキストを使用します。

9）パフォーマンス

複数の要素に大きなぼかしとフィルター：ぼかし（）でボックスシャドウを最小化します。
擬似要素の影とレイヤーコンポーザー（transform/opacity）を好みます。
モバイル-アニメーションの「光」プリセット。低FPSで強烈な輝きを無効にします。
ネオン勾配-大きなサイズでラスターアセット（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％）、厳密には対照的に。
「グリッチ「/スキャンライン-1ページあたり2〜3セクション以下のまれなアクセントとしてのみ。

13）アイコンとイラスト

アイコン-アクティブ状態のためのネオンストロークを持つ線形/デュオトン。
イラスト-最小限の塗りつぶしで「輪郭に沿ったネオン」。テキストの周りに小さな輝きを避けてください。

14）マーケティングと製品

マーケティングバナーは、より高い'C'クロムと複雑な輝きを使用することができます。
プロダクト（形態、テーブル、バランス）-減らされた'C'、短い輝きの効果および厳密な対照。

15） iGamingのテキスト規則

重要な通知（18+、制限、KYC/AML、リスク）-対照的にAAA、輝きはありません。
係数テーブル/リーダーボードでは、色だけでなく、矢印/アイコンと脂肪分で成長/落下を示します。

16）ローカライズと適応

キリル文字/ラテン文字：同じピンと文字の間隔のメトリック。
2行のCTA-テキストの輝きを無効にし、ストローク/背景に残します。
RTL-方向効果（コーナー/ハイライト）のみをミラーします。

17）レビューチェックリスト（設計・開発）

コントラスト

• テキスト≥ 4。5:1;大きい≥ 3：1；システム通知-AAA。

グロー（Glow）

• グローはテキストと重なりません。プリセット内の半径とアルファ。

アメリカ合衆国

• ホバー/アクティブ/フォーカスは、色/光だけでなく、形状によって区別できます。

パフォーマンス

• 複数の重いぼかしなし；モバイル用の「ライト」プリセットがあります。

可用性について

• ハイコントラストモードが正しい（グロー・オフ、フレーム・オン）。

セマンティクス

• ネオンは「美のため」ではなく、意味（アクション/フォーカス/ステータス）を反映しています。

18）アンチパターン

広い領域の固体ネオン充填→目の疲労。
一定の明滅/リップル→刺激とアクセシビリティの問題。
アンダーレイのない明るい輝きの上にテキスト。
唯一の信号はcolor/glow（図形/アイコン/下線なし）です。
1つの画面で一貫性のない輝きの強度（視覚的な「お粥」）。

19） A/Bとメトリクス

CTR CTAボタンと入力エラーの輝度（アルファ/半径）をテストします。
ネオンフォーカスに入った後、アクション時間とフォームエラーを追跡します。
視覚的快適性に関するUX調査（特に長いセッションで）。

20）設計システムにおけるドキュメンテーション

「ネオン/アクセント」ページ：パレット（製品/マーケティング）、グロートークン、コンポーネント例、マイクロインタラクションのビデオデモ。
「コントラストマトリックス」：'fg × bg'と'on-'の実際の係数。
フロントエンドのプリセットクラスとスニペットのセット。

概要

Neon/Accent for Gamble Hub-ポイント、セマンティック、生産性。光は、コントラストと快適さを妨げることなく、視線を行動に導きます。エンジン-トークン（OKLCH）、「光」輝きプリセット、厳密な状態、高コントラストで無効効果。これはブランドの明るいキャラクターを与えますが、便利で高速な製品のままです。