Fluent 2 vs Glassmorphism
フルーエント2 / グラスモーフィズム
Fluent 2 comes from Microsoft UI and Glassmorphism from UI Expression. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Fluent 2
Tokenizes color, type, spacing, radius and depth, deploying Solid, Acrylic, Mica and Smoke materials by role across Microsoft products.
Glassmorphism
Shows depth and hierarchy through translucent layers, floating information lightly.
| Fluent 2 | Glassmorphism | |
|---|---|---|
| Era | 2022– | 2020s |
| Family | Microsoft UI | UI Expression |
| Kind | Style | Style |
| Cues | Mica and Acrylic / Neutral tonal hierarchy / Soft corner radii / Tokenized depth | Background blur / Translucency / Thin white borders / Color bleed |
| Best used for | Business UI at home in Windows and Microsoft 365 that several teams must keep identical · Replacing an existing product in stages so theme and state stay consistent across products | Making layered information feel light · OS-grade refinement and depth |
| Type | Define size and leading as tokens and never hardcode values in a screen. | A neutral sans-serif |
| Composition | Fix spacing to multiples of one base and keep density variants as separate tokens. | Stack cards with clear front-to-back order |
| Material | Mica for the window ground, Acrylic only for surfaces that appear briefly. | Colored ground, translucent panes, fine edges |
| Caution | Match blur and shadow to surface role, window state and light, dark and high contrast. Adding one off colors and paddings per screen turns the unifying system into one more thing to maintain. | Legibility breaks with the wrong background. Give text surfaces real opacity. |