Hubbry Logo
Fluent Design SystemFluent Design SystemMain
Open search
Fluent Design System
Community hub
Fluent Design System
logo
8 pages, 0 posts
0 subscribers
Be the first to start a discussion here.
Be the first to start a discussion here.
Contribute something
Fluent Design System
Fluent Design System
Fluent Design System
View on Wikipedia
from Wikipedia
Fluent Design System
Other names
  • Fluent UI
  • Microsoft Fluent Design System
Original authorMicrosoft
DeveloperMicrosoft
Initial release2017; 9 years ago (2017)
Release(s)
Stable release(s) [±]
Web8.122.15 / 15 April 2025; 9 months ago (2025-04-15)[1]
Windows2.8.7 / February 4, 2025; 12 months ago (2025-02-04) [2]
Preview release(s) [±]
Android0.0.11 / February 12, 2021; 4 years ago (2021-02-12) [3]
iOS
macOS		0.2.3 / March 9, 2021; 4 years ago (2021-03-09)[4]
Windows2.6.0-prerelease.210315002 / March 17, 2021; 4 years ago (2021-03-17) [5]
Cross-platform0.23.3 / March 15, 2021; 4 years ago (2021-03-15) [6]
Repository
More Information
Written inObjective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
Operating systemAndroid, iOS, macOS, Windows, Web browser
PlatformARM, x86-64
Predecessor
TypeDesign language software
LicenseMIT License
Websitedeveloper.microsoft.com/fluentui

Fluent Design System (codenamed "Project Neon")[11] 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 all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale.[12] The new design language includes more prominent use of motion, depth, and translucency effects.[13]

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.[14][15][16][17] It was later revealed to be designed in conjunction with Windows 10X,[18] in addition to Windows 11 which has a similar design.[19]

Compared to Metro and Aero

[edit]

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

Aero
Metro
Fluent

Icons are also generally different, with Fluent not being as flat and simplistic as Metro.

Windows Calculator icons
Windows 8.1 (Metro)
Windows 10 (Metro/MDL2)
Windows 10 (from version 2004) and Windows 11 (Fluent)

Design components

[edit]

Light

[edit]
Light
Reveal Highlight
Reveal Focus

The purpose of light is to draw attention and illuminate information. Therefore, light establishes a relationship between the UI and the cursor or pointer.[21]

  • 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.[21][22]
  • Reveal focus: Focusable items with a border glow via the focus visual.[23]

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

Depth

[edit]

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

Motion

[edit]

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

  • Add/delete animations: List animations for inserting and removing items from a collection.[29]
  • Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.[30]
  • Content transition: Used when only a portion of content on a page will change.[29]
  • Drill: Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.[31]
  • Fade: Fade-in and fade-out to bring items into and dismiss them from view.[29]
  • 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.[32]
  • 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.[33]

Material

[edit]
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:[34]

  • 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.[35] 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.[34]

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

Scale

[edit]

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

Iconography

[edit]

App Icons

[edit]

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.[40][41][42] Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video,[43] before more were spotted when Windows 10X was unveiled,[44] prior to being officially revealed on December 12, 2019.[45] These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.[46][47]

Segoe Fluent Icons

[edit]
MDL2
Fluent

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).[48] The icons are rounded, departing from the angular and straight Segoe MDL2 icons that were predominant during the Windows 10 era.[49]

Fluent Emojis

[edit]
Fluent

On July 15, 2021, Microsoft announced a complete redesign of its emoji library in order to align with its Fluent Design.[50] Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji open source on August 10, 2022.[51][52] 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.[50] Furthermore, Microsoft has stated their plans to animate most of them.[53] 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.[54]

Implementation

[edit]

Fluent design guidelines are cross-platform and can be implemented with different frameworks.[55] 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.[56]

WinUI
Fluent UI
WinUI 2 WinUI 3 Fluent UI React v9 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.[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.[57] 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]
UI Elements using WinUI
UI Elements using Fluent UI React v9
Example of UI elements using web components
Example of UI elements using web components
UI Elements using web components

Influence

[edit]

The popularity of the Fluent Design System influenced user interface and logo design in general, especially in the 2020s following the release of Microsoft's Windows 11 and also macOS Big Sur by Apple. It has spearheaded a style known as "glassmorphism" (a portmanteau of glass and skeumorphism) that has replaced elements of flat design in digital design.[62][63]

See also

[edit]

References

[edit]
[edit]
Revisions and contributorsEdit on WikipediaRead on Wikipedia

Fluent Design System

View on Grokipedia
from Grokipedia
The Fluent Design System is a design language and framework developed by Microsoft to create consistent, adaptable, and immersive user experiences across devices, platforms, and input methods, succeeding the earlier Metro design language (also known as Microsoft Design Language 2). Introduced on May 11, 2017, at the Microsoft Build developer conference under the codename Project Neon, it focuses on enabling applications to feel natural on diverse hardware like PCs, tablets, mixed-reality devices, and mobile phones, with initial implementations appearing in Windows 10 updates such as the Fall Creators Update. At its core, Fluent Design is built on five foundational elements: , which highlights important content and provides focus; depth, achieved through layering and translucency effects like acrylic materials to create spatial ; motion, using animations to guide user interactions and convey relationships between elements; , leveraging real-world-inspired textures and transparency for a tangible feel; and scale, ensuring interfaces adapt fluidly to different screen sizes and form factors. These principles draw inspiration from natural phenomena to foster intuitive, expressive designs, distinguishing it from predecessors by emphasizing adaptability over flat aesthetics, while sharing similarities with Google's in its use of motion for contextual cues. Early rollouts included features like the acrylic blur effect in apps such as the Groove music player and , with broader adoption planned across Windows, , and other products over multiple years rather than a single release. In 2023, evolved the system into Fluent 2, announced as the next generation to enhance cross-platform consistency and developer workflows, building directly on the original foundations while introducing system-wide improvements for better collaboration between and code. Key advancements in Fluent 2 include a unified color palette for coherence across experiences, a comprehensive token system for scalable theming, standardized corner radii for components, expanded customizability options, detailed usage guidelines, and integrated considerations to support . This iteration aligns with the "One " vision, powering interfaces in products like , , , and Power Apps, and is supported by open-source tools such as Fluent UI frameworks for web, , Android, and desktop development. As of 2024, Fluent principles continue to influence Windows app guidelines, emphasizing bold, scalable controls with effects like elevation, reveal highlights, and connected animations to ensure high performance and on all devices.

