Microsoft · Design system breakdown
Microsoft's cross-platform design language, finally consolidated.
Microsoft has had several design languages over the years (Metro, Fluent v1, Office Fabric). Fluent 2 (2023+) is the consolidation: one design language, design tokens, and a coordinated set of platform implementations covering Web, Windows, iOS, Android, and macOS.
Microsoft design org owns the canonical Fluent 2 spec. Web implementation ships as `@fluentui/react-components` (v9, the Fluent 2 line). Earlier `@fluentui/react` (v8) is maintained but the design language has shifted; mixing is messy.
| Token | Value | Role |
|---|---|---|
| colorBrandBackground | #0f6cbd | Microsoft brand action |
| colorNeutralBackground1 | #ffffff | Default surface (light) |
| colorNeutralForeground1 | #242424 | Default text |
| spacingHorizontalM | 12px | Medium horizontal spacing |
| borderRadiusMedium | 4px | Default radius |
| durationFast | 150ms | Standard transition |
Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
If you're evaluating this system
Pick Fluent if you're building inside the Microsoft ecosystem (Office add-ins, Teams apps, Power Platform, Windows). For everything else, Fluent is more useful as a reference for cross-platform token discipline than as an off-the-shelf component library.
Compare more systems