Fluent Design System

The purpose of light is to draw attention and illuminate information. 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.[11] Additionally, in the Windows Holographic environment, a rounded white pointer exists.

On 6 November 2017, Microsoft Employee David Haz stated that plans to apply the reveal highlight to the taskbar exist—but as of July 2019, it has not occurred.[12]

Focusable items with border glow via the focus visual.[13]

The addition of depth utilizes the z-axis and allows for content differentiation via layering. Depth is presented via drop shadows and Z-depth layering.[14][15] This is especially apparent in the redesigned Office app in 2019.

Motion establishes a relationship between UI elements and provides a continuity in experience.[16]

List animations for inserting and removing items from a collection.[17]

Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.[18]

Used when only a portion of content on a page will change.[19]

Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.[20]

Fade-in and fade-out to bring into and dismiss items from view.[21]

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.[22]

When an item is pressed, it momentarily recedes into the background and then restores to its original position. Examples of press feedback include the Start menu live tiles, Action Center quick actions, and Microsoft Edge address bar buttons.[23]

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.[24][25] Preliminary versions of the final icons were spotted in the "Meet the New icons for Office 365," video,[26] before more were spotted when Windows 10X was unveiled,[27] prior to being officially revealed on December 12, 2019.[28] These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.[29][30]

The Acrylic material creates a translucent, blurred effect with a slight noise effect. A visual hierarchy can be created by using different opacities. For example, in an app, primary content surfaces are often opaque (with the exception of widgets or lightweight apps such as Calculator), a secondary pane can have 80% background Acrylic, and the tertiary pane can have 60% background Acrylic. Background Acrylic blurs all items behind the active Acrylic material. In-app Acrylic blurs content within the app.

Acrylic is disabled in a specific window when the app is no longer selected. Both types of Acrylic 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 de-selected or on Windows 10 Mobile, HoloLens, or tablet mode.[31]

Apps scale across different form factors, display sizes, and 0D to 3D. Elements adapt to their screen size and are available across multiple dimensions.[32][33] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)[34][35]

• Spatial sound[36]