History and Development

Origins and Predecessors

The Aero design language marked a significant in Microsoft's when it debuted with in 2007. It introduced translucent window borders, live taskbar thumbnails, and blurred glass-like effects powered by the (), creating an illusion of depth and layering that mimicked physical glass materials. These features, often referred to as glassmorphism, emphasized transparency and subtle animations to enhance visual appeal while improving usability through peek and flip transitions. Aero persisted as the default interface through , influencing broader trends in translucent UI design across the industry. In contrast, the Metro design language emerged in 2010 with the launch of Windows Phone 7, prioritizing content over ornamentation through typographic hierarchy, flat saturated colors, and a grid-based layout of live tiles. Inspired by signage in transportation hubs, Metro stripped away skeuomorphic elements in favor of minimalism, scalability, and touch-friendly interactions, aiming to deliver information efficiently without visual clutter. This approach was later extended to the desktop in Windows 8 (2012), where it replaced Aero entirely, introducing a full-screen Start screen with dynamic tiles and eliminating traditional window chrome for a unified, post-WIMP (windows, icons, menus, pointer) paradigm. The abrupt transition to Metro in Windows 8 provoked widespread user backlash, as the removal of the Start button, Aero's familiar transparency, and desktop-centric navigation alienated traditional PC users accustomed to mouse-and-keyboard workflows. Critics highlighted the jarring dual-interface split—Metro for the Start screen and legacy desktop—leading to confusion and reduced productivity, with surveys indicating low adoption rates among enterprise users. In response, (2013) partially reverted by restoring a non-functional Start button on the (which reopened the Start screen) and enabling direct to desktop, though it retained Metro's core elements. By (2015), fully abandoned the immersive Metro Start screen for desktops, reintroducing a hybrid that blended classic list views with optional live tiles, signaling a retreat from the radical experiment. Fluent Design System later synthesized Aero's emphasis on depth and materiality with Metro's typographic simplicity, addressing the shortcomings of both predecessors in a more versatile framework.

Announcement and Initial Rollout

The Fluent Design System was officially unveiled by Microsoft at its Build developer conference on May 11, 2017, as a new design language for Windows and cross-platform experiences, having been previously codenamed Project Neon. Positioned as an evolution of the flat Microsoft Design Language 2 (MDL2) from earlier Windows 10 interfaces, it aimed to introduce more dynamic and versatile visual elements suitable for diverse devices and input methods. The announcement highlighted its role in the upcoming Windows 10 Fall Creators Update, marking the beginning of a multi-year transition to enhance user interfaces beyond traditional flat design. Key initial features focused on the core principles of , depth, and , including the acrylic for creating translucent UI elements that adapt to underlying content and lighting, reveal lighting effects that provide subtle interactive highlights following user input like hovers, and foundational support for and dark themes to accommodate user preferences and reduce . These elements were designed to make interfaces feel more natural and responsive, with acrylic enabling blurred, semi-transparent overlays in toolbars and panels, while reveal used dynamic glows to emphasize edges and affordances without cluttering the . Early implementations appeared in the Windows 10 Fall Creators Update released on October 17, 2017, with phased integration starting in select first-party applications. The Microsoft Edge browser incorporated acrylic backdrops in its address bar and tabs for a layered depth effect, the Settings app applied translucent materials to navigation panes and dialogs for better content focus, and the Photos app featured reveal highlights and motion in its editing tools and gallery views. This rollout extended gradually to other system components like the Start menu and taskbar, prioritizing developer tools and APIs in preview builds earlier in 2017 to enable broader adoption. Microsoft's design goals centered on building "adaptive and " interfaces that intuitively respond to user context, device capabilities, and interactions, fostering more immersive and personalized experiences across screens. As described in official guidance, Fluent aimed to create beautiful, multimodal UIs that feel natural on desktops, tablets, and emerging form factors, emphasizing toward users' needs through contextual awareness and subtle feedback.

Evolution to Fluent 2

