Fluent 2 Design System

Fluent 2 是微软的跨产品设计系统。官网当前从 Color、Elevation、Iconography、Layout、Material、Motion、Shapes 和 Typography 解释设计语言，并提供 Accessibility、Content design、Design tokens、Responsible AI 与 Web React 组件文档。它适合生产力工具和微软生态，也能作为其他复杂应用的系统参考。

设计语言先回答产品语境

Fluent 的层级、材质和动效围绕清楚、平静和高效任务建立。采用前确认产品是桌面生产力、协作工具、管理后台还是消费应用；相同的导航密度、阴影和材质在不同场景中并不等价，不能只复制微软产品外观。

Token 连接设计和 React 实现

Web React 组件按任务组合

官网组件覆盖 Accordion、Combobox、Dialog、Drawer、Field、Menu、Message Bar、Nav、Toast、Tree 等常见企业场景。选择时先确认语义与任务，而非外观；Field 负责标签和错误关系，Combobox 负责可搜索选择，Menu 不应替代普通导航。

内容设计属于组件 API

按钮动词、错误信息、空状态和等待提示直接影响任务完成。为危险操作写清对象与结果，为错误说明原因和恢复步骤，为 AI 结果标明生成、来源和不确定性。组件文案应进入设计系统示例，不能留到开发最后随意填写。

无障碍覆盖视觉之外

• 键盘顺序、焦点环与关闭后焦点返回；
• 高对比模式下图标、边框和状态；
• 200% 缩放与长文本布局；
• 颜色之外的错误和选中提示；
• 减少动态和屏幕阅读器朗读。

跨微软产品也要保留品牌边界

Fluent 语言能帮助与 Windows、Microsoft 365 等环境保持熟悉感，但第三方产品不应误用微软商标、专有图标或让用户误以为官方关联。基于 token 建立自己的品牌主题，并核对图标、字体和素材许可。

负责任 AI 指南进入产品流程

官网单列 Responsible AI 与 AI harm 内容，说明 AI 体验不只是一组新组件。设计时考虑告知、控制、纠错、隐私、偏差和潜在伤害，为生成结果提供反馈与撤销；上线前让产品、设计、工程、法务和安全共同审查。