Gamble Hub視覺愛德

1）品牌本質和原則

圖像：技術、誠實、可靠、以數據和責任為導向。
語氣：克制和稱職；沒有「賭博」誇張。
原則：可讀性>裝飾,默認可用性,產品之間的一致性。

2）徽標： 結構與用途

2.1個選項

主要（水平）：標記+單詞Gamble Hub。
緊湊型（標記）：用於favicon/化身。
垂直：適用於狹窄區域。

2.2設計和安全區

8px網格。安全區域=標題G的周長高度。
最小尺寸：印刷寬度為18毫米；屏幕為120 px。
不能從調色板中更改比例、傾斜、添加效果/漸變。

2.3在背景下

淺色背景是彩色徽標。
在復雜/照片中，是8-12 px倒圓角壓板上的單色（白色/黑色）。
在黑暗中-反向。

3）色彩系統（令牌）

3.1基本調色板

Primary / Indigo 600: `#2F6BFF`

Primary Dark / Indigo 700: `#1E54F0`

Success / Green 600: `#2EAE60`

Warning / Orange 600: `#FF9F1A`

Critical / Red 600: `#E53935`

FG Primary: `#11131A`

FG Muted: `#656D76`

BG Base: `#FFFFFF`

BG Subtle: `#F7F8FA`

BG Inverse: `#0E1116`

3.2個梯度（根據需要）

Brand Gradient： 'linear-gradient （135 deg,#2F6BFF 0%,#1E54F0 50%,#2EAE60 100%）'-使用劑量。

3.3對比度和狀態

主要按鈕：背景"#2F6BFF",文本為白色,hover'#1E54F0",失去40% alpha。
文本對比≥ 4。5:1 (AA).對於反轉-對於大型，≥ 3：1。

4）打字機

標題：Inter/SF Pro/系統,脂肪為600-700。

文字： Inter 14-16 px, line-height 1.5.

代碼/單聲道：JetBrains單聲道或系統單聲道。
層次結構：H1 32/40、H2 24/32、H3 20/28、Body 16/24、Caption 12/16。
不要在界面中使用裝飾字體。

5）網格，縮進和半徑

網格：8 px；max-width 1120-1280 px容器。
卡：16-24 px內部縮進，carts-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）黑暗和明亮的主題

深色：背景「#0E1116」，文字「#E6E8EB」，邊界「#2A2F37」。
重音保持對比（主要輕音為8-12％）。
圖形：背景2步輕背景,網格靜音,字幕對比。

9）可用性（A11y）

AA/AAA對比；不刪除焦點樣式。
徽標和有意義的圖像中的文本替代品。
最小點擊大小為40-48 px。
尊重「prefers-reduced-motion」-降低/關閉動畫。

10）音調和微攝影

簡而言之，沒有行話。
錯誤解釋了用戶要做什麼。
單位和格式：日期在用戶所在的位置,在接口是ISO輸入,貨幣與代碼（EUR, USD）。
不要在食品信息中使用「賭博」隱喻。

11）令牌示例（JSON和CSS）

JSON:

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按鈕：背景primary-600,文本#FFF, hover primary-700, disabled 40% alpha。
徽章：具有可讀文本和圖標的success/warning/critical。
卡片：BG Base背景，影子sm，半徑md，頭部16 px，主體16-24 px。

13）動畫和運動

120-200毫秒的過渡，「ease-in-out」曲線。
動畫僅是「變形」/「opacity」。
對於關鍵狀態-沒有動畫（不要分心）。

14） Sosmedia,演示文稿,電子郵件

化身/圖標：primary-600的標記，12-16 px的縮進。
幻燈片：背景light/深色，8px網格，H1 40-48，內容18-24。
電子郵件：600-720 px寬的HTML模板，系統/Inter字體，≥ 44 px高的按鈕，深色主題。

15）印刷，商品和室外

CMYK顏色配置文件，等效的Pantone與印刷廠保持一致。
保留最小徽標尺寸和半徑。
紙是磨砂的，避免「尖叫」的清漆；圖標允許使用。

16）法律標記和負責任的遊戲

帶有徽章的Logo ®/™如有必要（yurd。國家）。
折疊器和年齡限制在布局的下部區域；AA可讀性。
不要在鼓勵過度行為的內容中使用愛德華。

17）本地化和RTL

徽標/斯洛文尼亞徽標不會翻譯。
文本塊-資源；支持RTL（箭頭/圖標鏡像）。
在布局中考慮德語/土耳其語/阿拉伯語的行長。

18) Do / Don’t

Do:

支持對比度、安全區域、字體層次結構、8px網格。
檢查照片/視頻中的可見性；使用彈簧。
按照令牌-沒有「隨機」顏色。

Don’t:

拉伸/修剪徽標,應用陰影/筆畫「為了美麗」。
使用「賭博」圖像作為產品背景。
混合非標準字體、打破對比度或刪除焦點。

19） Assets，Neiming和版本

Neiming： '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」的cheinjlog。
真相來源：web/iOS/Android →構建令牌存儲庫。

20）質量控制和流程

Brand Review in PR：驗證令牌和對比度。
A/B用於有爭議的背景圖像（可讀性/轉換）。
Linter：禁止標記外的顏色,檢查圖像的alt文本。
季度審核：調色板/打印/圖標一致性。

21）模板

Keynote/Slides：標題，部分，內容，「數據/圖表」，結尾。
Sosmedia：1：1頭像，16：9橫幅，歷史9：16。
電子郵件：問候，CTA，通知，摘要。
Landing： Hero Block, 3個優勢,店面,CTA,地下室。

22）申請表

• 徽標：正確的選項,安全區,對比度,尺寸。
• 顏色：僅限令牌；AA對比。
• 字體：層次結構、行間、目標尺寸。
• 圖標：網格24 × 24，單線厚度。
• 圖像：有效的主題，文本的可讀性。
• 黑暗/光明主題：經過驗證，沒有人工制品。
• 本地化/RTL：行不會「打破」布局。
• 有法律/響應遊戲標記。

23）實施計劃（3次叠代）

• 徽標，調色板，打字機，基本令牌，24 × 24圖標集（主要40-60件），演示模式和電子郵件。

• 黑暗主題，令牌（按鈕，卡片，表）上的UI組件，圖形的海德，社交媒體，著陸模板。

• Iconpak擴展，插圖，印刷布局，令牌/CI，定期品牌審核。

24） Mini-FAQ

可以將徽標重新粉刷成香料促銷嗎？
僅在批準的季節性主題中，並且不違反對比/保護區。

什麼是主要的令牌或布局?

代幣。布局必須使用系統顏色/縮進/印刷變量。

如何處理有爭議的案件？
在identic存儲庫中打開RFC,附上示例,進行Brand Review。

底線

Gamble Hub的Aidentic不是「圖片集」，而是系統：徽標，調色板，印刷品，圖標，令牌和質量控制過程。遵循對比度、可用性和一致性規則,使用令牌和模板-品牌在所有產品和渠道中都是可識別、現代和統一的。