# Fluent Design

> Microsoft's design language centred on physical properties — light, depth, motion, material and scale — expressed through acrylic blur and Mica tinting.

- Category: Digital era
- Era: 2017–present
- Origin: Microsoft — Fluent Design System announced at Build 2017
- Lesson: https://design.dawit.dev/styles/fluent
- Try it: https://design.dawit.dev/styles/fluent?style=fluent

## Where it came from

Microsoft unveiled Fluent Design at Build 2017 as the evolution of Metro/Modern UI for Windows 10. Its early signature was Acrylic — blurred, semi-transparent background — and Reveal Highlight, a halo of light around focused controls. Windows 11 introduced Mica, a subtler material that tints surfaces with the user's wallpaper colour. Fluent emphasises that interfaces have real material properties, not just visual ones.

## How to spot it

- Acrylic: blurred, tinted, semi-transparent backgrounds
- Mica: surface that samples and tints from the OS wallpaper
- Reveal Highlight: a rim of light around hovered or focused controls
- Depth layers: content, base and flyout surfaces at different elevations

## Strengths

- Integrates with OS-level context (wallpaper, light/dark, accent colour)
- Sophisticated and premium without being ostentatious
- Strong system for Windows-native applications

## Weaknesses

- Acrylic blur is expensive on slow hardware
- Proprietary to Windows — hard to reproduce faithfully on the web
- Mica effect requires OS cooperation not available in browsers

## In the wild

- Windows 11 Start menu
- Windows 11 Settings app
- Microsoft Teams (Windows version)

## Use it when

Windows-native apps where OS integration and system-level theming are first-class requirements.

## Related styles
[Material Design](https://design.dawit.dev/styles/material-design.md), [Apple HIG](https://design.dawit.dev/styles/apple-hig.md), [Glassmorphism](https://design.dawit.dev/styles/glassmorphism.md)