Brand Design System · v2.0 Phase 1
AI · Session Review · Analyst
把撲克當競技運動在研究的玩家，需要的那種工具。
01 · Logo System
黑桃 ♠ 作為品牌符號，搭配 wordmark 使用。黑桃代表撲克語言，也暗示精準分析的指向性。
Clear Space · 最小留白
Logo 四周需保留至少 1x 的符號高度作為保護區（虛線範圍內不可放任何元素）。
Logo Misuse · 禁用範例
Symbol Sizes · App Icon
02 · Color System
AI Violet 是唯一品牌強調色。顏色不是裝飾——每一個色值都有明確語意。Dark Mode 優先，Light Mode 用於行銷頁與 PDF 匯出。
Base Surfaces · Dark
Brand Accent · AI Violet
Data Semantics · 只用於資料
Text Scale · Dark
Light Mode 色票
Dark Mode 優先。Light Mode 用於 Marketing 頁、PDF 匯出、部分 onboarding 場景。Violet 加深至 #6d28d9 以確保對比度。
✓ Do
用紫色標記 AI 功能、教練觀察、品牌元素
用綠 / 紅表達資料盈虧、正負 EV
Dark Mode 作為主要介面，Light Mode 限行銷用途
Light 版 Violet 改為 #6d28d9 確保 WCAG 對比
✗ Don't
在 App 內使用 Light Mode 背景（行銷除外）
同一畫面出現超過 3 種強調色
用 Amber / 橙色作非成就語境
用紅色作非資料用途（按鈕、標題）
03 · Typography
Space Grotesk 負責所有顯示文字，DM Mono 專門用於數據、程式碼與 label。中文顯示使用系統字體。
04 · Spacing System
4px 為基礎格線單位。所有 margin、padding、gap 必須使用以下 token，不允許任意數值。
Component Spacing Rules · 元件間距對照
05 · Components
核心 UI 元件的視覺規範，涵蓋按鈕、標籤、狀態列與 Session 封面。
Primary
Secondary / Ghost
Grade
Data
Hand History Card · 單手牌記錄
Player Stats Card · 玩家數據
06 · Forms
所有輸入元件的視覺規範與互動狀態。Focus ring 使用 Violet，Error 使用 data-neg，保持語意一致。
Text Input · 標準輸入
Input States · 全套狀態
Select & Search
Toggle & File Upload
06 · Motion Language
動畫只用於傳遞狀態、引導注意力。不做純裝飾性動效。
Interactive Demo · 互動示範
06 · Voice & Tone
Poker Copilot 說話的方式——像一位真正懂牌的教練，不是機器。
語氣原則
直接、精準，不廢話
像頂尖教練，不像客服
數據說話，分析有理有據
讓玩家感覺被認真對待
避免
「太棒了！你做得很好！」式的空洞鼓勵
賭博、博弈相關用語
過度技術術語（先說結論）
被動語態、書面化腔調
Session Summary · 賽後總結
本場整體打法偏緊，在位置牌（BTN、CO）的主動性不足。河牌棄牌率 68%，高於均值 12 個百分點——這是主要漏點。
直接指出問題，給出數據，不說廢話
Hand Analysis · 單手分析
翻牌圈過牌讓對手免費看了轉牌，失去了 1.8bb 的價值。這類乾燥牌面應該 c-bet 約 40% 底池，保護你的範圍。
具體場景，給出可行動的建議
Tagline · 品牌標語
牌局結束後，真正的學習才開始。
簡短、有力、說出用戶心裡想說的話
Error State · 錯誤訊息
無法讀取這份手牌記錄。請確認檔案格式為 .txt，並由 Natural8 或 GGPoker 匯出。
說清楚原因，給出解法，不說「發生未知錯誤」
Empty State · 空白狀態
這裡還沒有任何 session。上傳第一份手牌記錄，AI 教練就會開始為你分析。
說明下一步是什麼，引導行動，不讓用戶困惑
Push Notification · 推播
你的 session 分析好了。今天的 BB 防守有個值得看的地方。
具體說出有什麼，讓用戶有理由點進來
Before / After · 語氣對比
08 · AI Prose
AI 教練生成的 Markdown 長文，呈現於 Session 賽局簡報面板。這套 prose scale 獨立於主字型 scale，專為卡片內閱讀情境設計。
| 層級 | 字級 | 字重 | 顏色 token | 上方間距 |
|---|---|---|---|---|
| h2 prose | 14px | 600 | text-0 | mt 28px |
| h3 prose | 13px | 500 | text-1 | mt 20px |
| body | 14px | 400 | text-1 | mb 12px |
| strong | inherit | 600 | text-0 | — |
| caption | 10px | 400 | text-3 | — |
整體打法偏緊保守，尤其在 BTN 和 CO 位置的主動性不足，導致錯失大量位置優勢。
河牌棄牌率 68%，高於均值 12 個百分點。這是本場最大的 EV 漏洞。
AI 教練建議
下一場專注練習河牌詐唬——每 3 手遇到乾燥牌面，試著 bluff 其中 1 手，觀察對手反應。
翻牌圈過牌讓對手免費看了轉牌
本場在 BTN 的 3-bet 頻率偏低
❝河牌棄牌率 68%，高於均值 12 個百分點
❝語氣違規 vs. 正確寫法
點擊標籤切換好壞範例，感受語氣差異。
用數值範圍，不用絕對語氣
「這個 bluff 在這個位置的成功率約 35–45%，取決於對手的 fold equity 與你的歷史形象。」
結論先，細節後
先輸出「你的主要漏洞：BTN open 範圍過窄」，再展開數據；讓用戶決定是否深入閱讀。
圖表顯示數字，文字說明為什麼
圖表已有 68% 的數字，文字應寫「比均值高 12 個百分點，影響原因是…」而非重複數字。
09 · Data Visualization
撲克數據的呈現語言。數字永遠優先於顏色，顏色永遠服務語意（正 / 負 / 中性），而非裝飾。
Session KPI · 四格基準佈局
Position EV Map · 位置期望值分佈
Grade Ring · 評分圓環元件
Grade ring 只用語意色（pos/neg/amb），不使用 AI Violet。
圓環粗細固定 6px，尺寸 64 × 64。
10 · Responsive & Mobile
Poker Copilot 優先設計 Desktop（1024px+），但需支援平板和手機閱讀狀態。斷點系統基於 5 個固定 token，不使用任意數值。
| Token | Min-width | Grid cols | 主要使用情境 |
|---|---|---|---|
| xs | 375px | 1 col | 手機橫向閱讀：Session 總覽卡片全寬，隱藏次要資訊 |
| sm | 640px | 2 cols | 大型手機 / 折疊機：2 欄 KPI grid，bottom sheet 替代 side panel |
| md | 768px | 2–3 cols | 平板：觸發 side nav，手牌記錄與分析面板可並排 |
| lg | 1024px | 3–4 cols | 主力設計尺寸：全功能 layout，固定左側 nav，右側分析面板常駐 |
| xl | 1280px | 4+ cols | 寬螢幕 / 外接顯示器：Session replay、統計圖表充分展開 |
Mobile Nav · 抽屜式導覽（互動示範）
互動規則
點擊右上角漢堡選單開啟抽屜。關閉動畫使用與 Door Open 相同的 cubic-bezier(0.76,0,0.24,1) 曲線，保持品牌動態語言一致性。
堆疊優先順序
手機尺寸下：Session KPI → Hand Cards → AI 簡報。統計圖表縮至 2 欄，複雜分析面板改為 bottom sheet。
Grid 堆疊規則 · Desktop vs. Mobile
11 · Design Tokens
所有 CSS 變數的完整清單，可直接貼入專案。分三組：Color、Typography、Spacing。
/* ── Color Tokens ── */ /* Dark Mode (default) */ --bg-0: #040408; /* Page base */ --bg-1: #0b0b10; /* Cards */ --bg-2: #111118; /* Elevated surfaces */ --bg-3: #1a1a24; /* Hover / active */ --line: rgba(255,255,255,0.07); --line-md: rgba(255,255,255,0.12); --text-0: #fafafa; /* Primary text */ --text-1: #c4c4cc; /* Secondary */ --text-2: #86868f; /* Muted */ --text-3: #4a4a55; /* Label / disabled */ --violet: #a78bfa; /* Brand accent */ --violet-dim: rgba(167,139,250,0.12); --violet-glow: rgba(167,139,250,0.25); --violet-deep: #7c3aed; --data-pos: #4ade80; /* Win / +EV */ --data-neg: #f87171; /* Loss / leak */ --data-neu: #60a5fa; /* Neutral / info */ --data-amb: #fbbf24; /* Achievement only */ /* Light Mode overrides */ --bg-0: #fafaf9; --bg-1: #f1f0ff; --bg-2: #e8e6ff; --bg-3: #dddaff; --text-0: #111118; --text-1: #3a3a45; --text-2: #6b6b78; --text-3: #9a9aa8; --violet: #6d28d9; /* Darker for light bg contrast */ --data-pos: #16a34a; --data-neg: #dc2626; --data-neu: #2563eb;
/* ── Typography Tokens ── */ --font: "Space Grotesk", -apple-system, "Helvetica Neue", sans-serif; --mono: "DM Mono", "SF Mono", monospace; /* Scale */ --text-display: 700 48px/1 var(--font); /* tracking -0.03em */ --text-headline: 700 32px/1.05 var(--font); /* tracking -0.025em */ --text-title: 600 22px/1.1 var(--font); /* tracking -0.02em */ --text-body-lg: 400 16px/1.65 var(--font); --text-body: 400 14px/1.65 var(--font); --text-caption: 400 12px/1.6 var(--font); --text-label: 400 10px/1 var(--mono); /* uppercase + tracking 0.2em */ --text-data: 600 24px/1 var(--mono); /* tabular-nums */
/* ── Spacing Tokens — 4px base grid ── */ --space-1: 4px; /* icon gap */ --space-2: 8px; /* tight spacing */ --space-3: 12px; /* button padding (y) */ --space-4: 16px; /* default gap */ --space-5: 20px; /* nav padding */ --space-6: 24px; /* card padding (standard) */ --space-8: 32px; /* card grid gap */ --space-10: 40px; /* section inner gap */ --space-12: 48px; /* large block gap */ --space-16: 64px; /* hero spacing */ --space-20: 80px; /* section padding (top/bottom) */
12 · Light / Dark Mode
Dark Mode 是主要介面。Light Mode 用於對外行銷頁、PDF 匯出與部分 onboarding 畫面，不用於 App 核心操作介面。
Token 對照 · 什麼會變，什麼不變
App 主介面（Session Review、手牌分析、教練對話）
任何長時間使用的操作介面
電腦或平板作為主要裝置的場景
戰情室感、沉浸式體驗
Marketing 官網與 Landing Page
PDF / 報告匯出
Onboarding 歡迎畫面
社群分享圖（Instagram、Twitter）
Changelog
每個版本的新增、改動與修正。Design System 與產品版本獨立管理。