品牌色 Brand
活力黄点睛 仅配深字 #1A1A1A(对比 12.26:1 AAA),禁作大背景、禁配白字。主蓝白字 5.56:1(AA),深蓝白字 12.26:1(AAA)。
主蓝·交互刻度
hover
primary-hover
#0A7BD8
pressed
primary-pressed
#005FB0
亮蓝(仅图形/渐变,禁白字)与活力黄刻度
黄hover
accent-hover
#FDE047
黄pressed
accent-pressed
#F5C400
亮蓝 #1FA6F5 白字仅 2.68:1 → 禁作白字底,只用于图形/渐变/聚焦环。活力黄三档均配深字(AAA)。
表面 / 底色 Surface
surface
surface 卡片白
#FFFFFF
muted
surface-muted
#EAF1F8
canvas 与 surface 对比仅 1.08:1 → 卡片必须用 1px 描边或轻阴影与底色区分(硬规则)。
文字 Text
正文主色 #1A1A1A(AAA 17.40:1)
次要文字 #54606C(AA 6.43:1)
占位/最弱 #6B7683(AA 4.62:1,勿用于关键信息)
功能 / 状态色 Feedback
实底白字:成功 4.92 / 警示 AA / 危险 4.83 / 信息 5.56(均 AA)。状态不只靠颜色——须同时配图标+文本。
浅底(徽章/标签/内联提示,配深字)
成功 #DDF2E9
警示 #FBEEDD
危险 #FBE5E3
信息 #E5F0FC
字阶 Typography
8:6score 34 · 计分大比分 tabular
1,024display 24 · 关键数字
标题 Titletitle 18 / 600
正文 Body 台球联盟平台body 15 / 400
次要说明 Captioncaption 13
辅助标签 Labellabel 12
字重:正文 400、标题/数据 500–600。比分/积分/排名/金额/计时一律 tabular-nums。系统字体栈,不依赖网络字体。
阴影 / 层级 Elevation
shadow-1 卡片静止
shadow-2 吸底/浮起
shadow-3 弹层
shadow-4 弹窗
移动端避免重阴影;低层级卡片优先用 1px 描边(H5 低端机更干净)。z 层级:sticky10 / dropdown20 / overlay30 / drawer40 / modal60 / toast80,壳层统一建 stacking context,禁止任意 9999。
触控与安全区
所有可点目标 ≥44×44px,相邻间距 ≥8px
吸底 CTA / 底部 Tab / 半屏弹层必须 padding-bottom: env(safe-area-inset-bottom)。