Visual Identityギャンブルハブ

1）ブランドエッセンスと原則

イメージ：技術、正直、信頼できる、データ主導および責任がある。
調子：予約され、有能；「ギャンブル」の誇張なし。
原則：可読性>装飾、デフォルトの可用性、製品間の一貫性。

2）ロゴ： 構造および使用

2.1オプション

メイン（水平）：sign+word Gamble Hub。
コンパクト（記号）：ファビコン/アバター用。
縦：狭い区域のため。

2.2構造および保証区域

8pxグリッド。ガードエリア=周囲の首都Gの高さ。
最小サイズ：幅18 mm；スクリーン-120 px。
パレット外からのプロポーションの変更、スキュー、エフェクト/グラデーションの追加はできません。

2.3背景

光の背景に-色のロゴ。
複雑/写真-プレート上のモノクロ（白/黒）8-12 pxラウンド。
暗闇の上で-反転。

3）カラーシステム（トークン）

3.1基本パレット

プライマリ/インディゴ600： '#2F6BFFF'

プライマリ・ダーク/インディゴ700： '#1E54F'

成功/グリーン600： '#2EAE60'

警告/オレンジ600： '#FF9F1A'

Critical/Red 600： '#E53935'

FGプライマリ： '#11131A'

FGミュート： '#656D76'

BGベース： '#FFFFFF'

BG微妙： '#F7F8FA'

BG逆数： '#0E1116'

3.2グラデーション（オプション）

ブランドグラデーション：'線形グラデーション（135deg、#2F6BFF 0％、#1E54F0 50％、#2EAE60 100％）'-投与量を使用します。

3.3コントラストと状態

プライマリボタン：背景'#2F6BFF'、ホワイトテキスト、ホバー'#1E54F0'、 40％アルファを無効にしました。
テキストコントラスト≥ 4。5：1 （AA）。反転の場合-大きい場合は≥ 3：1。

4）タイポグラフィ

タイトル：Inter/SF Pro/system、脂肪分600-700。

Text： Inter 14-16 px、 line-height 1。5.

コード/モノ：JetBrainsモノまたはシステムモノ。
階層：H1 32/40、 H2 24/32、 H3 20/28、ボディ16/24、キャプション12/16。
インターフェイスに装飾フォントを使用しないでください。

5）格子、インデントおよび半径

グリッド：8px；最大幅1120-1280 pxのコンテナ。
カード：内部インデント16-24 px、インターカード-16 px。
半径：8/12/16 px；デフォルト12 px、 8 pxボタン用。
技術：'0 1px 2px rgba （0,0,0,。08）' （sm）、 '0 4px 12px rgba （0,0,0,。10）' （md）。

6）図像とイラスト

アイコンのグリッド24 × 24、行1。75-2px、ラウンドマッチ。
セマンティクスはプライマリであり、色はセカンダリである（状態上の色の変化）。
イラスト：フラット、「カジュアル」シンボルなし（チップ/カード-中立の情報素材と中程度のインセンティブでないコンテキストでのみ）。

7）画像と写真

トピック：技術、データ、セキュリティ、チーム。
ジャックポット/コンフェッティクリシェは避けてください。
写真の上には、テキストコントラスト用のグラデーション/ダークプレートがあります（暗い部分では少なくとも60％の不透明度）。

8）暗くて軽いテーマ

Dark： background'#0E1116'、 text'#E6E8EB'、 borders'#2A2F37'。
アクセントはコントラストを保持します（プライマリは8〜12％明るくなります）。
グラフィック：背景は背景よりも軽い2つのステップであり、グリッドはマフルされ、キャプションは対照的です。

9）空室状況（A11y）

AA/AAAの対照；フォーカススタイルは削除できません。
ロゴと重要な画像のテキストの代替。
最小クリック数は40〜48 pxです。
'prefers-reduced-motion'を尊重します-アニメーションを削減/無効にします。

10）調子およびマイクロコピーライティング

短く、正確に、専門用語なし。
エラーは、ユーザーに何をすべきかを説明します。
単位とフォーマット：ユーザーロケール内の日付、インターフェイス内-入力時のISO、コード付きの通貨（EUR、 USD）。
食料雑貨のメッセージで「ギャンブル」の比喩を使用しないでください。

11）トークンの例（JSONおよびCSS）

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12）コンポーネントと状態（UIの例）

プライマリボタン：primary-600 background、 text#FFF、 hover primary-700、無効40％ alpha。
バッジ：成功/警告/クリティカル読み取り可能なテキストとアイコン。
カード：BGベース背景、smシャドウ、md半径、16 pxヘッダー、16-24 px本体。

13）アニメーションとモーション

トランジション120-200ミリ秒「、イージーインアウト」カーブ。
アニメーション-'transform'/'opacity'のみ。
クリティカルな状態の場合-アニメーションなし（気を散らさないでください）。