Following its initial rollout, the Fluent Design System underwent significant mid-period expansions between 2018 and 2020 to enhance animation fluidity and developer integration. In the October 2018 Update (version 1809), Microsoft introduced velocity-based animations as part of the motion pillar, allowing elements to accelerate and decelerate more naturally in response to user interactions, alongside broader application of Acrylic material in apps like Settings and the . This update built on the system's foundational principles of light, depth, and motion. In 2019, integration with WinUI 2.0 further advanced adoption by providing a library of Fluent-compliant controls and styles for UWP applications, enabling developers to create consistent experiences without relying solely on platform defaults. A key shift occurred with the launch of open-source Fluent UI frameworks, extending the design language beyond Windows to cross-platform development. Fluent UI React, released in 2019 as a rebranding and evolution of the earlier Office UI Fabric React, offered React components aligned with Fluent principles, facilitating web and hybrid app creation for Microsoft products like Office 365. This move promoted broader ecosystem cohesion and allowed third-party developers to adopt Fluent elements in non-Windows environments. Fluent 2 was announced in May 2023 as the next evolution of the design system, emphasizing a token-based architecture for scalable, maintainable components. This update introduced design tokens—semantic variables for colors, spacing, typography, and elevation—to streamline handoff from design to development and ensure consistency across platforms. Standardized corner radii, such as 4px for buttons and other rectangular elements, were established to create uniform visual harmony, with adjustments to 2px for smaller shapes under 32px to maintain proportionality. Enhanced customizability allowed teams to override tokens for brand-specific adaptations while preserving core Fluent aesthetics. Ongoing implementations in 2025 advanced cohesion and within Fluent 2, building on its 2023 foundations including the unified color system with semantic tokens that map to contextual uses like neutral palettes for backgrounds and brand colors for accents, ensuring adaptive light and dark modes. Accessibility improvements included full compliance for screen readers and built-in support for high-contrast themes, meeting WCAG AA standards with minimum 4.5:1 contrast ratios for text. Specific releases advanced these features, including .UI.Xaml version 2.8.7 for Windows on February 5, 2025, and Fluent UI Web version 8.122.15 on April 15, 2025. Adoption of Fluent 2 accelerated in applications throughout 2025, demonstrating its practical integration. Power Apps received a modern look update on May 23, 2025, incorporating Fluent 2 controls, refreshed , and navigation for model-driven apps. Similarly, apps embraced the system through icon refreshes emphasizing fluid forms and vibrant colors, rolled out starting October 1, 2025, to align with broader productivity tools.

Core Design Principles

Light

The Light principle in the Fluent Design System employs dynamic illumination to mimic real-world light sources, such as natural daylight or evening ambiance, thereby guiding user attention through subtle visual cues while avoiding harsh contrasts that could disrupt focus. This approach leverages the visual system's sensitivity to light variations, using effects like the Reveal highlight—a soft, radiating glow around interactive elements such as buttons or menus—to indicate and enhance intuitiveness in user interfaces. By simulating even, contextual lighting, the principle promotes a natural viewing experience that aligns with environmental conditions, reducing visual fatigue in prolonged interactions. Implementation in Windows 10 and 11 includes built-in support for light, dark, and high-contrast themes, allowing applications to adapt their color schemes accordingly for better and . Dark themes, in particular, employ lower brightness levels to minimize in dim environments, while high-contrast modes amplify visibility for users with low vision. Automatic theme switching is facilitated through utilities like PowerToys , which toggles between light and dark modes based on time of day or sunrise/sunset data, ensuring interfaces remain contextually appropriate without manual intervention. The Reveal effect, integral to this principle, applies subtle glows to hovered or focused elements in supported UWP controls like ListView and NavigationView, with developers able to enable it via predefined styles or custom templates starting from the Windows 10 Creators Update. Technically, emphasizes uniform illumination across surfaces to foster a cohesive, strain-free environment, contrasting with overly stark shadows or highlights that could cause discomfort during extended use. Examples include the animated border glow in Reveal Focus for or keyboard navigation, which draws attention without overwhelming the interface, and integration with system-wide color modes that adjust neutral tones dynamically. In the evolution to Fluent 2, this principle advances through semantic tokens—named variables for colors, elevations, and effects—that ensure consistent application of and dark modes across platforms, simplifying theme management in tools like UI kits and code frameworks. Historically, the Light principle builds upon the flat, uniform lighting of the Metro design language in Windows 8, which prioritized simplicity but lacked environmental adaptability, while introducing greater variability than the static, glassy translucency of Aero in Windows Vista and 7. This progression, announced at Microsoft Build 2017, reflects a shift toward multi-device, mixed-reality experiences where light responds to user context and input methods.

Depth

The Depth principle in the Fluent Design System establishes spatial hierarchy by simulating three-dimensional environments within two-dimensional interfaces, enabling users to intuitively perceive layers of content and prioritize information through and separation. This approach uses Z-depth layering to position UI elements along an imaginary z-axis, creating a sense of forward and backward positioning that organizes content into cards, panels, and overlays without relying on true . By mimicking physical depth, it enhances by drawing attention to foreground elements while receding background ones, fostering a more immersive and navigable experience across devices. Key features of Depth include a standardized Z-depth scale typically ranging from 0 to 32 density-independent pixels (dp), where lower values (e.g., 0-16dp) apply to subtle elevations like cards or buttons, and higher values (e.g., 28-32dp) are reserved for prominent elements such as pop-up dialogs or bottom sheets. Shadows are generated using a combination of sharp, directional key shadows for nearby objects and soft, diffused ambient shadows for distant ones, with blur radii scaling accordingly— for instance, a low-elevation shadow might use 2px blur, while high-elevation ones reach up to 64px. Perspective is achieved through transforms that imply tilt and distance, often paired with parallax effects where foreground layers shift faster than backgrounds during interactions, and the system responds to varying screen sizes by adapting elevation scales to maintain proportionality. In Fluent 2, elevation tokens have been refined with a luminosity equation to ensure shadows render realistically on colored surfaces, promoting consistency across light and dark themes. Practical implementations demonstrate Depth's role in enhancing multi-tasking; for example, in , layered notifications and menu flyouts elevate at 32dp with ThemeShadow for clear separation from the desktop, while pop-up elements in applications like use floating panels at similar depths to stack conversations without cluttering the view. These features subtly reintroduce depth reminiscent of the earlier Aero interface, countering the two-dimensional rigidity of Metro-style by adding layered complexity that supports touch, mouse, and keyboard inputs without visual overload. Depth integrates with the principle to produce realistic shadows from a consistent overhead source, further reinforcing spatial cues.

Motion

