climperor/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
alpha	Climperor Web	Dark Dota-inspired information panels for the Climperor Web desktop site.	primary secondary tertiary neutral surface surface-raised on-surface on-surface-muted border accent good bad syn danger gold live panel panel-soft on-accent #5EC8FF #8FA3BC #3DCE7A #0B1018 #0E1622 #101824 #E8EEF7 #8FA3BC rgba(140, 170, 210, 0.18) #5EC8FF #3DCE7A #E07A2F #7EC8FF #E86A6A #E8C878 #FE2C55 rgba(14, 22, 34, 0.96) rgba(8, 12, 20, 0.55) #0B0D10	brand display page-title title-lg title-md body-lg body-md body-sm label-md label-sm numeric-lg numeric-md fontFamily fontSize fontWeight lineHeight letterSpacing Noto Serif SC, Songti SC, STSong, SimSun, serif 18px 700 1.3 0.16em fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 32px 800 1.1 0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 22px 800 1.2 0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 18px 700 1.3 0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 16px 700 1.35 0.02em fontFamily fontSize fontWeight lineHeight Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 15px 400 1.5 fontFamily fontSize fontWeight lineHeight Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 14px 400 1.5 fontFamily fontSize fontWeight lineHeight Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 13px 500 1.45 fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 13px 600 1.3 0.06em fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 12px 600 1.3 0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 28px 700 1.1 0.02em fontFamily fontSize fontWeight lineHeight Segoe UI, Microsoft YaHei UI, PingFang SC, sans-serif 14px 700 1.2	sm md lg xl full 4px 8px 12px 16px 9999px	xs sm md lg xl 2xl 3xl gutter page-y content-read content-standard content-wide content-data 4px 8px 12px 16px 24px 32px 48px 16px 28px 820px 880px 1080px 1200px	button-primary button-primary-hover button-secondary button-secondary-active tab-main tab-main-active input-search panel-card chip-filter chip-filter-active mark-good mark-bad mark-syn badge-gold badge-live badge-danger panel-raised panel-soft divider backgroundColor textColor rounded padding height {colors.primary} {colors.on-accent} {rounded.md} 12px 40px backgroundColor #7AD4FF backgroundColor textColor rounded padding height {colors.surface} {colors.on-surface} {rounded.md} 12px 40px backgroundColor textColor {colors.primary} {colors.on-accent} backgroundColor textColor typography height padding {colors.surface} {colors.secondary} {typography.body-lg} 42px 10px backgroundColor textColor {colors.surface-raised} {colors.on-surface} backgroundColor textColor rounded height padding {colors.neutral} {colors.on-surface} {rounded.md} 40px 12px backgroundColor textColor rounded padding {colors.surface} {colors.on-surface} {rounded.lg} 16px backgroundColor textColor rounded padding {colors.surface} {colors.secondary} {rounded.full} 8px backgroundColor textColor {colors.surface-raised} {colors.on-surface} backgroundColor textColor {colors.neutral} {colors.good} backgroundColor textColor {colors.neutral} {colors.bad} backgroundColor textColor {colors.neutral} {colors.syn} backgroundColor textColor {colors.neutral} {colors.gold} backgroundColor textColor {colors.live} #FFFFFF backgroundColor textColor {colors.neutral} {colors.danger} backgroundColor textColor {colors.panel} {colors.on-surface} backgroundColor textColor {colors.panel-soft} {colors.on-surface-muted} backgroundColor textColor {colors.surface} {colors.border}

Climperor Web Design System

Overview

上分帝 Web 是面向桌面浏览器的 Dota 2 信息站：深色蓝黑底、高信息密度、冷静可读。气质接近官方客户端与选人界面——偏工具面板，不走社交 feed 或明亮营销站。

目标感受：

• Dense but calm：列表、表格、网格可挤满视口，但字号、行高、间距仍保持清晰节奏。
• Semantic color first：青色强调当前选择与导航；绿 / 橙 / 青蓝分别表示克制 / 被克 / 搭档；粉红仅用于直播态。
• Desktop shell：100dvh 外框 + 页内滚动；手机 / 平板由 mobile-gate 拦截，不为真移动端另做一套 IA。

