vzUit · 美术设计规范
本规范以暗色基底为画布，紫蓝渐变贯穿全局，配合玻璃拟态表面与分层光晕，构建一套可扩展的界面设计 Token 体系。所有 Token 以 CSS 变量集中管理，便于统一换肤与维护。
vzUit v1.0.0
暗色主题
紫蓝渐变 #7c3aed→#4f46e5
玻璃拟态 + 光晕
01
色彩体系 Color
品牌渐变 · 主色阶 · 表面 · 功能色品牌渐变 Brand Gradient
linear-gradient(135deg, #7c3aed, #4f46e5)
主色阶 Primary（紫，1–10）
背景与表面 Surface（暗色）
玻璃层 Glass（白色透明，用于卡片 / 控件）
0.02
0.03
0.04
0.05
0.08
文字色 Text
主文字
rgba(255,255,255,.95)
次文字
rgba(255,255,255,.60)
辅助
rgba(255,255,255,.40)
功能色 Functional
成功 Success
#10b981→#059669
信息 Info
#38bdf8
警告 Warning
#fb923c
错误 Error
#f43f5e
标签类别色 Tag Palette（霓虹）
紫 Purple
#a78bfa
蓝 Blue
#38bdf8
绿 Green
#34d399
粉 Pink
#f472b6
橙 Orange
#fb923c
02
字体排版 Typography
字号阶梯 · 字重38 / H1
界面标题示例
30 / H2
界面标题示例
24 / H3
界面标题示例
20 / H4
界面标题示例
16 / 正文L
正文内容示例，用于重要段落与卡片标题。
14 / 正文
正文内容示例，默认字号，承载大部分界面文本。
12 / 辅助
辅助说明、占位符、表头与次要信息。
字重 Font Weight
Regular 400
常规
Medium 500
中等
Semibold 600
半粗
Bold 700
加粗
03
间距梯度 Spacing
4px 基准 · 组件内/外边距4px · sp-1
8px · sp-2
12px · sp-3
16px · sp-4
24px · sp-5
32px · sp-6
04
圆角 Radius
按组件差异化定义10px
进度/分页
14px
输入框
16px
Toast
24px
卡片
32px
模态框
40px
标签
60px
按钮·胶囊
05
阴影与光晕 Elevation
暗色环境浮起 + 品牌光晕卡片悬停
0 20px 60px rgba(0,0,0,.3)
发光卡片
0 20px 60px rgba(88,60,250,.08)
主按钮
0 8px 24px rgba(124,58,237,.2)
模态框
0 40px 80px rgba(0,0,0,.6)
Toast
0 12px 40px rgba(0,0,0,.4)
06
组件状态 Components
Button · Input · Tag · Seg · Switch · Toast按钮 Button
主按钮
默认
主按钮
悬停
主按钮
点击
主按钮
禁用
次按钮
默认
次按钮
悬停
成功按钮
默认
文字按钮
默认
输入框 Input
请输入内容
默认
请输入内容
悬停
已聚焦状态
聚焦
禁用状态
禁用
格式错误
报错
标签 Tag
默认 Default
默认
紫 Purple
紫
蓝 Blue
蓝
绿 Green
绿
粉 Pink
粉
橙 Orange
橙
分段选项卡 Seg（多选一用它）
三选一
两选一
六选一（换行）
整组锁定
图标开关 Switch（只有开与关用它）
开（带图标）
关（带图标）
开（不带图标）
关（不带图标）
轻提示 Toast（操作结果用它，别自造浮层）
07
图标 Iconography
内置图标集 · 815 个 · 12 类图标来源于本仓库内置图标集（icons/），采用 game-icons 风格的填充圆角造型，单色 currentColor 着色，天然适配暗色主题的层级文字色。下方为使用规范与分类索引。
规范要点
画布 / 网格
24 × 24
风格
Filled · Rounded
着色
currentColor
内边距
内容紧裁 · ~1-2px
命名
kebab-case
总量
815 · 12 类
强制规范 Rules
必须遵循索引选择
使用图标前，必须基于图标索引（icons/ 目录结构 + kebab-case 文件名清单）检索确认目标图标真实存在、名称拼写正确，方可引用。禁止凭记忆、猜测或直接臆写图标文件名。
图标名与视觉形态常常不一致（game-icons 系尤为明显），臆测引用极易选错图标或引用不存在的文件，导致渲染失败。图标索引是选型的唯一依据。
禁止改色与拉伸变形
图标为单色 currentColor 填充，着色须经由父级 color 控制（如 text-1 / text-2 / brand-accent），禁止改写 fill 为固定色值。缩放须等比采用尺寸阶梯（16 / 20 / 24 / 32），禁止单边拉伸或改变宽高比导致形变。
尺寸阶梯 Size
16
20
24 · 基准
32
暗色着色 Color
text-1 主
text-2 次
brand 强调
真实示例（原生内联 SVG）
adjustment
bomb
bitcoin
action-points
分类索引 Categories（12 类 · 815）
1-game 游戏74
2-items 物品54
3-gear 装备67
4-nature 自然68
5-food 食物38
6-buildings 建筑53
7-vehicles 载具57
8-ui 界面100
9-media 媒体89
10-editing 编辑59
11-symbols 符号93
12-misc 其他63