UDID

Design System · Expanded

UI Kit.

单色、直角、无卡片。本页新增动效、控件与交互机制，仍保持工具箱气质。

设计规范
Scroll Reveal Cmd+K Theme Override Reduced Motion

01 / Principles

设计原则

  • 单色 — 仅黑白灰
  • 无卡片 — 细线分隔，无圆角浮层
  • 系统主题 — 默认同系统；可选覆盖
  • Motion — 入场、滚动显现、扫光、磁吸
  • 可访问 — 尊重 prefers-reduced-motion

02 / Tokens

颜色令牌

--bg背景
--fg主色
--muted次要
--dimHover
--glow轻底
--line线
控件数
0
动效
0
机制
0

03 / Theme

主题覆盖

默认跟随系统；可临时强制浅色 / 深色（写入 localStorage）。

Callout

工具产品页建议仍默认 System；此覆盖能力适合演示与设计调试。

04 / Buttons

按钮与磁吸

查看机制
Badge Solid Esc ⌘K

05 / New Controls

新控件

042%100
1

下划线 Tabs，切换带 rise 入场。

详见 DESIGN.md 令牌与禁止项。

命令面板、主题、滚动显现等机制见下方。

UD
UDID Toolboxdesign@ovox.ink

06 / Forms

经典表单

格式错误：仅限字母、数字、点或横杠

点击或拖拽上传
filled / drag 状态

07 / Content

内容结构

Feature

编号网格，无卡片底。

Steps

流程步骤用细线分隔。

Timeline

纵向时间线如下。

2024

建立单色语言

UDID 主站定调黑白与视图动效。

2025

工具矩阵

P12、签名、Plist 共用同一套控件。

Now

UI Kit 扩展

命令面板、主题、滚动显现与新控件。

:root {
  --bg: #050505;
  --fg: #f4f4f4;
}

Empty State

无数据时的中性占位，可配 Primary CTA。

08 / Feedback

反馈与结果

Orbit

Spin

Success

View A

模糊位移过渡 A

SPA 手感，无硬刷新。

View B

模糊位移过渡 B

.view / .is-leaving

UDID
00008030-001A28E21E88002E

09 / Ticker & Hazard

滚动文字与警戒线

跑马灯包含大字、轨道、色块、描边、扫光、双轨、步进与通栏样式。警戒组件采用统一的细斜纹、编号和信息层级。

Display · Large type

Rail · Slash · Invert

Blocks · Outline · Sheen

Duel stack · Opposite directions

Vertical crawl

Step ticker

Bleed · Full width

Hazard · 警戒线

克制的单色工业标识：斜纹只承担状态识别，文字保持安静清晰。适用于危险操作、未签名配置或临时处理提示。

正在写入证书 请勿关闭页面或断开连接。
01
描述文件未签名 安装时可能提示「未验证」，属预期行为。
02
边缘警示

顶部细斜纹建立警戒语义，正文区域保持留白，适合较长的风险说明。

Caution

临时文件处理后立即删除。请勿上传含无关隐私的材料；操作不可撤销时请二次确认。

Danger Temp only No persist

10 / Motion

动效一览

名称用途
rise / reveal入场 · 滚动显现 + 去模糊
shimmer骨架屏扫光
marquee + variantsDisplay / rail / slash / blocks / outline / sheen / duel / bleed
ticker-step步进新闻条
hazard-tape低频文字轨道 · 主警戒 / 次级状态
hazard-frame / bar / badge细斜纹边缘与分级警示
typewriter标题打字机
count-up数字滚动
btn-magnetic指针磁吸位移
split-link链接文字上下翻
viewIn/Out视图切换
indeterminate不确定进度条
prefers-reduced-motion减弱动效

11 / Mechanisms

新机制

命令面板

⌘K / Ctrl+K，键盘上下选择，Enter 执行。

滚动进度

顶部 2px 进度条跟随阅读位置。

目录 Spy

IntersectionObserver 高亮当前章节。

主题覆盖

System / Light / Dark + localStorage。

Modal

遮罩与 blur 同步过渡 + 面板位移，Esc 关闭。

滚动显现

.reveal 进入视口后去模糊上移。

接入方式

新工具引入 base.css + 按需 forms.css / extras.css，机制脚本可参考 kit.js 拆出公共模块。

12 / FAQ

手风琴

extras.css 为增量样式，默认不影响未使用新 class 的页面。主站可按需引入。

保持基础设施感与跨工具统一；错误态仅用克制的红灰提示。

见 DESIGN.md。