14）ソーシャルメディア、プレゼンテーション、電子メール

アバター/アイコン：プライマリ600ダイにサインイン、インデント12-16 px。
スライド：明るい/暗い背景、8px格子、H1 40-48、内容18-24。
電子メール：HTMLテンプレート600-720 px幅、システムフォント/インター、ボタン≥ 44 px高さ、暗いテーマが考慮されています。

15）印刷、マーチおよび外部

CMYKの色のプロフィール、Pantoneの同等物は印刷家に同意します。
ロゴと半径の最小サイズを維持します。
紙-マット、「叫ぶ」ワニスを避ける。浮彫りになることは印のために受諾可能です。

16）法的マークアップと責任あるプレー

必要に応じて®/™記号のロゴ（urd。国）。
免責事項と年齢制限-レイアウトの下部ゾーンで；可読性AA。
過度な行動を促すコンテンツにアイデンティティを使用しないでください。

17）ローカライズとRTL

ロゴシンボル/ワードは翻訳されません。
テキストブロック-リソース内；RTLサポート（矢印/アイコンのミラーリング）。
レイアウトについては、ドイツ語/トルコ語/アラビア語の線の長さを考慮してください。

18）やる/しない

• コントラスト、ガードゾーン、フォント階層、8pxグリッドを維持します。
• 写真/ビデオの可視性をチェックします。ダイを使って。
• トークンに従ってください-「ランダム」色はありません。

• ロゴをストレッチ/刈り取り、影/ストロークを「美しさのために」適用します。
• 製品の背景として「ギャンブル」画像を使用します。
• 標準でないフォントを混ぜたり、コントラストを壊したり、フォーカスを削除したりします。

19）資産、命名およびバージョン

名前：'gh-logo-hz-color。svg'、'gh-logo-vt-mono-white。svg'、'gh-icon-24-alert。svg'。
その他：'/brand/logos/'、 '/brand/icons/24/'、 '/brand/templates/'、 '/brand/fonts/'。
フォーマット：ロゴ/アイコンのためのSVG；スクリーンのためのPNG/WebP；印刷のためのPDF。
バージョン管理：トークン/アイコンパック用のSemVer；'added/changed/deprecated/removed'を持つchangelog。
真実のソース：→web/iOS/Android用のビルドトークンリポジトリ。

20）品質管理およびプロセス

PRでのブランドレビュー：トークンとコントラストのチェック。
物議を醸す背景画像（可読性/変換）のA/B。
Linter：トークン外の色を禁止し、画像のalt-textをチェックします。
四半期ごとの監査：パレット/タイポグラフィ/アイコンパックの一貫性。

21）テンプレート

Keynote/Slides：タイトル、セクション、コンテンツ、「data/chart」、 final。
ソーシャルメディア：1：1アバター、16：9バナー、ストーリー9：16。
電子メール：挨拶、CTA、通知、ダイジェスト。

着陸： ヒーローブロック、3つの特典、ショーケース、CTA、地下

22）アプリケーションチェックリスト

• ロゴ：正しいオプション、セキュリティゾーン、コントラスト、サイズ。
• 色：トークンのみ；AAコントラスト。
• フォント：階層、行、ターゲットサイズ。
• アイコン：グリッド24 × 24、均一なラインの厚さ。
• 画像：有効なテーマ、上のテキストの可読性。
• Dark/Light Theme：検証済み、アーティファクトはありません。
• ローカライズ/RTL：線はレイアウトを「壊す」ことはありません。
• 法的/責任あるゲームマークアップが存在します。

23）実施計画（3回繰り返し）

• ロゴ、パレット、タイポグラフィ、基本的なトークン、アイコンのセット24 × 24（主要な40-60 PC。）、プレゼンテーションテンプレートと電子メール。

• 暗いテーマ、トークン上のUIコンポーネント（ボタン、カード、テーブル）、グラフのガイド、ソーシャルメディアパック、ランディングページ。

• 拡大されたアイコンパック、イラスト、印刷されたレイアウト、トークンのためのlinter/CI、規則的なブランドの監査。

24） ミニFAQ

特別なアクションのためにロゴを塗り直すことは可能ですか？
承認された季節のテーマでのみ、コントラスト/セキュリティゾーンに違反することなく。

プライマリトークンとは何ですか？
トークン。レイアウトには、システムカラー/インデント/タイポグラフィ変数を使用する必要があります。

物議を醸すケースでどのように行動するのですか？
IDリポジトリでRFCを開き、例を添付し、ブランドレビューを実行します。

合計

Gamble Hubアイデンティティは「ピクチャーセット」ではなく、ロゴ、パレット、タイポグラフィ、アイコンパック、トークン、品質管理プロセスというシステムです。コントラスト、可用性、一貫性のルールに従い、トークンとテンプレートを使用します。ブランドは、すべての製品とチャネルで認識可能で、モダンで統一されます。