实现源：web/frontend/style.css 的 CSS 变量必须与本文件令牌一一对应。工程决策见 ARCHITECTURE.md。

Colors

调色盘以近黑海军为底，浅冷灰为正文，单一青色作交互主色。

• Primary (#5EC8FF)：主交互与选中态（主 Tab 底线、侧栏选中填充、焦点环、选中英雄描边）。
• Secondary (#8FA3BC)：次要文案、标签、时间戳、未选中控件。
• Tertiary (#3DCE7A)：正向语义（克制、胜率上升、胜场）。
• Neutral (#0B1018)：页面底色；表面层用更深的半透明面板叠在渐变背景上。
• Bad / Danger / Gold / Live / Syn：业务辨识色，不得拿来当通用强调色。

对比度要求：正文与底至少 WCAG AA；muted 文案仅用于辅助信息，不用在关键操作标签上。

Typography

系统栈：Segoe UI + Microsoft YaHei UI + PingFang SC。正文与控件优先清晰，不引入全站装饰字体。

品牌例外：顶栏 / 移动端门禁的「上分帝」使用 brand（自托管 Noto Serif SC 子集，仅 U+4E0A / U+5206 / U+5E1D），宋体气质贴合「帝」字；正文仍走系统无衬线栈。禁止把衬线栈扩到导航、页标题或表格。

Token	用途
brand	仅品牌字标「上分帝」（顶栏 + mobile-gate）
display	版本号等少数展示数字（约 32px，勿再放大到 40px）
page-title	各顶层页标题（排行 / 走势 / 机制 / 主播 / 物品等）
title-lg / title-md	区段标题、英雄名、物品名
body-lg / body-md / body-sm	导航、正文、说明
label-md / label-sm	表头、分区标签、徽章
numeric-*	表格数字与指标卡，配合 tabular-nums

字重只用 400 / 500 / 600 / 700 / 800。禁止 650、13.5px 等孤立值。默认行高正文 1.5，标题 1.1–1.3；勿留 line-height: normal 在可读正文上。

Layout

桌面壳：顶栏固定高度区 + 可滚动 main.board；英雄页的英雄网格与固定高 #detail 之间放置一行定位筛选。选中英雄后 #detail 使用共享固定高度：按视口预留顶栏 + 完整 #columns 英雄网格实测高度 + 定位标签后取余，再 clamp 到约 280–640px （CSS 回退 min(640px, calc(100dvh - 26rem))）。技能 Tab 不驱动抽屉高度， 内容在抽屉内 flex/滚动；Tab 切换不跳动；长 Tab（走势/对位等）同理在详情区内滚动。 技能演示片源为官网 16:9；有横向空间时加宽（上限约 720px / 列宽 58%）， aspect-ratio: 16/9 + object-fit: contain，勿用拉满高度的 cover 裁左右。

顶部壳（紧凑单层）

顶栏只保留主行，禁止品牌 / 主导航 / 搜索三者各自「漂浮居中」造成大块空洞：

1. 首行 PrimaryRow：display: grid; grid-template-columns: 1fr auto 1fr（或等价 flex）。
   • 左：品牌（logo + 标题）
   • 中：主导航分段控件（真正几何居中）
   • 右：工具区（英雄/物品搜索 + 邮件入口），justify-content: end 视觉语言轻度借鉴 Dota 2 国服官网导航，但不复刻门户式大顶栏：

• 顶栏使用近黑金属渐变与上下 1px 冷色高光，形成连续横梁；总高控制在约 60px。
• 品牌区仅用克制的暗红内光形成视觉锚点，不在 Logo 右侧增加分隔线；不使用视频 Logo、金色奖项条或厚重贴图。
• 主导航保持现代无边框文字 Tab；相邻 Tab 仅用低对比斜切细线分隔，不做梯形按钮。
• 主交互色仍为 primary 青色；Dota 红只用于品牌区，不替代全站选中态。
• 宽屏主行采用 44px 控件高：主导航 16px / 最小 76px 宽，品牌 Logo 32px。lg 断点恢复 40px、15px 的紧凑规格。

断点降级：

• lg ≤1200px：Tab 水平内边距收紧；搜索宽约 160–180px
• md ≤900px：隐藏品牌标题，仅留 logo；搜索再缩短
• sm ≤640px：极窄桌面可隐藏整块品牌

内容宽度档位（命名，勿再散落魔法数）：

档位	宽度	页面
full	100%	英雄网格
read	主列 min(820px) 页内居中；宽屏「AI 解读」贴主列右侧（不参与居中），宽度随可用侧栏约 280–420px，sticky + 视口内自滚动	版本
standard	min(880px, calc(100% - 48px))	排行、主播、机制
wide	min(1080px, …)	走势
data	min(1200px, …)（居中时两侧预留侧栏）	比赛、玩家「我」主页

间距尺度：4 / 8 / 12 / 16 / 24 / 32 / 48px。页内 gutter 默认 16px；列表页上下 page-y 28px。侧栏与主列间距 20px。

断点收敛为三档：

• sm ≤640px：极窄桌面（列堆叠、双列网格）
• md ≤900px：aside 改上下堆叠、英雄两列
• lg ≤1200px：物品详情上移、列间距收紧

手机不走上述断点，由 UA 门禁接管。

Elevation & Depth

深度靠色调分层与细边框，不用厚重投影：

1. 页面渐变底
2. 半透明顶栏 / 面板（panel-soft）
3. 实心一点的浮层（panel、物品 sticky 详情、天赋 popover）

选中态用 inset 底线、填充主色或 1–2px accent 描边；阴影仅用于浮层（popover / 气泡），模糊约 24–32px、黑色 45% 透明度。

Shapes

圆角语言偏克制：

• sm 4px：表格内图标、小徽章
• md 8px：输入框、多数按钮、指标卡
• lg 12px：详情面板、机制卡、主内容卡
• xl 16px：仅大卡片（主播卡）需要时使用，勿扩散到所有面板
• full：筛选 pill、关注按钮

禁止同一视图混用锐角与大圆角而无语义理由。

Components

玩家主页（Identity / Snapshot / Dashboard）

登录后「我」与 /players/{id} 共用紧凑数据仪表盘语言，不做小黑盒式社交 feed：

• Identity strip：整行；panel-soft + 细边框 + radius-lg；头像 full 圆形 56px；昵称 + 段位勋章同行。勋章容器约 64px（OpenDota 图标含画布留白，光学尺寸对齐头像），具体星级用 rank_icon_* + rank_star_* 叠层表达（如传奇四），不并排写「传奇4」文字；冠绝榜位可保留 #N。
• Snapshot 摘要区：生涯与近 N 场并排（窄屏堆叠）；指标卡 radius-md、数字 tabular-nums、紧凑五列网格；空数据整组隐藏，禁止显示伪 0% 胜率。
• Analysis 次级区：宽屏双栏——左常用英雄列表，右 180 天活动 + 队友；panel-soft 分块，避免每块独占整页高度。
• 近期比赛列表：左英雄/KDA（弹性占满），右「时长/相对时间」与「胜负/#ID」两列双行紧簇右对齐（上：时长·胜负，下：相对时间·#ID）；禁止再插 1fr 空隙把时长悬在行中；胜负语义色 + 左侧 3px 细边；整行可点。
• 十人详情：返回控件放在比赛摘要卡上方（非卡内）：surface-raised + 细边框 + radius-md，高 36px，左侧 18px SVG 左箭头 +「返回玩家主页」；hover 用 primary 描边/字色。摘要卡仅比赛 ID + 时间 · 时长 · 胜方。天辉/夜魇共享可见列头；昵称列封顶约 16rem（超长截断 + title），勿用弹性列挤占指标；参战/伤害/经济/KDA 四等分占满中间剩余宽度，装备靠右，跨队对齐。胜负始终用 good / danger，不得把天辉/夜魇阵营色混作胜负色。
• 活动热力图：按周分列、星期分行的 7×N 网格，使用绿色四级强度并提供「少—多」图例；标注「最近 180 天样本」。
• 主列宽度用 data（1200）；外层容器须为 1200 内容宽度预留 padding，不得以更小的父级 max-width 截断。900–1200px 保持摘要五列与十人详情横向对比，只在空间确实不足时堆叠。
• 加载：有生涯/近场数据时首屏直出，勿因 TTL stale 再转圈或清空页面；空档案才显示「正在同步」并轮询。软过期只静默再拉 /me（生产 Queue / 本机后台 enrich），禁止 loadKey=null 闪「加载中…」。Cloudflare Worker 在 OpenDota 空/残缺时不得覆盖已有近场/英雄/队友/段位。

导航

• Main tabs：无边框文字 Tab，透明背景；相邻项以低对比斜切细线分隔。未选 muted，hover 仅提亮文字，禁止施加矩形 / 渐变底以免与斜切线冲突；选中使用高对比文字 + 居中 44px、2px 高的 primary 下划线。宽屏点击区高 44px、字号 16px、最小宽 76px，与搜索 / 邮件对齐；lg 断点收敛至 40px / 15px。禁止重新包回连续按钮外框或梯形按钮底。登录后「我」出现在「英雄」前。
• Detail tabs：下划线式，字号 body-md。
• Aside filters（地区 / 机制效果）：竖向 filled；选中 primary 底 + on-accent 字。
• 顶栏邮件：40×40 图标按钮，muted；hover 提亮。放在右侧工具区，不绝对悬浮到视口角。

英雄定位筛选

位于英雄网格和详情面板之间，使用 Valve 选人筛选符号与中文标签的紧凑斜角按钮。 「全部」用中性网格符号；核心 / 辅助 / 推进 / 逃生 / 爆发 / 先手 / 控制 / 耐久使用对应 Valve 图标。支持多选筛选（active）；选中英雄时，其定位以同色选中态（matched） 高亮，不单独在详情区再放 Chip。当前不展示「幻象」筛选，勿与主导航混排。

搜索

高 40px，圆角 md，左侧放大镜；focus 时边框与光晕用 primary。默认宽约 200px，落在首行右侧工具区（非 absolute 贴边）；物品页换物品搜索，其他页隐藏搜索。

面板 / 卡片

共享 .ui-panel：边框 border、背景 panel-soft、圆角 lg、内边距 16px。空态统一 .ui-empty：居中 muted、body-md、上下 48px。

表格

表头 label-sm muted；单元格 body-md；数字 tabular-nums。行 hover 轻微提亮，不加斑马纹。

焦点

所有可交互控件：outline: 2px solid primary; outline-offset: 2px（.ui-focus）。最小点击高度 36–40px。

业务标记（不可通用化）

• 克 / 怕 / 搭 → good / bad / syn
• 直播环与关注按钮 → live
• 装备金价 → gold

Do's and Don'ts

• Do 改视觉前先更新本文件令牌，再改 style.css 变量与引用。
• Do 用命名宽度档位与三档断点；Don't 再加孤立 max-width: Npx。
• Do 每个顶层页提供清晰的页标题语义（可见 h1/h2 或等价 .page-title）。
• Don't 用 font-weight: 650 或非尺度字号（如 13.5px）。
• Don't 把直播粉、胜负红、金价黄当作通用 CTA。
• Don't 为真移动端在现有碎片 @media 上硬撑；门禁解除前保持桌面壳。
• Do 保持英雄底栏固定高与列表页整板滚动两种壳模型，勿发明第三种。
• Don't 在 data-only 刷新里 bump SITE_VERSION；视觉发版才同步 config / export / ?v= 缓存戳。末位用于增量改动；中段留给壳层 / 路由 / 可索引等阶段性成型（见 AGENTS.md）。