COMPONENT LIBRARY / 03
组件，是设计的共同语言
十组组件覆盖 Kit 的全部样式。每个样本都用真实令牌值，可直接复制使用。
carve deep raise well
按钮、徽章与头像
01 / ACTIONS RUNNING COMPLETED QUEUED FAILED v1.0.0
vendor REF-9021 Q3-2026
NW SC AM SC JL +3
文本输入
02 / INPUTS 用于接收任务通知。
请输入完整邮箱地址。
选择器与文本域
02 / SELECT 0 / 300
复选与单选
03 / CONTROLS开关与滑块
03 / SWITCH连续进度与圆环
04 / PROGRESS68%
分段进度
04 / STEPS已完成段中性灰，当前段强调橙并带辉光。
统计、表格、上下文与日志
05 / DATA 已处理邮件
1,284
↗ 12.4%
平均耗时
1.2s
↘ 8.1%
成功率
98.7%
↗ 0.6%
待复核
02
需要关注
| 引用 | 供应商 | 金额 | 状态 |
|---|---|---|---|
| REF-9021 | Northwind Components | $48,200.00 | 运行中 |
| REF-9020 | Helios Metalworks | $12,940.50 | 已完成 |
| REF-9019 | Kestrel Logistics | $3,180.00 | 排队中 |
| REF-9018 | Atlas Fasteners | $27,600.00 | 失败 |
CONTEXT REF-9021
Vendor Quote Request — Q3 quote_v3_final.pdf · 2.4 MB 14:02:15 ✓ Email parsed successfully.
14:02:17 → Extracting quote data…
14:02:18 → Validating vendor pricing structure…
14:02:19 ! Missing unit price on line 4.
14:02:21 × Vendor endpoint timeout.
排版样张
06 / TYPE SPECIMEN标题一 · Display
导语段落。更大的字号与更亮的文字颜色，用于概括整节内容。
正文段落保持舒适的行距与对比度，让阅读在暗色表面上自然发生。
标题二 · Section
二级标题用于分节，标题下方带一道短刻线。
标题三 · Subsection
- 无序列表项，标记点使用暖橙并带辉光
- 列表项之间保持稳定的垂直节奏
标题四 · Detail
- 有序列表项，编号使用等宽字体
- 用于表达流程与先后顺序
引用块沉入浅井，左侧凿出一道暖橙刻槽。用于强调结论或待确认事项。
行内元素：加粗、斜体、下划线、删除线、
inline code、标记文本，以及链接。
FIGURE / QUOTE-V3
消息提示
07 / ALERTS 报价核验完成
14 个条目已匹配。
需要人工复核
第 4 行单价缺失。
连接超时
请稍后重试。
中性提示
不带语义色时的默认状态。
空状态 / 骨架 / 加载
07 / FEEDBACK Processing batch…
面包屑与分段
08 / NAVIGATION分页
08 / PAGER page-btn 30 × 30
active bg #b8511f（暗橙）
active ink #14100e
卡片与可选高光
09 / SURFACES默认卡片不带顶部镜面高光（保持克制）。
sheen 变体
可选添加 class="sheen" 后启用顶部镜面渐变。
代码块
09 / CODE/* Ember 材质令牌 —— 结构由明暗承担 */
--carve: inset 0 2px 5px rgb(0 0 0 / .9);
--deep: inset 0 8px 20px rgb(0 0 0 / .9);
--raise: 0 1px 2px + inset highlight;
--well: inset 0 1px 3px rgb(0 0 0 / .5);
--hair: 0 1px 0 rgb(255 255 255 / .05);
--glow: 0 0 12px rgb(217 95 39 / .55);色彩令牌
10 / COLOR PALETTE 背景 --bg
卡片 --card
深雕面板 --panel
输入凹槽 --field