Game Seer 设计规范

类型：产品设计规范 · 在设计基线（REFERENCE）之上，只写本产品覆盖 / 新增的设计思路，其余继承基线。品牌不变量（命名与 Logo、账号接入）为 INVARIANT，照做不改。

本文只立设计思路；具体数值（颜色、字号、圆角、阴影、动效）落在产品的样式令牌里，不在此复制。

一、一句话气质：外层波普，内核研报

Game Seer 把品牌标记 Pop Mark 的「半色调 + 爆裂」波普 DNA 展开成一整套 neo-brutalist 视觉（黑描边 + 硬偏移投影 + 微旋转 + 三原色块 + 半调圆点），同时让数据层严守研报级克制。两者是分工，不是矛盾——这是本产品最该守住的线：

层	归谁	取向
容器 / 品牌 / 情绪层（骨架、卡片、徽章、按钮、氛围、标题）	波普放开玩	硬描边、硬阴影、微旋转、亮色块、圆点、动效
数据 / 图表 / 数字层（概率条、比分矩阵、meter、战绩数字、参数值）	研报级克制	等宽数字、发散蓝灰红、单色相热力、显式百分比、禁彩虹禁饼图

判定最快的问法：这是「容器」还是「数据」？ 容器可以歪、可以亮、可以弹；数据必须齐、必须准、必须冷静。把波普玩到数据层（给概率条加渐变、给数字加旋转）就是破坏。

二、相对设计基线的自定义清单

在基线允许的边界内做如下偏离，未列出的项一律继承基线：

项	基线默认	Game Seer	性质
主色	Mint 绿	沿用 Mint 家族	继承
强调色	仅 Mint 家族	新增 Pink + Yellow，构成波普三原色	新增
正文字体	Space Grotesk	改用几何无衬线 + 中文回退	覆盖
展示字体	Newsreader（默认）/ Fredoka（可选）	选 Fredoka（标题 / 大数字 / 队名 / VS）	选项内选择
圆角	8 / 6 / 999	整体放大（卡片最大）	覆盖
形体	克制卡片	neo-brutalist：黑描边 + 硬偏移投影 + 微旋转	覆盖
明暗模式	—	浅 / 深双模式（描边阴影反相；默认浅色）	新增
数据配色	—	功能语义色 + 数据可视化铁律（见 §五）	新增
可访问性	守	守；减少动效偏好下的降级待补	部分欠账

三、色彩原则

• 波普三原色（Mint / Pink / Yellow）只上容器与情绪层：块底、链接、徽章、点睛标签、氛围圆点；不参与数据系列着色。

• 功能语义色是研报层的「宪法」，换皮不换映射：

  角色	规则
  左队 / 右队	蓝 / 红两极，跟随球队实体，永不因排序或输赢换位
  平局	发散中点必须中性灰，禁第三种彩色
  命中 / 警示 / 危险	绿 / 琥珀 / 红，状态色，不复用为系列色

• 热力图单一蓝色相，浅→深表示概率低→高，禁彩虹。

• 深色不是简单调暗：描边与硬阴影反相（黑 → 浅），这是 neo-brutalist 在深底上成立的前提；品牌三原色深浅不变，靠表面与描边反相维持对比。

四、字体原则

三副字体，构建期自托管（无外链，满足全球可达）：

• 展示字：标题、大数字、队名、VS、行动点，字重用得重。
• 正文字（几何无衬线，覆盖基线 Space Grotesk）：说明、标签、表单、导航。
• 中文回退：挂在上两者之后。

排版铁律：所有数字一律用等宽数字——中英双语切换都对齐不跳动，是研报可信感的低成本来源，不可省。字号随视口响应式缩放。

五、数据可视化铁律（研报层宪法 · 换视觉不换规则）

1. 发散三色跟随实体：左蓝右红、平局中性灰居中；颜色绑球队，不因排序 / 输赢换位。
2. 灰段必带显式百分比：中性灰对比不足，胜平负条一律在条外标数字。
3. 段间留间缝，三段边界清晰。
4. 热力图单一色相，浅→深 = 概率低→高；禁彩虹渐变。
5. 禁饼图、禁双轴：比率用 meter，占比用发散条。
6. 文字永远用文本色，不用系列色写字。
7. 数字全用等宽数字。

六、形体语法（neo-brutalist）

四件套成套取用：硬描边 + 硬偏移投影（0 模糊 + 正偏移，实心贴纸影）+ 放大圆角 + 微旋转。

克制线：旋转与硬阴影只上容器与徽章，数据元素永远正着。hover 时卡片回正并抬升（静止时歪着躺、指上去站直浮起）——这个微交互务必保留。

七、明暗 · 双语 · 全球可达

• 双模式：浅 / 深两套，默认浅色；深色靠描边 / 阴影反相成立（§三），品牌三原色不变。
• 双语排版：Latin 与 CJK 字体自动分工；数字全用等宽数字，中英切换都对齐。
• 全球可达：字体构建期自托管、无任何第三方外链；站点走 Cloudflare，含中国大陆在内全区可达。
• 可访问性欠账：目前未对「减少动效」偏好做降级，重做时应补（关掉漂浮 / 视差 / 入场动效，仅留必要状态过渡）——这是设计基线的底线。