React · 设计基础

Color 色彩

定义品牌色、中性色、语义色和亮暗模式可读性;soft 语义色正文对比度不低于 WCAG AA。

表面层级

页面、容器、控件和悬停状态依次提高层级,避免用不同黑色临时拼接界面。

Surface 0

页面底层

Surface 1

主要内容容器

Surface 2

控件与次级区域

Surface 3

悬停与更高层级

文字层级

默认文字颜色由语义层级决定;彩色文字只用于链接、状态和明确反馈。

主要文字 标题、正文和关键数据
次要文字 说明和辅助信息
弱化文字 元信息与占位提示

语义色

业务只使用语义角色,不直接依赖固定色值;亮暗主题共享同一角色名称。

Primary

关键操作与选中状态

Success

成功与已完成

Warning

风险提醒

Danger

破坏性操作与错误

Info

中性信息反馈

交互状态

默认、悬停和按下必须来自同一色阶,不能通过发光或位移制造状态。

Default Hover Active