Light }} The purpose of light is to draw attention and illuminate information. Therefore, light establishes a relationship between the UI and the cursor or pointer. •
Reveal focus: Focusable items with a border glow via the focus visual. With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight. Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing interactability though animations. 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. •
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. •
Add/delete animations: List animations for inserting and removing items from a collection. •
Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app. •
Content transition: Used when only a portion of content on a page will change. •
Fade: Fade-in and fade-out to bring items into and dismiss them from view. •
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 Edge address bar buttons.
Material }} 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: 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. 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.
Scale Apps scale across different
form factors and
display sizes. Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation) == Iconography ==