Fluent 2
Also called: Microsoft Fluent, Fluent UI, Fluent Design
Microsoft-inspired calm productivity UI: light grey Mica canvas, frosted acrylic bars, 4px corners, brand blue #0F6CBD and pill selection indicators.
Design keywords
Say these words to ask for this style.
Fluent 2 is the language of Windows 11, Teams and Microsoft 365: quiet neutral greys, white card layers with very soft two-part shadows, 4px control corners and 8px card corners, and one confident brand blue. The window background is Mica (a faint wallpaper-tinted wash) and transient bars are acrylic (blurred, translucent, with fine noise). Selection is shown by a small rounded brand pill — under a tab, beside a nav item — and inputs carry a darker bottom stroke that turns blue on focus.
Best for
- Productivity and collaboration SaaS
- Internal tools and Microsoft 365 / Teams add-ins
- Windows desktop and Electron apps
- Settings-heavy admin screens
Avoid for
- Playful consumer or kids brands
- Fashion, luxury and editorial storytelling
- Products that must feel native on iOS/Android
✓ Do
- Keep controls compact: 32–40px tall, 4px radius, 600-weight labels
- Show selection with a 3px rounded brand pill (16px long beside nav items, full width under tabs)
- Use acrylic only on bars, menus and flyouts — content cards stay solid white
✕ Don't
- Don’t use large radii (>8px) on cards or pill-shaped buttons
- Don’t introduce a second saturated brand colour
- Don’t use heavy drop shadows — two soft layers (2px ambient + key) at ≤14% opacity
Not to be confused with
On mobile
On phones Fluent becomes a calm list app: acrylic top and bottom bars, grouped white lists on a grey canvas, 8px cards and a brand-blue active tab with a small pill indicator. Drop the Mica wash to a flat grey and keep blur to the bars only.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.