Digital era · 2017–present
Fluent Design
Microsoft's design language centred on physical properties — light, depth, motion, material and scale — expressed through acrylic blur and Mica tinting.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(97.5% 0.004 250) - --fg
oklch(16% 0.008 250) - --muted
oklch(50% 0.01 250) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.005 250) - --border
oklch(85% 0.006 250) - --accent
oklch(50% 0.22 248) - --accent-fg
oklch(100% 0 0) - --focus
oklch(50% 0.22 248)
| Token | Value |
|---|---|
| --font-body | 'Segoe UI Variable', 'Segoe UI', 'Noto Sans', system-ui, sans-serif |
| --font-display | 'Segoe UI Variable', 'Segoe UI', 'Noto Sans', system-ui, sans-serif |
| --font-mono | 'Cascadia Code', 'Consolas', ui-monospace, monospace |
| --radius | 8px |
| --radius-sm | 4px |
| --shadow | 0 1px 2px oklch(0% 0 0 / 0.06), 0 0 1px oklch(0% 0 0 / 0.06) |
| --shadow-lg | 0 8px 20px oklch(0% 0 0 / 0.1), 0 0 1px oklch(0% 0 0 / 0.06) |
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
:root {
--bg: oklch(97.5% 0.004 250);
--fg: oklch(16% 0.008 250);
--muted: oklch(50% 0.01 250);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.005 250);
--border: oklch(85% 0.006 250);
--accent: oklch(50% 0.22 248);
--accent-fg: oklch(100% 0 0);
--focus: oklch(50% 0.22 248);
--font-body: 'Segoe UI Variable', 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
--font-display: 'Segoe UI Variable', 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
--font-mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
--radius: 8px;
--radius-sm: 4px;
--shadow: 0 1px 2px oklch(0% 0 0 / 0.06), 0 0 1px oklch(0% 0 0 / 0.06);
--shadow-lg: 0 8px 20px oklch(0% 0 0 / 0.1), 0 0 1px oklch(0% 0 0 / 0.06);
}Where it came from
Origin: Microsoft — Fluent Design System announced at Build 2017
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
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Integrates with OS-level context (wallpaper, light/dark, accent colour) | Acrylic blur is expensive on slow hardware |
| Sophisticated and premium without being ostentatious | Proprietary to Windows — hard to reproduce faithfully on the web |
| Strong system for Windows-native applications | 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.