Design System · 可复用组件

Components

Buttons

按钮层级

Primary Secondary Ghost

原则: Primary 仅用于“关键转化 / 关键动作”,其余使用 Secondary 或 Ghost。

Status

状态标签

Operational Degraded Outage

原则: 状态要“可读 + 可比较 + 可行动”(能指向处理入口)。

Card & Grid

卡片与网格

卡片用于信息分段、降低认知负担;网格用于维持视觉秩序。

Card A

短信息块。

Card B

短信息块。

Card C

短信息块。

Inputs

表单与输入

Typography

排版原则

大标题负责“方向”,小标题负责“结构”,正文负责“解释”,辅助文字负责“边界/提示”。

H1 讲清一句话价值主张
H2/H3 把系统拆成可理解模块
Body 用 2-3 句解释“为什么可信/怎么工作”
Muted 放限制条件、提示、假设与下一步动作