The Motion principle in the Fluent Design System emphasizes fluid animations and transitions that mimic natural physics to create intuitive, responsive interfaces. Connected animations serve as a core mechanism, allowing elements to "fly" seamlessly from one context to another, preserving user focus by maintaining visual continuity across views. This approach incorporates velocity matching and gravity-like effects to make interactions feel alive and organic, enhancing usability by providing immediate feedback on user actions. Technically, Fluent Motion leverages easing curves and precise timing to simulate real-world deceleration and acceleration. For web implementations, utilize cubic-bezier functions, such as cubic-bezier(0, 0, 0, 1) for fast-out, slow-in entrances that decelerate smoothly into position. On Windows platforms, the Composition API enables high-performance rendering at 60 frames per second, supporting features like and layered animations. ConnectedAnimationService APIs handle configurations like GravityConnectedAnimationConfiguration for forward navigation with scale-and-dip effects, ensuring velocity preservation during transitions. Examples of Motion in practice include page transitions in the browser, where content elements animate fluidly between tabs, and reveal animations on hover, such as taskbar flyouts that slide with easing for contextual feedback. In Fluent 2, enhancements introduce micro-animations for subtle interactions, like animated icons in WinUI controls, while prioritizing through reduced motion options compliant with WCAG guidelines, allowing users to disable animations to reduce . Timing scales differentiate purposes: faster durations around 83-167ms for immediate feedback (e.g., button presses), and slower ones up to 333ms for emphasis (e.g., scene changes). Easing functions, particularly ease-out variants like cubic-bezier(1, 0, 1, 1) for gentle exits, ensure deceleration feels natural. Motion synergizes with depth by animating layered elements to reinforce spatial navigation.

Material

The Material principle in the Fluent Design System seeks to mimic physical s through the use of blur, transparency, and highlights, creating immersive user interfaces that blend digital elements with their surroundings for a sense of depth and realism. This approach draws inspiration from real-world surfaces like or textured backdrops, allowing UI components to appear layered and contextual rather than flat, thereby enhancing and user engagement. Key components of the Material principle include Acrylic, Reveal, and Mica, each contributing unique surface properties. Acrylic is a semi-transparent material that applies a blurred backdrop combined with a subtle noise texture to simulate , commonly used for transient UI elements such as menus and overlays to provide subtle depth without overwhelming the content. Reveal introduces dynamic lighting effects along the edges of interactive elements, leveraging the principle to highlight user interactions and guide through subtle glows and highlights. Mica, an opaque material introduced in , offers a subtle tint derived from the desktop wallpaper, creating a cohesive blend with the user's environment for base layers in long-lived windows like applications and settings pages. Technical implementation of these materials relies on efficient rendering techniques to maintain . In web and cross-platform contexts, backdrop filters in CSS, such as blur(10px), enable the translucent blur effect of Acrylic, while GPU-accelerated rendering in frameworks like WinUI ensures smooth application without significant battery drain, though effects may be disabled in power-saving modes. and Acrylic are mode-aware, adapting to light and dark themes, with sampling the wallpaper once for efficiency during window movement. The evolution of the Material principle began with the initial rollout of Acrylic in 2017, debuting in the Windows Settings app to introduce translucent surfaces as a core Fluent element. In Fluent 2, refinements introduced material tokens to standardize properties like opacity—typically 20-40% for overlays—ensuring consistency across applications and evolving Acrylic to be brighter and more translucent in Windows 11, while adding Mica for enhanced environmental integration.

Scale

The Scale principle in the Fluent Design System focuses on responsive design practices that enable user interfaces to adapt fluidly across diverse devices, screen resolutions, and interaction contexts, ensuring proportional scaling of elements for a seamless experience. This approach supports mixed input methods, such as touch on mobile devices and mouse precision on desktops, by treating scale as a foundational element that transcends two-dimensional constraints. Central features of Scale include adaptive layouts built with relative units, such as and em in web-based implementations, which allow components to resize proportionally based on the root font size or parent elements; density modes that leverage effective pixels (epx) for high-DPI screens to maintain visual ; and dynamic content reflow that reorganizes layouts in response to resizing or orientation changes. These mechanisms use breakpoints—such as small screens up to 640px for TVs, medium from 641px to 1007px for tablets, and large at 1008px and above for PCs—to trigger layout adjustments without requiring separate fixed designs. Representative examples illustrate Scale in action: on touch-enabled devices, interactive elements like buttons adhere to a minimum 40x40 epx target size to facilitate comfortable finger interactions, contrasting with desktop variants that include finer hover states for cursor accuracy; the Fluent 2 token system further enables scalable spacing through a 4px base grid, where tokens such as size40 (4px) and size200 (20px) ensure consistent proportions across icons, margins, and components regardless of device. Accessibility is inherently tied to Scale, with Fluent interfaces designed to support Windows scaling settings and browser zoom up to 400% without horizontal scrolling or breakage, achieved by reflowing content to a minimum width of 320px and aligning UI to a 4 epx grid for crisp rendering at various magnifications. Scale also integrates briefly with the Depth principle to apply perspective adjustments, allowing layered elements to resize contextually for enhanced spatial awareness.

Visual Elements

Iconography

