Fluent Design System

{{Short description|Design system created by Microsoft in 2017}} {{primary sources|date=March 2019}}   {{Infobox software | name = Fluent Design System | logo = | logo caption = | logo alt = | logo size = 36 | collapsible =  | screenshot = 250px | screenshot size = 270 | screenshot alt = | caption = The notepad and calculator application in Windows 11 | other_names = {{Plainlist| * Fluent UI * Microsoft Fluent Design System }} | author = Microsoft | developer = Microsoft | released = {{Start date and age|2017}} {{collapsed infobox section begin|Release(s)|titlestyle=background-color:#eee}} | ver layout = stacked | discontinued =  | repo = {{Plainlist| * '''Web''': {{GitHub|https://github.com/microsoft/fluentui|link=hidden}} * '''Android''': {{GitHub|https://github.com/microsoft/fluentui-android|link=hidden}} * '''iOS, macOS''': {{GitHub|https://github.com/microsoft/fluentui-apple|link=hidden}} * '''Windows''': {{GitHub|https://github.com/microsoft/microsoft-ui-xaml|link=hidden}} * '''Cross-platform''': {{GitHub|https://github.com/microsoft/fluentui-react-native|link=hidden}} }} {{collapsed infobox section end}} {{collapsed infobox section begin|More Information|titlestyle=background-color:#eee}} | qid = | programming language = Objective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript | middleware = | engine =  | operating system = Android, iOS, macOS, Windows, Web browser | platform = ARM, x86-64 | included with = | replaces = {{Plainlist| * Microsoft Design Language 2 * Microsoft UI Fabric<ref name="ui-fabric">{{Cite web|url=https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/|title=UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog|author=Microsoft 365 Team|date=2020-03-12|access-date=2021-03-16|website=Microsoft 365 Developer Blog}}</ref><ref name="ui-fabric-st-times">{{Cite web|url=https://sdtimes.com/msft/microsoft-transforms-ui-fabric-to-fluent-ui/|title=Microsoft transforms UI Fabric to Fluent UI - SD Times|last=Lewkowicz|first=Jakub|date=2020-03-16|access-date=2021-03-16|website=ST Times}}</ref> * Office UI Fabric<ref name="office-ui-fabric-blog">{{Cite web|url=https://www.microsoft.com/en-us/microsoft-365/blog/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/|title=Introducing Office UI Fabric—your key to designing add-ins for Office - Microsoft 365 Blog|author=Office Dev|date=2015-08-15|access-date=2021-03-16|website=Microsoft 365 Blog}}</ref><ref name="office-ui-fabric-zdnet">{{Cite web|url=https://www.zdnet.com/article/microsofts-big-fluent-design-push-web-developers-get-a-new-office-ui-fabric/|title=Microsoft's big Fluent design push: Web developers get a new Office UI Fabric|last=Tung|first=Liam|date=2020-03-16|access-date=2021-03-16|website=ZDNet}}</ref> }} | replaced_by = | service_name = | size = | standard = | language = | language count =  | language footnote = | genre = Design language software | license = MIT License | website = {{URL|https://developer.microsoft.com/fluentui}} | AsOf = }} {{collapsed infobox section end}}

'''Fluent Design System''' (codenamed "'''Project Neon'''")<ref name=":5">{{Cite web|url=https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features|title=Fluent Design is Microsoft's new modern UI for Windows and more|date=2017-05-11|website=The Verge|access-date=2017-05-11}}</ref> 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.<ref name=":7">{{Cite web|url=http://fluent.microsoft.com|title=Fluent Design Language|website=Microsoft|access-date=2017-05-12}}</ref> The new design language includes more prominent use of motion, depth, and translucency effects.<ref name="ars-fluentdesign">{{cite web|title=New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"|url=https://arstechnica.com/information-technology/2017/05/new-windows-look-and-feel-neon-is-officially-the-microsoft-fluent-design-system/|website=Ars Technica|date=11 May 2017|accessdate=11 May 2017}}</ref>

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.<ref>{{Cite news|url=https://www.theverge.com/2017/10/16/16481202/microsoft-windows-10-fall-creators-update-fluent-design|title=Microsoft shows off its Fluent Design changes to Windows 10|work=The Verge|access-date=2017-10-29}}</ref><ref>{{Cite news|url=https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/|title=Microsoft's Fluent Design System threatens to make Windows look good|work=Ars Technica|access-date=2017-10-29|language=en-us}}</ref><ref>{{Cite news|url=https://www.theverge.com/2017/8/7/16105986/microsoft-xbox-one-dashboard-update-fluent-design|title=A major new Xbox One update overhauls the dashboard with Fluent Design|work=The Verge|access-date=2017-10-29}}</ref><ref>{{Cite news|url=https://www.theverge.com/2017/10/16/16481340/microsoft-xbox-one-fall-dashboard-update|title=The Xbox One is getting a major update today, including a faster dashboard|work=The Verge|access-date=2017-10-29}}</ref> It was later revealed to be designed in conjunction with Windows 10X,<ref>{{Cite news|url=https://www.theverge.com/2020/2/11/21132826/microsoft-windows-10x-features-dual-screen-foldable-hands-on-developers|title=A first look at Microsoft's new Windows 10X operating system for dual screens|date=February 11, 2020|work=The Verge|access-date=April 19, 2020}}</ref> in addition to Windows 11 which has a similar design.<ref>{{Cite web|url=https://www.instagram.com/p/B97VqkXg0iN/ |archive-url=https://ghostarchive.org/iarchive/instagram/panospanay/2268502121555118221 |archive-date=2021-12-25 |url-access=registration|title=Panos Panay on Instagram: "The team made this video to celebrate making it to 1 billion MAD on Windows 10 and I wanted to share it with all of you. Now at a time when…"|date=March 19, 2020|website=Instagram|access-date=April 19, 2020}}{{cbignore}}</ref>

== 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.<ref>{{Cite web |last=Parmar |first=Mayank |date=2022-02-13 |title=Microsoft teases Windows 7 Aero-like design for Windows 11 |url=https://www.windowslatest.com/2022/02/14/microsoft-teases-windows-7-aero-like-design-for-windows-11/ |access-date=2023-04-05 |website=Windows Latest |language=en-US}}</ref> {{multiple image | align = center | image1 = Aero_UI.png | width1 = 175 | caption1 = {{align|center|'''Aero'''}} | image2 = Metro_UI.png | width2 = 175 | caption2 = {{align|center|'''Metro'''}} | image3 = Fluent_UI.png | width3 = 175 | caption3 = {{align|center|'''Fluent'''}} }}

Icons are also generally different, with Fluent not being as flat and simplistic as Metro. {{multiple image | header = Windows Calculator icons | align = center | image1 = Windows 8.1 Windows Calculator.svg | width1 = 167 | caption1 = {{align|center|Windows 8.1 ('''Metro''')}} | image2 = Windows Calculator Logo.svg | width2 = 125 | caption2 = {{align|center|Windows 10 ('''Metro/MDL2''')}} | image3 = Windows 11 Windows Calculator.svg | width3 = 126 | caption3 = {{align|center|Windows 10 (from version 2004) and Windows 11 ('''Fluent''')}} }}

== Design components == === Light ===

{{Infobox | image = 38px | image2 = {{Multiple image | direction = horizontal | image1 = Reveal Highlight.png | image2 = Reveal Focus.png | header = Light | total_width = 250 | caption1 = {{align|center|'''Reveal Highlight'''}} | caption2 = {{align|center|'''Reveal Focus'''}} | border = infobox }} }}

The purpose of light is to draw attention and illuminate information. Therefore, light establishes a relationship between the UI and the cursor or pointer.<ref name=":1" /> * '''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.<ref name=":1">{{Cite web |last=mijacobs |title=Reveal highlight - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/style/reveal |access-date=2017-12-22 |website=docs.microsoft.com |language=en-us}}</ref><ref>{{Cite web |last=Blog |first=Windows Developer |date=2017-08-04 |title=Creating Materials and Lights in the Visual Layer |url=https://blogs.windows.com/windowsdeveloper/2017/08/04/creating-materials-lights-visual-layer/ |access-date=2023-04-04 |website=Windows Developer Blog |language=en-US}}</ref> * '''Reveal focus:''' Focusable items with a border glow via the focus visual.<ref>{{Cite web |last=cphilippona |date=2020-09-24 |title=Reveal focus - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus |access-date=2018-03-30 |website=docs.microsoft.com |language=en-us}}</ref> With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight.<ref name=":2">{{Cite web |title=Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml |url=https://github.com/microsoft/microsoft-ui-xaml/issues/4011 |access-date=2021-07-15 |website=GitHub |language=en}}</ref> Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing interactability though animations.<ref name=":2" />

=== Depth ===

Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering.<ref>{{Cite news|url=https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design|title=Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System|date=2017-05-19|last=Bowden|first=Zac|work=Windows Central|access-date=2017-12-22}}</ref><ref>{{Cite news|url=https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|title=Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices|date=2017-05-20|last=Joyce|first=Kevin|work=VRFocus|access-date=2017-12-22|language=en-US|archive-date=2020-08-13|archive-url=https://web.archive.org/web/20200813034545/https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|url-status=dead}}</ref> 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.<ref name=":0">{{Cite web |last=hickeys |title=Layering and elevation in Windows 11 - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/layering |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}</ref> * '''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.<ref name=":0" />

=== Motion ===

Motion establishes a relationship between UI elements and provides a continuity in the experience.<ref>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/motion/|title=Motion and animation in UWP apps - UWP applications {{!}} Microsoft Docs|date=2020-09-24|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}</ref>

* '''Add/delete animations:''' List animations for inserting and removing items from a collection.<ref name="mijacobs">{{Cite web |last=mijacobs |date=2020-09-24 |title=Motion and animation in UWP apps - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/ |access-date=2018-03-30 |website=docs.microsoft.com |language=en-us}}</ref> * '''Connected animations:''' Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.<ref>{{Cite web |last=mijacobs |date=2020-09-24 |title=Connected animation - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/connected-animation |access-date=2017-12-31 |website=docs.microsoft.com |language=en-us}}</ref> * '''Content transition:''' Used when only a portion of content on a page will change.<ref name="mijacobs"/> * '''Drill:''' Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.<ref>{{Cite web |last=davidvkimball |date=2020-09-24 |title=Page transitions in WUP apps - UWP apps |url=https://docs.microsoft.com/en-us/windows/uwp/design/motion/page-transitions |access-date=2019-11-27 |website=docs.microsoft.com |language=en-us}}</ref> * '''Fade:''' Fade-in and fade-out to bring items into and dismiss them from view.<ref name="mijacobs"/> * '''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.<ref>{{Cite web |last=mijacobs |date=2020-09-24 |title=How to use the ParallaxView control to add depth and movement to your app. - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/parallax |access-date=2017-12-22 |website=docs.microsoft.com |language=en-us}}</ref> * '''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.<ref>{{Cite web |last=mijacobs |date=2020-09-24 |title=Pointer click animations in UWP apps - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/motion-pointer |access-date=2017-12-31 |website=docs.microsoft.com |language=en-us}}</ref>

=== Material === {{Infobox | image = 38px | caption = | image2 = {{Multiple image | direction = horizontal | image1 = Acrylic Material.png | caption1 = {{align|center|'''Acrylic'''}} | image2 = Mica Material.png | caption2 = {{align|center|'''Mica'''}} | image3 = Smoke Material.png | caption3 = {{align|center|'''Smoke'''}} | header = Material | total_width = 250 | footer = The different materials used in Fluent Design | border = infobox }} }} 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:<ref name=":4" /> * {{Anchor|Acrylic}}'''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. * {{Anchor|Mica}}'''Mica:''' Mica is a new opaque material introduced in Windows 11 that takes on the tint of the user's wallpaper.<ref>{{Cite web |last= |title=Materials used in Windows 11 apps - Windows apps |url=https://docs.microsoft.com/en-us/windows/apps/design/signature-experiences/materials |access-date=2021-07-05 |website=docs.microsoft.com |language=en-us}}</ref> 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.<ref name=":4">{{Cite web |last=hickeys |title=Materials used in Windows 11 apps - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/materials |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}</ref>

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.<ref>{{Cite web |last=mijacobs |title=Acrylic material - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/style/acrylic |access-date=2017-12-22 |website=docs.microsoft.com |language=en-us}}</ref>

=== Scale ===

Apps scale across different form factors and display sizes.<ref>{{Cite news|url=https://fossbytes.com/fluent-design-system-microsoft-windows-10/|title=What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?|last=Verma|first=Adarsh|date=2017-05-12|work=Fossbytes|access-date=2018-02-18|language=en-US}}</ref> Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)<ref>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/scroll-controls|title=Scroll viewer controls - UWP applications {{!}} Microsoft Docs|last=muhsinking|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}</ref><ref>{{Cite news|url=https://www.windowscentral.com/whats-new-microsoft-fluent-design-system-wave-one-windows-10|title=What's new with Microsoft Fluent Design System 'wave one' for Windows 10|date=2017-06-29|work=Windows Central|access-date=2017-12-22}}</ref>

== Iconography ==

=== App Icons === {{multiple image | align = right | image1 = | width1 = | caption1 = | image2 = | width2 = 127 | caption2 = {{align|center|'''Metro'''}} | image3 = | width3 = 127 | caption3 = {{align|center|'''Fluent'''}} | total_width = 212 | footer = | footer_align = center | header = }}

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.<ref>{{Cite web |date=November 29, 2018 |title=Redesigning the Office App Icons to Embrace a New World of Work |url=https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f |access-date=April 19, 2020 |website=Medium}}</ref><ref>{{Cite news |date=November 2, 2019 |title=Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer |work=The Verge |url=https://www.theverge.com/2019/11/2/20944341/microsoft-edge-chromium-browser-logo-icon-wave-surf-new |access-date=April 19, 2020}}</ref><ref>{{Cite web |last=hickeys |title=Design guidelines for Windows app icons - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design |access-date=2023-04-04 |website=learn.microsoft.com |date=13 March 2023 |language=en-us}}</ref> Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video,<ref>{{Cite web |date=November 29, 2018 |title=Meet the new icons for Office 365 |url=https://youtube.com/watch?v=YplAU5myNP4 |access-date=April 19, 2020 |website=YouTube}}</ref> before more were spotted when Windows 10X was unveiled,<ref>{{Cite web |date=October 2, 2019 |title=#MicrosoftEvent Live |url=https://youtube.com/watch?v=dmaioTs0NH8 |access-date=April 19, 2020 |website=YouTube}}</ref> prior to being officially revealed on December 12, 2019.<ref>{{Cite web |date=December 12, 2019 |title=The Icon Kaleidoscope |url=https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4 |access-date=April 19, 2020 |website=Medium}}</ref> These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.<ref>{{Cite web |date=February 20, 2020 |title=Iconic Icons: Designing the World of Windows |url=https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416 |access-date=April 19, 2020 |website=Medium}}</ref><ref>{{Cite news |date=February 20, 2020 |title=Microsoft rolls out colorful new Windows 10 icons |work=The Verge |url=https://www.theverge.com/2020/2/20/21145157/microsoft-windows-10-new-icons-modern-release-update-apps |access-date=April 19, 2020}}</ref>

=== Segoe Fluent Icons === {{multiple image | align = right | image1 = | width1 = | caption1 = | image2 = Fluent Metro Icons.svg | width2 = 127 | caption2 = {{align|center|'''MDL2'''}} | image3 = Fluent Segoe Icons.svg | width3 = 127 | caption3 = {{align|center|'''Fluent'''}} | total_width = 212 | footer = | footer_align = center | header = }}

Segoe Fluent Icons make up the set of icons designed by Microsoft for use in its products and services, alongside the redesign of the Segoe UI font (Segoe UI Variable).<ref>{{Cite web |last=hickeys |title=Iconography in Windows 11 - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/iconography |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}</ref> The icons are rounded, departing from the angular and straight Segoe MDL2 icons that were predominant during the Windows 10 era.<ref>{{Cite web |last=hickeys |title=Segoe MDL2 Assets icons - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}</ref>

=== Fluent Emojis === {{multiple image | align = right | image1 = | width1 = | caption1 = | image2 = | width2 = 127 | caption2 = {{align|center|'''Metro'''}} | image3 = Fish Fluent Emoji.svg | width3 = 127 | caption3 = {{align|center|'''Fluent'''}} | total_width = 212 | footer = | footer_align = center | header = }}

On July 15, 2021, Microsoft announced a complete redesign of its emoji library in order to align with its Fluent Design.<ref name=":3">{{Cite web |date=2021-07-15 |title=New Fluent Emoji Designs From Microsoft |url=https://blog.emojipedia.org/new-fluent-emoji-designs-from-microsoft/ |access-date=2023-04-04 |website=Emojipedia |language=en}}</ref> Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji open source on August 10, 2022.<ref>{{Cite web |last=Carrasqueira |first=João |date=2022-08-10 |title=Microsoft open sources its Windows 11 emoji for everyone to use |url=https://www.xda-developers.com/microsoft-open-source-fluent-emoji/ |access-date=2023-04-04 |website=XDA Developers |language=en}}</ref><ref>{{Cite web |last=Design |first=Microsoft |date=2022-08-10 |title=Designing in the Open(Source) |url=https://medium.com/microsoft-design/designing-in-the-open-source-5c62be73a599 |access-date=2023-04-04 |website=Microsoft Design |language=en}}</ref> 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.<ref name=":3" /> Furthermore, Microsoft has stated their plans to animate most of them.<ref>{{Cite web |last=Design |first=Microsoft |date=2021-11-22 |title=Emotionality at work |url=https://medium.com/microsoft-design/emotionality-at-work-398182387adc |access-date=2023-04-04 |website=Microsoft Design |language=en}}</ref> While the 3D animated emojis can be seen in apps such as Microsoft Teams and Skype, Windows 11 initially used flat variants while the full rollout was delayed until 2023.<ref>{{Cite web |last=Shakir |first=Umar |date=2023-07-12 |title=Microsoft's close to delivering Windows 11's long-delayed 3D emoji |url=https://www.theverge.com/2023/7/12/23792735/microsoft-3d-emoji-windows-11-beta-test-preview |access-date=2025-11-09 |website=The Verge |language=en-US}}</ref>

== Implementation == Fluent design guidelines are cross-platform and can be implemented with different frameworks.<ref>{{Cite web |title=Home - Fluent UI |url=https://developer.microsoft.com/en-us/fluentui#/ |website=Microsoft |language=en-US |access-date=April 5, 2023}}</ref> 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.<ref>{{Cite web |last=Bridge |first=Karl |title=Windows UI Library (WinUI) 3 - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/winui/winui3/ |website=Microsoft |language=en-US |access-date=April 5, 2023}}</ref> {| class="wikitable" ! colspan="3" | center|frameless|48x48px WinUI ! colspan="2" | center|frameless|48x48px Fluent UI |- ! [https://learn.microsoft.com/en-us/windows/apps/winui/winui2/ WinUI 2] ! colspan="2" | [https://learn.microsoft.com/en-us/windows/apps/winui/winui3/ WinUI 3] ! [https://react.fluentui.dev/ Fluent UI React v9] ! [https://github.com/microsoft/fluentui/tree/master/packages/web-components Web Components] |- ! UWP ! UWP ! Win32 ! React ! Blazor |- |'''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.<ref name=":5" /> | colspan="2" |'''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.<ref name=":6">{{Cite web|url=https://twitter.com/windowsdev/status/862698458469122049|title=Windows Developer on Twitter|website=Twitter|language=en|access-date=2017-05-11}}</ref> |'''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.<ref>{{Cite web |title=Fluent UI React |url=https://react.fluentui.dev/ |website=FluentUI |language=en-US |access-date=2023-04-05}}</ref> Fluent UI React v9 tries to streamline itself to its WinUI counterpart.<ref>{{Cite web |last=VitaRox |title=Fluent UI React v9: what's new and different |url=https://learn.microsoft.com/en-us/shows/open-at-microsoft/fluent-ui-react-v9-whats-new-and-different#time=00m21s |website=Microsoft |date=28 March 2023 |language=en-US |access-date=April 5, 2023}}</ref> |'''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.<ref>{{Cite web |title=fluentui/packages/web-components at master · microsoft/fluentui |url=https://github.com/microsoft/fluentui |access-date=2023-04-05 |website=GitHub |language=en}}</ref><ref>{{Cite web |author=brookdozer |title=Fluent UI Web Components Overview |url=https://learn.microsoft.com/en-us/fluent-ui/web-components/ |website=Microsoft |date=November 2021 |language=en-US |access-date=April 5, 2023}}</ref> |- | colspan="3" | center|frameless|200x200px{{align|center|UI Elements using WinUI}} | center|frameless|200x200px{{align|center|UI Elements using Fluent UI React v9}} | center|frameless|200x200px|Example of UI elements using web components{{align|center|UI Elements using web components}} |- |}

== Influence == The popularity of the Fluent Design System influenced user interface and logo design in general, especially in the 2020s following the release of the company's Windows 11 itself and Apple's macOS Big Sur. It has spearheaded a style known as "glassmorphism" (a portmanteau of glass and skeuomorphism) that has replaced elements of flat design in digital design.<ref>{{Cite web |title=Glassmorphism: Definition and Best Practices |url=https://www.nngroup.com/articles/glassmorphism/ |access-date=2025-11-05 |website=Nielsen Norman Group |language=en}}</ref><ref>{{Cite web |date=2025-10-25 |title=Glassmorphism Web Design |url=https://verpex.com/blog/website-tips/glassmorphism-web-design |access-date=2025-11-05 |website=Verpex |language=en}}</ref>

== See also == * Adwaita * Liquid Glass * Aqua * Material Design * Flat design * Windows Aero * Metro

== References == {{Reflist|30em}}

==External links== * {{official website}} * {{cite web |url= https://developer.microsoft.com/windows/apps/design |title= Design and Code UWP apps |date= 5 November 2024 |publisher= Microsoft }} * {{cite web |url= https://channel9.msdn.com/events/Build/2017/B8066?term=introduction%20to%20fluent%20design |title= Introducing Fluent Design |date= May 8, 2017 |first1= Paul |last1= Gusmorino |first2= Bojana |last2= Ostojic |work= Channel 9 |publisher= MSDN }}

Category:2017 software Category:Graphical user interface design languages Category:Microsoft free software Category:Software using the MIT license Category:Windows 10 Category:Windows 11 Category:Xbox One Category:Xbox Series X and Series S