vzUit · VZService 设计系统

vzUit 是 VZService 自研的 Web UI 设计规范与组件库，默认深色主题，紫蓝渐变品牌色贯穿全局，配合玻璃拟态表面与霓虹光晕。本仓库包含两部分：

• index.html — v1.0.0 组件库演示页（按钮 / 表单 / 标签 / 模态 / 评分 / 时间线等，含交互示例）
• design-system.html — 美术设计规范文档（设计 Token 全景：色彩 / 字体 / 间距 / 圆角 / 阴影 / 组件状态 / 图标规范），所有数值以 CSS 变量集中管理，改一处全页联动

设计 Token

色彩

• 基底：#080b14（深邃暗色画布）
• 品牌渐变：linear-gradient(135deg, #7c3aed, #4f46e5)，交互紫 #a78bfa
• 表面：玻璃拟态层（white-alpha 0.02 ~ 0.08）+ 暗色抽屉 / 模态 / 表面色阶
• 阴影：品牌光晕 rgba(88,60,250,.08) + 深色浮起，主按钮带紫色辉光
• 功能色：成功 / 警告 / 错误 / 信息；错误色仓库未显式定义，规范补充 #f43f5e（rose）

字体

• 组件字体栈：Inter / system-ui（正文、组件与标题文本）
• 注：官网（CF_vzs）展示字体为得意黑 SmileySans，属官网层，非 vzUit 组件库正文

间距

• 4px 基准梯度：4 / 8 / 12 / 16 / 24 / 32

圆角

• 按钮 60（胶囊）/ 卡片 24 / 模态 32 / 标签 40 / 输入 14

阴影层级

• 低 / 中 / 高 三层，均以品牌光晕为底

组件状态规范

按钮（主 / 次 / 虚线 / 文字 / 链接 × 默认 / 悬停 / 点击 / 禁用）、输入框（默认 / 悬停 / 聚焦 / 禁用 / 报错）、标签（五色）。完整样例见 design-system.html。

图标规范 Iconography

• 来源：CF_vzs 内置图标集 xens/icons，815 个 SVG／12 类
• 画布 24×24，填充圆角（game-icons 系），单色 currentColor 着色，kebab-case 命名
• 尺寸阶梯：16 / 20 / 24（基准）/ 32

强制规范 Rules

1. 必须遵循索引选择：使用图标前，必须基于图标索引（xens/icons 目录结构 + kebab-case 文件名清单）检索确认图标真实存在且文件名正确，禁止凭记忆或臆测直接写图标文件名。图标名与视觉形态常不一致，臆测引用易选错或引用不存在的文件。
2. 禁止改色与拉伸变形：图标为单色 currentColor，着色须经由父级 color 控制（如 text-1 / text-2 / brand-accent），禁止改写 fill 为固定色值；缩放须等比采用尺寸阶梯，禁止单边拉伸或改变宽高比。

快速开始

• 直接引入：复制 index.html 中的 <style> 与 <script> 到项目。
• 按需使用：仅提取所需组件样式。
• 定制：修改 :root 中的 CSS 变量（主题色 / 间距 / 圆角）即可整体换肤。

许可与品牌限制

• 本设计系统遵循 MIT 许可证（Copyright © 2026 VZService），允许自由使用、修改和分发。
• 特别声明：若用于非 VZService 项目，请勿在界面中使用「VZService」品牌标志、名称或相关商标。可保留「vzUit」名称作为设计系统引用，不代表官方认可。

贡献

由 VZService 维护。Issue / PR 至 GitHub 仓库。

版本

• v1.0.0（2026-07-04）初始版本：完整组件库、交互示例、响应式布局、深色主题
• 美术设计规范（design-system.html）补充于 2026-08-11