The Fluent Design System's iconography represents a significant evolution from the line-based Segoe MDL2 Assets icons, introduced in 2015 with , which featured sharp corners and rectangular forms suited to earlier paradigms. In contrast, Fluent icons adopt filled, rounded shapes that enhance scalability across devices and convey greater expressiveness through fluid, organic forms, aligning with the system's emphasis on light, depth, and motion. This shift prioritizes intuitive recognition and modern aesthetics, replacing the more rigid MDL2 style to better support adaptive user interfaces. Key icon sets in Fluent include system icons for universal UI elements like navigation and status indicators, product launch icons tailored to Microsoft applications, and file type icons for document representation. System icons, available as open-source SVGs under MIT license, number over 1,500 and form the core of interface wayfinding. App icons, such as those for , employ simplified, metaphorical shapes—like a stylized paperclip evoking —to highlight product capabilities while maintaining consistency across platforms. These sets collectively unify the , ensuring icons serve semantic purposes in layouts without overwhelming content. Design traits of Fluent icons emphasize precision and usability, built on a 16px base grid with recommended rendering sizes of 16, 20, 24, 32, 40, 48, and 64 pixels for crisp appearance. Variable line weights, typically ranging from 1 to 3 pixels, allow for nuanced emphasis, such as thicker strokes in filled variants for selected states. Icons support light and dark modes through Regular (outline for general use) and Filled themes, adapting seamlessly to preferences. Accessibility is integrated via larger effective tap targets (at least 44x44 pixels on touch devices) and high contrast ratios, promoting intuitive interaction for diverse users. The evolution of Fluent iconography began with the 2021 introduction of the font alongside , marking a departure from MDL2 toward rounded, friendly glyphs for broader expressiveness. By October 2025, a refresh introduced fluid forms and vibrant accents to app icons, particularly for apps, incorporating playful, simpler metaphors and gradients to enhance vibrancy and alignment with Fluent 2's material and scale principles. This update, detailed in Microsoft's design guidelines, fosters greater creativity while preserving core familiarity. Fluent icons pair effectively with typography for labeled elements, ensuring cohesive hierarchy in interfaces.

Typography

The Fluent Design System employs Segoe UI Variable as its core font for Windows applications, a introduced by in 2021 to enhance legibility across various sizes and devices. This typeface serves as the default system font, with fallbacks to platform-specific alternatives such as San Francisco Pro for macOS and or for Android to ensure cross-platform consistency. Segoe UI Variable supports optical sizing, automatically adjusting letterforms from 8pt to 36pt for optimal readability and visual personality at different scales. Typography hierarchy in Fluent Design follows a defined type ramp to establish clear visual structure, using effective pixel sizes that account for line heights. For instance, body text is set at 14px regular weight with a 20px line height (approximately 1.4x the font size), while headings like H1 use 32px semibold with a 40px line height (1.25x). Larger elements, such as display text, scale to 68px semibold with a 92px line height. These scales prioritize legibility during motion and interactions, with regular weight for most body content and semibold for titles to maintain emphasis without overwhelming the interface. Line heights generally range from 1.3x to 1.5x the font size across elements, promoting readable spacing in dynamic contexts. Key features of Segoe UI Variable include variable font axes for weight (ranging from 100 Thin to 900 Black) and width, allowing fine-tuned adjustments for responsive designs. Fluent 2, announced in 2023, introduces semantic tokens that define responsive text sizing based on roles like caption, body, or title, enabling automatic adaptation to screen sizes and themes. These enhancements build on earlier versions by providing greater flexibility in weight and proportions, supporting seamless integration across Windows UI elements. Guidelines for Fluent typography emphasize accessibility and precision, including left alignment as the default, with 50–60 for optimal , and minimum sizes of 14px semibold or 12px regular. Kerning is adjusted specifically for text paired with icons to ensure balanced spacing in labeled UI components. Integration with light themes requires a minimum of 4.5:1 for standard text (3:1 for large text) to prevent low-visibility issues.

Color System

