Microsoft (Fluent)

Fluent 2 is Microsoft's cross-platform design system. It is built on the principles of Light, Depth, Motion, Material, and Scale, aiming to create a natural…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/whyashthakker/design-md-templates-skills?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

Design System: Microsoft (Fluent)

Overview

Fluent 2 is Microsoft's cross-platform design system. It is built on the principles of Light, Depth, Motion, Material, and Scale, aiming to create a natural and intuitive user experience that feels native on every device.

Design Philosophy

Depth & Layering: Uses elevation (shadows) and "Materials" (Mica, Acrylic) to create a clear sense of hierarchy and focus.
Adaptive & Coherent: Designed to feel at home on Windows, iOS, Android, and the Web while maintaining a recognizable Microsoft identity.
Inclusive by Default: Accessibility (contrast, focus states, screen reader support) is baked into every primitive and token.
Productive Elegance: Focuses on clear typography and consistent spacing to handle professional, data-dense applications.

Colors

The Microsoft Blue (#0078D4): A versatile, professional blue used for primary actions and brand presence.
Semantic Tokens: Relies heavily on "Alias" tokens (e.g., colorNeutralBackground1) to ensure colors adapt perfectly between Light, Dark, and High Contrast modes.
Subtle Layering: Dark mode uses high-tier grays (#1F1F1F to #292929) rather than pure black to allow for soft depth and shadow effects.

Typography

Segoe UI: The cornerstone of the Microsoft experience. It is a humanist sans-serif designed for high legibility and a friendly, open feel.
Predictable Scales: Uses a standardized "Type Ramp" from Caption to Display, ensuring consistency in hierarchy.

Components

Cards & Surfaces: Often feature "Depth 4" or "Depth 8" shadows to pop against the background.
Buttons: Rounded (4px to 6px) with clear interaction states (Hover, Pressed) defined by specific token shifts.
The Navigation Rail: A minimalist vertical navigation pattern used for high-level app switching.

Visual Effects

Acrylic & Mica: Uses semi-transparent, blurred backgrounds (Acrylic) and "Mica" (a desktop-specific material that samples the wallpaper) to create a premium, OS-integrated feel.
Soft Shadows: Multi-layered, soft shadows that simulate physical light sources.
Motion: Purposeful, fast transitions (usually 150-250ms) that provide feedback without slowing down the user.

Microsoft (Fluent)

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Raycast

Be Part of the 0+ Developer Community

Design System: Microsoft (Fluent)

Overview

Design Philosophy

Colors

Typography

Components

Visual Effects

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents