Microsoft Fluent

Fluent 2.0 · Windows 设计语言 · 2026.02.16

60+
Components
40+
Tokens
4
Breakpoints
Design Tokens

Fluent 2.0 引入新式设计语言，蓝色强调 + 亚克力材质效果。

:root {
  --fluent-color-brand: #0078D4;
  --fluent-color-success: #107C10;
  --fluent-color-warning: #CA5010;
  --fluent-color-danger: #E81123;
}
#007
#00B
#876
#CA5
#107
#E81
Responsive Grid

四档断点系统：小型 / 中型 / 大型 / X-Large。

$fluent-breakpoint-sm: 320px;
$fluent-breakpoint-md: 480px;
$fluent-breakpoint-lg: 640px;
Acrylic
Mica
Typography
  • Font: Segoe UI Variable — Win 11 定制
  • Mono: Cascadia Code
  • Scale: 12/14/16/18/20/24/28/32/40px
  • Effect: 亚克力 / 云母材质
The Formula

Fluent = Light × Depth × Motion × Scale

流畅 = 光 × 深度 × 动效 × 规模