Fluent Design System (codenamed "Project Neon"),[11] officially unveiled as Microsoft Fluent Design System,[12] is a
design language developed in 2017 by
Microsoft. Fluent Design is a revamp of
Microsoft Design Language (popularly known as "Metro") that includes guidelines for the designs and interactions used within software designed for all
Windows 10 and
Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale.[13] The new design language includes more prominent use of motion, depth, and translucency effects.[14]
The transition to Fluent is a long-term project; aspects of the design started appearing in
Windows 10 beginning with the "Fall Creators Update" released in October 2017, as well as an update to the
Xbox One system software released alongside it.[15][16][17][18] It was later revealed to be designed in conjunction with
Windows 10X,[19] in addition to
Windows 11 which has a similar design.[20]
Compared to Metro and Aero
Fluent's key principles, or "blocks" (Light, Depth, Motion, Material, and Scale), turn away from the flat concept
Metro had defined, and while preserving the clean look and feel Metro introduced, Fluent renews the visuals of
Aero, a design approach that was introduced in
Windows Vista and
Windows 7, including blurred translucency, parallax animated patterns, drop shadows, highlight effects following mouse pointer or input gesture movements, and "faux materials" Metro once discarded.[21]
The purpose of light is to draw attention and illuminate information. Therefore, light establishes a relationship between the UI and the cursor or pointer.[22]
Reveal highlight: Upon hovering, the reveal highlight illuminates nearby hidden borders on objects such as
hamburger navigation menu lists and buttons. Upon selection, such as by clicking or tapping, a white circular illumination effect quickly appears.[22][23]
Reveal focus: Focusable items with a border glow via the focus visual.[24]
With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight.[25] Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing intractability though animations.[25]
Depth
Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering.[26][27] This is especially apparent in the redesigned Office app in 2019. In Windows 11, the use of depth is expanded by overlapping different surfaces with different opacities of the Mica material.
Layering: Layering divides an app into the base which is the "canvas" and the content which floats on top. The content can be presented as a continuous surface or as a card.[28]
Elevation: Elevation is the use of separating elements from the app surface through the use of shadows. Examples include
context menus, pop-ups or
tooltips.[28]
Motion
Motion establishes a relationship between UI elements and provides a continuity in the experience.[29]
Add/delete animations: List animations for inserting and removing items from a collection.[30]
Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.[31]
Content transition: Used when only a portion of content on a page will change.[30]
Drill: Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.[32]
Fade: fade -in and fade-out to bring items into and dismiss them from view.[30]
Parallax: Parallax moves objects at different rates. The background moves slower than the content above it. For example, a list will scroll faster than the background image, creating a depth effect in addition to motion.[33]
Press feedback: When an item is pressed, it momentarily recedes into the background and then returns to its original position. Examples of press feedback include the
Start menu live tiles,
Action Center quick actions, and
Microsoft Edgeaddress bar buttons.[34]
Material
Material
Acrylic
Mica
Smoke
The different materials used in Fluent Design
Materials are visual effects applied to UX surfaces. In fluent design there are two main kinds of materials: occluding and transparent. Occluding materials, such as acrylic and mica, form the base layers under interactive UI elements. Transparent materials like smoke are used to emphasize immersive surfaces:[35]
Acrylic: The acrylic material creates a translucent, blurred effect with a slight noise effect. While in Windows 10, Acrylic was used in large surfaces (such as side panels). With Windows 11, primary surfaces have abandoned Acrylic in favor of Mica. Instead, Acrylic is used in transient surfaces such as
context menus,
tooltips or predictions in
search boxes.
Mica: Mica is a new opaque material introduced in Windows 11 that takes on the tint of the user's wallpaper.[36] Unlike acrylic, which was designed for transient surfaces (e.g., context menus), MMC is designed for use on long-lasting primary surfaces. By using different opacities, apps can create a visual hierarchy.
Smoke: Smoke was introduced with Windows 11. It is a translucent black background, regardless of light or dark mode, in order to create a hierarchy between the main window and a pop-up.[35]
Both Acrylic and Mica are disabled in a specific window when the app is no longer selected. Furthermore, both are disabled system-wide when transparency is disabled, when battery saver mode is enabled, or on low-end hardware. Background Acrylic is disabled when a window is deselected or in
Windows 10 Mobile,
HoloLens, or tablet mode.[37]
Scale
Apps scale across different
form factors,
display sizes, and
0D to
3D. Elements adapt to their screen size and are available across multiple dimensions.[38][39] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)[40][41]
Iconography
App Icons
New icons with acrylic materials have been created for Microsoft programs, starting with the
Office apps and the
Chromium-based
Microsoft Edge in 2018 and 2019, respectively.[42][43][44] Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video,[45] before more were spotted when Windows 10X was unveiled,[46] prior to being officially revealed on December 12, 2019.[47] These icons started appearing through
Microsoft Store updates to those apps, beginning with
Mail and
Calendar.[48][49]
Segoe Fluent Icons
MDL2
Fluent
Segoe Fluent Icons is a set of icons designed by Microsoft for use in its products and services alongside the redesign of the
Segoe UI font (Segoe UI Variable).[50] The icons are rounded departing from the angular and straight Segoe MDL2 icons which were predominant during the "Metro" era.[51]
Fluent Emojis
Fluent
On July 15, 2021, Microsoft announced a complete redesign of its
emoji library in order to align with its Fluent Design.[52] Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji
open source on August 10, 2022.[53][54] These new Fluent emojis depart from the flat and outlined style of the previous emoji library used in Windows 10 and instead embrace a 3d
Play-Doh feel.[52] Furthermore, Microsoft has stated their plans to animate most of them.[55] While the 3d animated emojis can be seen in apps such as
Microsoft Teams and
Skype, Windows 11 uses flat variants.
Implementation
Fluent design guidelines are cross-platform and can be implemented with different frameworks.[56] Fluent UI React is a set of
React components that implement Microsoft's Fluent Design System. It provides a set of pre-built components that can be used to build applications for
Windows,
iOS,
Android,
macOS and the
web. Furthermore,
WinUI is a native
user interface framework for building Windows apps. It is built on top of Fluent Design System and provides a set of pre-built controls.[57]
WinUI 2 is a library of controls and styles for building modern Windows apps. It is available for use in any UWP app and offers exciting, flexible, modern controls such as NavigationView and TeachingTip.[11]
WinUI 3 is the next generation of the WinUI framework. It ships with the Windows App SDK. WinUI 3 expands WinUI into a full UX framework and provides a unified set of APIs and tools.[12]
Fluent UI React v9 is the latest stable release of Fluent UI React and offers a collection of utilities, React components, and web components for building web applications.[58] Fluent UI React v9 tries to streamline itself to its
WinUI counterpart.[59]
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.[60][61]