Material
Material describes the texture of a surface. Fluent supports four materials: solid, mica, acrylic, and smoke.
Material types
Fluent offers solid, occluding, and transparent material types for different interface needs. Occluding materials, like Acrylic and Mica, appear widely on Windows as base layers beneath interactive UI components. Transparent materials, like smoke, are used less frequently to highlight immersive surfaces.
Check the technical limitations for your experience before deciding which material is the best for your design.
Solid
Solid is the most common material. It’s an opaque material that uses color and varying elevation to highlight different UI regions and interactions.
Solid is mode aware; it supports both light and dark mode.
Acrylic
Acrylic is a semi-transparent material that replicates the effect of frosted glass. Use it for transient, light-dismiss surfaces such as popovers and menus.
Acrylic is mode aware; it supports both light and dark mode.
Mica
Mica is an opaque material that is subtly tinted with someone’s desktop background color when used on an active window. If the window is inactive, mica takes on a neutral color. This indication of window focus is a built-in feature of Windows.
Mica is mode aware; it supports light and dark mode.
Smoke
Smoke emphasizes an important surface by dimming the interface beneath it so that they recede into the background. It signals blocking interactions below a modal component, like a dialog.
Smoke is not a mode-aware material. Because it’s meant to obscure the interface behind it, it’s always translucent black.