The Fluent Design System employs a structured color palette to ensure consistency, accessibility, and emotional resonance across products and applications. It comprises three primary palettes: neutral, shared, and . The neutral palette consists of black, white, and a range of gray shades serving as aliases for backgrounds, text, and structural elements, providing foundational without drawing undue attention. The shared palette includes semantic colors that convey status, feedback, or urgency, such as (e.g., #107C10) and error (#D13438), while the palette features distinctive hues like the primary blue (#0078D4) to reinforce product identity. Collectively, these form a core set of approximately 16 colors, expandable through variations for depth and context. Theme support in Fluent integrates light and dark variants, with automatic color inversion to maintain and reduce in low-light environments. Shared and brand colors dynamically adjust in dark mode—for instance, warmer tones shift to cooler counterparts—while high-contrast mode adheres to WCAG AA standards for enhanced visibility, particularly for users with visual impairments. This personalization extends to system-level settings in Windows, where users can select accent colors that propagate across interfaces. Fluent 2 introduces an advanced token-based system for , replacing hardcoded values with semantic like colorNeutralBackground1 for layered surfaces and colorBrandPrimary for accents, enabling scalable and theme-agnostic implementations. A 2025 refresh incorporates more vibrant accents to align with evolving , promoting universality and cognitive ease. Developers can customize palettes using Design Tokens in format, facilitating brand extensions while preserving core semantics. In practice, Fluent recommends subtle opacities of 10-20% for overlays and translucent elements to blend colors without overwhelming content, ensuring text maintains a minimum of 4.5:1 against backgrounds for normal text (3:1 for large text) per WCAG AA standards for optimal . These colors also tint materials in backdrops, enhancing perceived depth while prioritizing .

Implementation and Tools

In Operating Systems

Fluent Design System was first integrated into the user interface shell with the Fall Creators Update in October 2017, introducing elements such as acrylic translucency in the and blur effects to enhance depth and light principles. This adoption extended to core system components, leveraging hardware-accelerated rendering for smooth performance. In , released in 2021, the system further evolved with the introduction of , an opaque material that subtly incorporates the user's desktop wallpaper for personalized backdrop effects in UI layers like title bars and sidebars. The evolution of Fluent Design in Windows followed a phased timeline, beginning with initial light and depth features in the 2017 Creators Update, which added translucent materials to system dialogs and notifications. By the version 22H2 update in 2022, rounded corners were applied to native windows, menus, and elements like the to align with Fluent's scale and motion guidelines, creating a more cohesive and modern aesthetic. Recent updates in November 2025, including an expanded Acrylic blur effect applicable to pop-ups and web apps, have aligned Windows UI more closely with Fluent 2 design tokens for consistent color, spacing, and elevation across system surfaces. Beyond Windows, Fluent Design has seen partial adoption in other Microsoft operating environments, notably the dashboard update in August 2017, which incorporated translucency, motion, and customizable home interfaces to refresh the console's UI. Similarly, elements of Fluent appear in interfaces for collaborative displays, emphasizing light and material effects in touch-based interactions. While Fluent is not natively implemented in non-Microsoft operating systems like or Android, Microsoft applications on those platforms can incorporate Fluent principles through cross-platform tools. For OS-level components in Windows, frameworks like WinUI provide native support for Fluent elements, ensuring consistent implementation in system apps. Fluent Design's visual effects, such as blur and translucency, rely on via DirectComposition, a that enables high-frame-rate composition independent of the UI thread, reducing latency and supporting GPU-optimized rendering for features like Acrylic and . This requirement ensures fluid performance but may degrade on older hardware lacking sufficient graphics capabilities.

In Applications and Frameworks

WinUI 3, released in 2020, serves as a XAML-based framework for developing Windows desktop and Universal Windows Platform (UWP) applications, incorporating Fluent Design principles to ensure modern, cohesive user interfaces. It provides a native user experience library that builds on the Fluent Design System, enabling developers to create apps with features like acrylic materials and light effects directly integrated into controls and styles. Fluent UI React version 9, released in , offers a comprehensive set of React components and utilities for web applications, aligning with Fluent Design to facilitate consistent theming and interactions across digital products. This version emphasizes performance improvements and streamlined theming, allowing developers to build responsive interfaces that adhere to Fluent's emphasis on depth and motion. Integrations with and .NET ecosystems further extend Fluent Design through the .FluentUI.AspNetCore Components package, which delivers components for building Blazor applications with Fluent-styled elements like buttons and navigation. These components leverage the Fluent Design System to maintain visual consistency in server-side rendered web apps developed with . In applications, Fluent Design enhances user experiences with subtle animations and material effects; for instance, incorporates Fluent 2 elements to improve performance and reduce interface complexity, while Outlook adopts Fluent principles for a unified, modern layout across Windows and web versions. Power Apps received a 2025 refresh featuring updated fonts, colors, borders, and shadows aligned with the Fluent Design System, enabling low-code developers to create model-driven apps with enhanced visual depth. Cross-platform adoption includes the use of Fluent UI System Icons, an open-source collection available under the , which supports Android and development by providing consistent, scalable icons for mobile applications. Open-source contributions, such as the Fluent UI React repository on , have garnered significant community engagement, with over 15,000 stars reflecting its widespread use in web projects. Implementing Fluent Design outside Windows environments presents challenges, particularly in maintaining visual consistency for effects like acrylic materials, often requiring CSS polyfills or backdrop-filter approximations to simulate blur and transparency in web and mobile contexts. Developers must address platform-specific rendering limitations, such as varying support for , to ensure Fluent's depth and light principles translate effectively across browsers and devices.

Design and Development Resources

Microsoft provides a range of to facilitate the creation of interfaces adhering to the Fluent Design System, with UI kits serving as a primary resource for designers. The Fluent 2 Web UI kit, available through 's community files, includes refactored components with variables for color, spacing, and sizing that align directly with code implementations, enabling efficient prototyping for web experiences. This kit has garnered significant adoption, with over 6,600 views in the community as of November 2025. Additionally, the Fluent 2 file in houses global and alias styling variables, supporting seamless handoff from to development by maintaining consistency across platforms. For developers, offers comprehensive documentation and libraries through the Fluent UI platform on developer.microsoft.com, which includes tutorials, references, and guidance for integrating Fluent components into web applications. Key resources include packages such as @fluentui/react-components, which reached version 9.72.6 in late 2025, providing a suite of React components built on Fluent principles for cross-platform development. These packages emphasize extensibility, allowing developers to customize components while adhering to Fluent's adaptive theming and interaction behaviors. The official guidelines on fluent2.microsoft.design outline core principles, design tokens in format, and accessibility checklists to ensure compliant implementations. Design tokens cover aspects like color palettes, corner radii, and spacing scales, built for flexibility and OS-level theming support, including light and dark modes. resources align with WCAG 2.1 AA standards, offering checklists for color contrast, responsive layouts, and meaningful text alternatives to promote . These guidelines also include usage instructions for tokens to streamline workflows from prototyping to production. The Fluent Design System fosters community involvement through open-source repositories on , such as the microsoft/fluentui project, which hosts utilities, React components, and for collaborative contributions and extensions. Figma community files further support shared resources, with handoff processes detailed in the Fluent 2 documentation to bridge design and development teams effectively.

Reception and Legacy

Critical Response

Fluent Design System garnered positive acclaim upon its 2017 debut for evolving Microsoft's Metro design language by integrating subtle layers of depth, light, motion, material, and scale, thereby merging minimalism with a renewed sense of visual beauty reminiscent of the Aero era. The Verge described it as a refreshing successor to Metro, enabling more engaging and adaptive interfaces across Windows, iOS, and Android platforms. Subsequent iterations, particularly Fluent 2 released in 2023, have been lauded for advancing , with components designed to meet or exceed WCAG 2.1 AA standards through improved structure, keyboard navigation, and responsive layouts that promote . Analyses in early 2025, including expert discussions on , emphasized how these enhancements foster better user experiences for diverse abilities, marking a significant step in . Critics, however, pointed to early transparency effects like Acrylic as resource-intensive, leading to performance lags on low-end hardware during implementations, prompting users to disable them for smoother operation. Pre-Fluent 2 versions were also seen as inconsistent in adaptive application across devices and apps, challenging developers to maintain cohesion amid evolving guidelines. Design experts at have since championed updates like the 2025 refresh of fluid icons in , praising their curved, vibrant forms for injecting motion and approachability into interfaces, signaling a deeper shift toward AI-era expressiveness. In comparisons to Google's 3, Fluent is often viewed as a parallel evolution, sharing emphases on motion and materiality but distinguishing itself through pronounced light and depth effects for more immersive, platform-agnostic experiences. User satisfaction metrics underscore these refinements; Microsoft's internal surveys for , which heavily features Fluent elements like , reported the highest product satisfaction rates in the operating system's history as of 2022, with early feedback indicating strong preferences for its layered over legacy styles.

Adoption and Influence

Fluent Design System has become a cornerstone of Microsoft's across its major products. In , it serves as the primary , providing cohesive visual elements such as rounded corners, translucency, and fluid animations to enhance user experiences. The system is also deeply integrated into the Azure portal, where it improves usability, consistency, and accessibility in complex cloud interfaces. Similarly, Microsoft 365 applications leverage Fluent principles to ensure seamless interactions and shared design behaviors across productivity tools. Since its introduction in 2017 as a Windows-focused framework, Fluent Design has evolved into a cross-platform solution by 2025, supporting web, mobile, and desktop development through tools like Fluent UI. As of July 2025, adoption exceeded 50% of Windows desktops, highlighting Fluent Design's role in the OS's growing market dominance. This expansion includes significant adoption in Power Apps, where model-driven apps received a refreshed look in 2025 with updated fonts, colors, borders, and shadows aligned to Fluent standards, facilitating broader migration to modern theming. Beyond Microsoft's ecosystem, Fluent Design inspires third-party developers, with numerous applications incorporating its elements for native Windows 11 aesthetics, such as Ambie for ambient sounds and ClipShelf for clipboard management. Open-source Fluent UI components, available via npm packages like @fluentui/react, enable consistent implementation and have seen widespread use in , contributing to its growing popularity. The system's emphasis on inclusive and adaptive design has influenced broader industry trends, notably in the adoption of design tokens for scalable theming, as seen in Figma's Schema 2025 updates that align with Fluent's token-based approach for cross-platform consistency. By 2025, these principles parallel advancements like dynamic personalization in mobile interfaces, underscoring Fluent's role in shaping accessible UI standards.

References

  1. https://arstechnica.com/information-technology/2017/05/new-windows-look-and-feel-neon-is-officially-the-microsoft-fluent-design-system/
  2. https://blogs.windows.com/windows-insider/2017/05/11/build-2017-sparking-the-next-wave-of-creativity-with-the-windows-10-fall-creators-update/
  3. https://learn.microsoft.com/en-us/shows/on-dotnet/exploring-the-fluent-design-system
  4. https://fluent2.microsoft.design/get-started/whatisnew
  5. https://developer.microsoft.com/en-us/fluentui
  6. https://learn.microsoft.com/en-us/windows/apps/design/
  7. https://learn.microsoft.com/en-us/archive/msdn-magazine/2007/april/aero-glass-create-special-effects-with-the-desktop-window-manager
  8. https://nationalcioreview.com/articles-insights/tech-time-travel/tech-time-travel-windows-vista/
  9. https://www.wired.com/2012/05/microsoft-drops-aero-glass-ui-in-windows-8/
  10. https://blogs.windows.com/windowsdeveloper/2010/03/18/windows-phone-7-series-ui-design-interaction-guide/
  11. https://www.smashingmagazine.com/2011/12/introduction-designing-windows-phone-7-metro/
  12. https://www.webdesignmuseum.org/web-design-history/flat-design-and-windows-phone-7-2010
  13. https://www.computerworld.com/article/1437474/microsoft-dumps-aero-ui-in-windows-8-metro-izes-desktop.html
  14. https://www.cnet.com/tech/tech-industry/microsoft-reacts-to-gripes-over-windows-8-start-screen/
  15. https://www.nngroup.com/articles/windows-8-disappointing-usability/
  16. https://www.zdnet.com/article/the-metro-haters-guide-to-customizing-windows-8-consumer-preview/
  17. https://www.aljazeera.com/news/2013/5/30/start-button-back-for-windows-after-backlash
  18. https://www.bbc.com/news/technology-22714048
  19. https://arstechnica.com/gadgets/2015/07/review-windows-10-is-the-best-version-yet-once-the-bugs-get-fixed/
  20. https://www.windowscentral.com/software-apps/windows-11/how-the-windows-start-menu-has-evolved-in-the-last-50-years-of-microsoft
  21. https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/
  22. https://www.neowin.net/news/project-neon-microsoft-announces-new-039fluent-design-system039-for-windows-10/
  23. https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features
  24. https://news.microsoft.com/source/2017/05/11/windows-10-fall-creators-update/
  25. https://www.sitepoint.com/introducing-microsofts-fluent-design-system/
  26. https://www.thurrott.com/windows/windows-10/132809/fall-creators-update-feature-focus-fluent-design-system
  27. https://www.theverge.com/2017/10/17/16487760/microsoft-windows-10-fall-creators-update-features-review
  28. https://www.zdnet.com/article/windows-10-fall-creators-update-microsoft-showcases-fluent-design-in-new-video/
  29. https://www.windowscentral.com/windows-10-fall-creators-update-ultimate-resource-guide
  30. https://www.windowslatest.com/2017/05/12/microsoft-releases-build-16190-with-fluent-design-system-apis/
  31. https://techcommunity.microsoft.com/t5/microsoft-onedrive-blog/designing-a-fluent-and-intelligent-onedrive/ba-p/303748
  32. https://learn.microsoft.com/en-us/archive/msdn-magazine/2018/august/hololens-mixed-reality-and-fluent-design
  33. https://learn.microsoft.com/en-us/windows/uwp/whats-new/windows-10-build-17763
  34. https://fluent2.microsoft.design/motion
  35. https://learn.microsoft.com/en-us/windows/uwp/get-started/winui2/release-notes/winui-2.0
  36. https://www.geeksforgeeks.org/reactjs/fluent-ui-introduction-and-installation-for-react/
  37. https://fluent2.microsoft.design/shapes
  38. https://fluent2.microsoft.design/design-tokens
  39. https://x.com/docsmsft/status/1887147105933815917
  40. https://fluent2.microsoft.design/color
  41. https://fluent2.microsoft.design/color-tokens
  42. https://fluent2.microsoft.design/accessibility
  43. https://learn.microsoft.com/en-us/power-apps/user/modern-fluent-design
  44. https://microsoft.design/articles/fluid-forms-vibrant-colors/
  45. https://medium.com/microsoft-design/the-science-in-the-system-fluent-design-and-light-94a17e0b3a4f
  46. https://learn.microsoft.com/en-us/windows/uwp/ui-input/reveal-focus
  47. https://www.microsoft.com/en-us/windows/learning-center/tips-for-reducing-digital-eyestrain
  48. https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/color
  49. https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696
  50. https://learn.microsoft.com/en-us/windows/powertoys/light-switch
  51. https://learn.microsoft.com/en-us/windows/uwp/whats-new/windows-10-build-16299
  52. https://www.thurrott.com/windows/windows-10/115968/thinking-fluent-design-system
  53. https://learn.microsoft.com/en-us/windows/apps/design/layout/depth-shadow
  54. https://fluent2.microsoft.design/elevation
  55. https://learn.microsoft.com/en-us/windows/apps/design/motion/connected-animation
  56. https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/motion
  57. https://learn.microsoft.com/en-us/windows/apps/design/motion/timing-and-easing
  58. https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/materials
  59. https://fluent2.microsoft.design/material
  60. https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic
  61. https://learn.microsoft.com/en-us/windows/apps/design/style/mica
  62. https://learn.microsoft.com/en-us/windows/apps/design/layout/responsive-design
  63. https://fluent2.microsoft.design/design-principles
  64. https://learn.microsoft.com/en-us/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design
  65. https://fluent2.microsoft.design/layout
  66. https://learn.microsoft.com/en-us/windows/apps/design/input/guidelines-for-targeting
  67. https://learn.microsoft.com/en-us/windows/apps/design/style/spacing
  68. https://learn.microsoft.com/en-us/typography/font-list/segoe-mdl2-assets
  69. https://fluent2.microsoft.design/iconography
  70. https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font
  71. https://github.com/microsoft/fluentui-system-icons
  72. https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/design/design-teams-app-icon-store-appbar
  73. https://blogs.windows.com/windows-insider/2021/05/06/announcing-windows-10-insider-preview-build-21376/
  74. https://fluent2.microsoft.design/typography
  75. https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/typography
  76. https://www.bigtechwire.com/2023/05/25/microsoft-announces-fluent-2-the-next-evolution-of-microsofts-design-system/
  77. https://www.theverge.com/2017/10/16/16481202/microsoft-windows-10-fall-creators-update-fluent-design
  78. https://www.windowslatest.com/2022/07/03/windows-11-22h2-hands-with-new-task-manager-features-and-more/
  79. https://www.windowslatest.com/2025/11/06/windows-11-ui-update-acrylic-blur-is-coming-to-every-corner-web-apps-to-feel-more-native/
  80. https://www.windowscentral.com/microsoft/windows-11/top-7-features-coming-on-windows-11-with-the-november-2025-update
  81. https://www.theverge.com/2017/8/7/16105986/microsoft-xbox-one-dashboard-update-fluent-design
  82. https://learn.microsoft.com/en-us/windows/win32/directcomp/why-use-directcomposition-
  83. https://learn.microsoft.com/en-us/windows/apps/winui/
  84. https://learn.microsoft.com/en-us/shows/open-at-microsoft/fluent-ui-react-v9-whats-new-and-different
  85. https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-theming-in-v9
  86. https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/blazor
  87. https://www.fluentui-blazor.net/
  88. https://fluent2.microsoft.design/
  89. https://github.com/microsoft/fluentui
  90. https://medium.com/microsoft-design/diy-a-web-version-the-fluent-design-systems-acrylic-material-fe2eac2a40bb
  91. https://stackoverflow.com/questions/44522299/css-only-acrylic-material-from-fluent-design-system
  92. https://www.figma.com/community/file/836828295772957889/microsoft-fluent-2-web
  93. https://fluent2.microsoft.design/get-started/design
  94. https://www.npmjs.com/package/%40fluentui/react-components
  95. https://learn.microsoft.com/en-us/fluent-ui/web-components/
  96. https://www.youtube.com/watch?v=PMGJqGo85FM
  97. https://www.infoworld.com/article/2252477/escape-from-flatland-microsofts-new-ui-approach.html
  98. https://techcrunch.com/2017/05/11/microsoft-launches-fluent-design-its-take-on-googles-material-design/
  99. https://www.ghacks.net/2022/05/23/microsoft-windows-11s-product-satisfaction-and-adoption-is-highest-ever/
  100. https://medium.com/microsoft-design/designing-for-scale-and-complexity-b788363fd1cc
  101. https://www.techpowerup.com/338670/windows-11-finally-overtakes-windows-10-as-the-most-dominant-operating-system
  102. https://windowsforum.com/threads/12-modern-apps-transforming-windows-11-with-fluent-design.358115/
  103. https://www.figma.com/blog/schema-2025-design-systems-recap/
Add your contribution
Related Hubs
Contribute something
User Avatar
No comments yet.