UDID

Design System · Expanded

UI Kit.

Monochrome, square corners, no cards. Motion, controls, and mechanisms—still toolbox-native.

Design spec
Scroll Reveal Cmd+K Theme Override Reduced Motion

01 / Principles

Design principles

  • Monochrome — black, white, gray only
  • No cards — hairline dividers, no rounded floats
  • System theme — follow OS; optional override
  • Motion — entrance, reveal, shimmer, magnetic
  • Accessible — honor prefers-reduced-motion

02 / Tokens

Color tokens

--bgBackground
--fgForeground
--mutedMuted
--dimHover
--glowGlow
--lineLine
Controls
0
Motions
0
Mechanisms
0

03 / Theme

Theme override

Follows the system by default; temporarily force light/dark (localStorage).

Callout

Product pages should stay on System; this override is for demos and design debugging.

04 / Buttons

Buttons & magnetic

View mechanisms
Badge Solid Esc ⌘K

05 / New Controls

New controls

042%100
1

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

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

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

UD
UDID Toolboxdesign@ovox.ink

06 / Forms

Classic forms

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

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

07 / Content

Content structure

Feature

编号网格，无卡片底。

Steps

流程步骤用细线分隔。

Timeline

纵向时间线如下。

2024

建立单色语言

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

2025

工具矩阵

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

Now

UI Kit 扩展

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

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

Empty State

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

08 / Feedback

Feedback & results

Orbit

Spin

Success

View A

模糊位移过渡 A

SPA 手感，无硬刷新。

View B

模糊位移过渡 B

.view / .is-leaving

UDID
00008030-001A28E21E88002E

09 / Ticker & Hazard

Scrolling type & hazard tape

Marquee styles cover display type, rails, blocks, outline, sheen, dual tracks, stepped updates, and full bleed. Hazard components share one stripe, code, and information hierarchy.

Display · Large type

Rail · Slash · Invert

Blocks · Outline · Sheen

Duel stack · Opposite directions

Vertical crawl

Step ticker

Bleed · Full width

Hazard tape

A restrained monochrome industrial signal: stripes identify state while copy stays quiet and readable. Use for risky actions, unsigned profiles, or temporary processing.

Writing certificate Do not close this page or disconnect.
01
Profile unsigned Install may show “Not Verified”—that is expected.
02
Edge caution

A slim striped edge establishes warning context while leaving a quiet field for longer risk copy.

Caution

Temp files are deleted after processing. Do not upload unrelated private material; confirm twice for irreversible steps.

Danger Temp only No persist

10 / Motion

Motion catalog

NameUse
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

New 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

Accordion

extras.css is additive and does not affect pages that do not use the new classes. The main site can opt in.

Keeps an infrastructure feel and consistency across tools; errors use restrained red-gray only.

See DESIGN.md.