Microsoft Fluent 2 Design System

Microsoft Fluent 2 — Essentials

Fluent 2 is Microsoft's current cross-platform design system (web/React, Windows/WinUI, iOS, Android, macOS), powering Microsoft 365, Teams, and Windows 11. It is the most token-driven of the big-three design languages and the strongest reference for enterprise/productivity UI. Internally ~293 Microsoft design teams use it, with component usage ~4× Fluent 1.

Principles

Fluent's pillars: Light, Depth, Motion, Material, Scale — a softened, dimensional evolution of the flat Metro lineage. Fluent 2 adds a "one Microsoft" coherence goal: the same semantic token resolves to platform-appropriate values everywhere, so a Dialog feels native on Windows, web, and mobile without redesign.

• Clarity over spectacle: Fluent motion and materials communicate spatial relationships and state; they are quieter than M3 Expressive or Liquid Glass.
• Accessibility as baseline: 4.5:1 text contrast, full keyboard/focus-visible support, and high-contrast theme variants are built into the token system, not bolted on.

Token architecture (the heart of Fluent 2)

Two primary layers (plus per-component overrides):

1. Global tokens — context-free raw values: hex colors (e.g., a full color ramp per hue), font sizes, line heights, weights, border radii, stroke widths, animation curves/durations. Named by what they are (colorPaletteBlueForeground2 style ramps).
2. Alias (semantic) tokens — meaning-bearing mappings consumed by components: colorNeutralForeground1, colorBrandBackground, colorNeutralStroke1, colorStatusDangerBackground1. Theming (light, dark, high contrast, brand) works by re-mapping alias tokens only.
3. Component tokens — local overrides (e.g., a button's specific radius) that resolve to aliases.

Rule: components consume aliases, never globals. This is the pattern to copy in any design system.

Core specs

Corner radius (global tokens): 2 / 4 / 6 / 8 / 12 / circular. Buttons and rectangular controls default to 4px; elements under ~32px drop to 2px to stay proportional; cards commonly 8px; circular for avatars/pills.

Spacing: a horizontal + vertical spacing ramp based on a 4px grid — tokens at 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32 (spacingHorizontalXXS…XXXL). Use the ramp; never arbitrary pixel values.

Elevation / shadow: a generated shadow ramp named by blur size — shadow2, shadow4, shadow8, shadow16, shadow28, shadow64 (shadow2 ≈ 2px blur … shadow64 ≈ 64px blur). Mapping guidance: shadow2–4 for rest-state cards/inputs, shadow8 for dropdowns/tooltips, shadow16 for panels/popovers, shadow28–64 for dialogs and top-level surfaces. Each has a brand variant for tinted shadows.

Typography: Segoe UI Variable on Windows; web ramp (Fluent UI React): Caption2 10px, Caption1 12px, Body1 14px (the default), Subtitle2 16px, Subtitle1 20px, Title3 24px, Title2 28px, Title1 32px, LargeTitle 40px, Display 68px — weights Regular/Medium/Semibold/Bold. Body text default is 14px (denser than iOS/Android — appropriate for productivity software).

Motion (Fluent UI React motion tokens): durations ultraFast 50ms, faster 100ms, fast 150ms, normal 200ms, gentle 250ms, slow 300ms, slower 400ms, ultraSlow 500ms. Curves: accelerate/decelerate cubic-beziers plus easyEase for small state changes. Guidance: micro state changes 50–150ms; component enter/exit 150–300ms; large surface transitions 300–500ms with decelerate-in, accelerate-out. Windows adds connected animations (shared-element transitions with velocity matching).

Materials

Fluent supports four surface materials (Windows-first, with graceful fallbacks elsewhere):

Cross-platform rule: the same Dialog uses Acrylic on Windows (real-time compositor blur), a solid fill with subtle texture on web (backdrop-filter is a performance risk), and platform-native materials on iOS/Android. Material is a token decision, not a per-screen decision.

Components

~40+ code-aligned components (Fluent UI React v9, Fluent UI Web Components, WinUI 3, Fluent UI iOS/Android): Button (primary/outline/subtle/transparent; 24/32/40px heights small/medium/large), Input, Combobox, DataGrid, Dialog, Drawer, Menu, Persona/Avatar, Badge, Card, Toast, Teaching Popover, Tree, TabList. Figma UI kits ("Fluent 2 Core" web/iOS/Android + the design-language variables file) are code-aligned so design/dev handoff is 1:1.

Interaction states: every control defines rest / hover / pressed / focused / disabled via alias tokens — hover states matter far more here than in mobile-first systems. Focus indicators are 2px colorStrokeFocus2 rings, always visible on keyboard focus.

Do / Don't

Do

• Theme exclusively by swapping alias-token values (light/dark/high-contrast/brand).
• Keep body text at 14px and density high for data-heavy productivity screens; use the spacing ramp to loosen consumer-facing surfaces.
• Reserve Acrylic for transient surfaces; use Mica (or solid) for persistent backgrounds.
• Use shadow ramp + stroke (colorNeutralStroke1/stroke2) together to define surface edges in dark mode.

Don't

• Don't hardcode hex/px — everything visible should trace to a token.
• Don't use Acrylic on large scrolling content or on web without a solid fallback.
• Don't invent new elevation values outside the shadow ramp.
• Don't remove focus rings or hover states — Fluent targets keyboard/mouse parity.

When to use Fluent 2

• Best fit: enterprise software, productivity tools, admin dashboards, data-dense B2B apps, anything in or adjacent to the Microsoft 365/Windows ecosystem, Teams apps (required look), Power Platform.
• Good fit: cross-platform desktop-first products wanting a mature, accessible, token-complete system (Fluent UI React v9 is production-grade and tree-shakeable).
• Poor fit: expressive consumer mobile brands (choose M3 Expressive on Android, HIG/Liquid Glass on iOS); marketing sites (Fluent's density and neutrality read corporate).
• Fluent 2's token layering is the reference architecture to imitate even when not using Fluent visuals — see design-tokens-theming.md.