Fluent Design System

Overview

screenshot	Fluent design light mode.png
screenshot size	270
other names	Fluent UI Microsoft Fluent Design System
author	Microsoft
developer	Microsoft
released	2017
ver layout	stacked
repo	Web: Android: iOS, macOS: Windows: Cross-platform:
programming language	Objective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
operating system	Android, iOS, macOS, Windows, Web browser
platform	ARM, x86-64
replaces	Microsoft Design Language 2 Microsoft UI Fabric‡R1R‡‡R2R‡ Office UI Fabric‡R3R‡‡R4R‡
genre	Design language software
license	MIT License
website	https://developer.microsoft.com/fluentui

Fluent Design System (codenamed "Project Neon")[5] is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language 2 ("Metro") that includes guidelines for the designs and interactions used within software designed for the company's Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale.[6] The new design language includes more prominent use of motion, depth, and translucency effects.[7]

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.[8][9]

Design components

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. With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight.[18] Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing interactability though animations.[18]

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.[15][16]
Reveal focus: Focusable items with a border glow via the focus visual.[17]

Depth

Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering.[19][20] 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.[21]
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.[21]

Motion

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

Add/delete animations: List animations for inserting and removing items from a collection.[23]
Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.[24]
Content transition: Used when only a portion of content on a page will change.[23]
Drill: Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.[25]

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:

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

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

Scale

Apps scale across different form factors and display sizes.[31] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)[32][33]

Fluent Design System

Compared to Metro and Aero

Design components

Light

Depth

Motion

Material

Scale

Iconography

App Icons

Segoe Fluent Icons

Fluent Emojis

Implementation

Influence

See also

External links

References