UX Encyclopedia

Microsoft Fluent 2 — Working Summary

Live source of truth: fluent2.microsoft.design (living document), plus Windows 11 design docs (learn.microsoft.com/windows/apps/design). Fluent spans Windows, Microsoft 365 web/desktop apps, and cross-platform components (Fluent UI React v9 is the flagship web implementation).

History & current state (mid-2026)

Fluent Design System announced 2017 around five sensory concepts — light, depth, motion, material, scale — evolving from Metro's (2010) typography-first flat language. Fluent 2 (2023) reframed the system around practical tokens and components for product teams. As of mid-2026 Fluent 2 remains current — no "Fluent 3" and no 2025-style dramatic visual reboot to match Apple's Liquid Glass or Google's M3 Expressive; Microsoft's visible design investment has gone into Copilot/AI experiences instead (dedicated Fluent UI Copilot component packages — @fluentui-copilot on npm — for chat, prompt, and AI-response surfaces). Web guidance covers React and Web Components; iOS/Android/Windows sections exist with varying depth. The older Fluent UI React Northstar (Teams) library reached end of life July 2025, consolidating on v9.

Key specifics

  • Type: Segoe UI Variable (Windows) with a defined type ramp (Caption → Body → Subtitle → Title → Display); web ramp in Fluent UI.
  • Materials: Mica (subtle, desktop-background-tinted, for app chrome) and Acrylic (translucent blur, for transient surfaces like flyouts) — Windows 11's signature layered look, unchanged as the material vocabulary through the 24H2/25H2 era.
  • Geometry: rounded corners as a Windows 11 hallmark (window and control rounding); 4 px spacing base grid with a defined spacing ramp.
  • Design tokens: Fluent 2 is aggressively token-driven (global → alias tokens for color/type/spacing/shadow), theme-able light/dark/ high-contrast — high-contrast support is a Microsoft accessibility signature.
  • Interaction: keyboard-first completeness expected (Windows conventions: access keys, arrow-key navigation patterns); Reveal-style focus/hover lighting historically; density options (comfortable/compact) for productivity surfaces.
  • Motion: purposeful and quick; connected animations between views; respects reduced-motion.

Character in one line

Productivity-grade pragmatism: calm layered materials, tight spacing ramp, deep keyboard & accessibility support — built for long working sessions and enterprise consistency, now with a growing AI/Copilot pattern layer.

Sources

↑↓ to navigate · Enter to open · Esc to close