UniID Design System
用于验收 primitives、视觉 surface、表单状态、浮层、数据展示和反馈组件。页面本身也作为 UI 质感基线。
Foundation
Color tokens
浅色使用暖中性色，深色使用低对比冷中性色；accent 只作为轻量强调。
Light · warm neutrals
cream
sand
ink
accent
success
warning
danger
Dark · low contrast cool neutrals
slate
accent
success
warning
danger
Surface
Surface utilities
新增的语义表层，给页面、卡片、浮层和 CTA 提供一致质感。
surface-subtle
低对比暖色渐变，适合 hero 和大块说明区域。
surface-elevated
实底、轻光影、细边框，适合控制台卡片。
surface-glass
半透明毛玻璃，适合顶栏、浮层和轻量面板。
Actions
Buttons
按钮需要明确高度、内边距、hover/focus 和 disabled 状态，不再出现贴边文字按钮。
Forms
Inputs
输入类组件统一使用毛玻璃实底、清晰 focus ring、错误态和禁用态。
Field 统一 label、help 和错误提示。
请选择可用状态。
Select disabled 态保持一致表层。
该字段格式不正确。
Textarea 继承相同 focus、disabled 和 invalid 状态。
disabled 态不可聚焦提交。
Select
Select menus
下拉列表同时支持快速 options 模型和 Root/Trigger/Content/Item 组合模型，hover、focus、图标和文字尺寸与菜单组件统一。
适合需要分组、分隔线、禁用项的复杂选择。
适合表单筛选和简单设置项。
菜单项使用统一的 min-h-9、text-sm 和 size-4 图标规范。
Status
Badges & Callouts
轻量状态标签和信息块用于后台页面的提示、风险和保存反馈。
结构化提示
适合说明规则、版本策略和编辑边界。
操作成功
用于保存、激活、同步等成功反馈。
需要确认
用于草稿切换 active 前的风险提示。
危险操作
用于删除、撤销、禁用等不可逆操作。
Layout
Cards
卡片已经接入 elevated surface，保持清晰层级和稳定的内容密度。
my-blog-site
blog.example.com · 12 条记录
session
当前会话
Overlay
Dialog · Dropdown · Tooltip
浮层统一使用 rounded-2xl、轻毛玻璃和柔和阴影。
Controls
Tabs · Switch · Checkbox · Loading
小控件也需要拥有完整尺寸和状态，不依赖浏览器默认外观。
Data
Table & CodeBlock
后台列表和 Schema JSON 预览用统一展示组件承载。
| 资源 | 状态 | 更新时间 | 记录数 |
|---|---|---|---|
| posts | active | 2026/05/25 18:20 | 128 |
| profiles | draft | 2026/05/25 17:04 | 42 |
| 合计 | 170 | ||
JSON Schema
json
{
"type": "object",
"required": [
"title",
"status"
],
"properties": {
"title": {
"type": "string",
"minLength": 2
},
"status": {
"type": "string",
"enum": [
"draft",
"published"
]
},
"createdAt": {
"type": "integer"
}
},
"additionalProperties": false
}