为专注而设计。
简洁，细腻，实用。
一套面向离线工具、效率应用与轻量管理台的界面语言。借鉴 Apple 平台的克制美学：干净的层级、舒适的留白、系统字体、适度圆角与轻量动效。
熟悉的操作方式。
更少的视觉噪音。
外层工具容器保持直角与微弱阴影；内部操作面板和控件使用柔和圆角。以蓝色作为主要操作提示，状态颜色仅用于明确的反馈。
● 已准备就绪颜色系统
以中性色构建页面层级；强调色只用于关键操作、焦点和选中状态。点击颜色值可复制当前主题下的色值。
排版
间距与形状
4pt 基础网格
使用 4 的倍数组织边距、行距和控件间隔。
两层形状语言
主工具窗口为直角、无描边和轻微阴影；内部区域为圆角。
按钮
语义明确，主次分明
单个区域原则上只有一个主按钮；次要操作使用低对比背景或描边。
表单
文本输入
字段标签置于输入框上方，说明文字置于下方。
选择与开关
控件统一使用原生可访问的表单元素。
状态与反馈
状态标记
确认气泡
适合小范围操作的二次确认，避免频繁使用全屏模态框。
卡片与渐进披露
功能卡片
使用柔和背景与细边框组织模块，不以过度阴影争夺注意力。
▦ 二维码工具
将较少使用的附加功能放在明确的次级模块中。
默认折叠
高级设置与辅助工具默认隐藏，减少主流程的认知负担。
✦ 随机密码生成器
基础交互组件
对话框、菜单、提示层、开关、滑块、标签页。组件可直接操作以观察反馈。
Dialog · Alert Dialog
普通对话框和危险操作确认。
Dropdown · Context Menu
菜单按钮和右键菜单使用相同视觉层级。
Tooltip · Popover · Hover
提示与轻量设置保持低干扰。
Popover 适合展示简短设置、预览和确认，不应承载冗长流程。
Switch · Slider · Toggle
Tabs · Navigation
Accordion · Separator · Label
高级选项（默认折叠）
Separator 表示结构分组，而非装饰。
状态、进度与空页面
Progress · Spinner
Skeleton · Empty
没有匹配结果
试试其他关键词，或清空筛选条件。
Alert · Badge · Toast
禁用与错误状态
文件、导航与工作区
Attachment · File Dropzone
点击选择或拖放本地文件
仅展示文件名和大小，不会上传
Drawer · Sheet
用于配置和详情，避免覆盖主工作流。
Sidebar · Breadcrumb
Resizable · Scroll Area
试着拖动下方区域的右下角调整大小。
JSON / 文本
预览 / 比较
第一行：日志 A
第二行：日志 B
第三行：日志 C
第四行：日志 D
第五行：日志 E
Command · Kbd
快捷命令面板让高频操作可键盘直达。
Combobox · Search Select
数据、选择器与分页
Data Table · Pagination
示例数据可按状态筛选，并逐页浏览。
| 任务 | 类型 | 状态 |
|---|
Radio · Checkbox · Select
Avatar · Marker · Item
日期、图表与内容浏览
Calendar · Date Picker
使用浏览器原生日历，优先保证跨平台交互。
Chart · Data Visualization
Carousel · Content Viewer
Typography · Code · Message
正文采用系统字体；代码与快捷键使用等宽字体。
const mode = 'offline';
const theme = 'system';
工具界面组合模式
转换工具
输入 → 主操作 → 结果 → 复制，保持单列主线，避免四散的辅助功能。
多工具工作台
Sidebar + Tabs + Drawer + Toast。工具多时优先导航，不挤进一个表单。
设计令牌
所有关键颜色通过 CSS 变量管理，支持自动切换主题；将以下片段复制到新工具中即可复用基础视觉风格。
| 令牌 | 用途 | 建议 |
|---|---|---|
--bg | 应用背景 | 清淡灰 / 深黑 |
--surface | 主内容容器 | 不加描边 |
--surface-alt | 输入和内部区块 | 与主容器形成柔和层级 |
--accent | 主操作、焦点 | 仅突出重要路径 |
--border | 细线与内部分隔 | 低对比度 |
--shadow | 外层主窗口 | 低强度、短距离 |
使用原则
01 · 主线优先
页面首屏突出核心任务；次级工具折叠或后置，避免把所有能力一次性展开。
02 · 层级靠留白
优先使用间距、字号和背景区分信息，不叠加粗边框、强阴影或过多装饰。
03 · 状态可感知
按钮提供焦点和禁用样式；异步操作有结果反馈；破坏性动作必须确认。
04 · 兼顾可访问性
按钮有文字标签，表单关联 label，键盘可操作，并尊重系统减少动态效果设置。