Microsoft Fluent 2 design system reference

Tool powered by Microsoft Fluent 2 on Microsoft.

Microsoft Fluent 2: cross-platform components, iconography, Android patterns, and accessibility guidance on fluent2.microsoft.design in the browser.

What is Fluent 2?

Fluent 2 (https://fluent2.microsoft.design/) is Microsoft’s design system for consistent experiences across web, Windows, iOS, and Android. Teams use it for Microsoft Fluent UI component guidance, iconography, motion, and design-to-development resources—including routes such as /iconography for Microsoft icon sets. This page includes the official site next to /design-systems-repo and /component-gallery. This site does not host Fluent assets or edit Microsoft documentation.

What Fluent 2 offers

Microsoft Fluent UI components, iconography, cross-platform guidance, and accessibility on fluent2.microsoft.design.

  • Microsoft Fluent UI and Fluent 2 components

    Explore fluent 2 design system docs for layout, inputs, navigation, and product chrome across platforms.

  • Iconography and Microsoft icons

    Open /iconography for Microsoft icon guidance, sizing, and usage—common when teams need icon pack references.

  • Cross-platform design system guidance

    Compare web, Windows, iOS, and Android so one product family does not fork patterns per platform by accident.

  • Tabs, toggles, and control patterns

    Review design tab, android toggle button design, and related control docs for forms, settings, and system UI.

  • Design-to-development resources

    Follow Figma libraries, implementation notes, and release updates tied to Microsoft product experiences.

  • Accessibility in Fluent 2

    Use built-in focus, contrast, and interaction guidance when you benchmark inclusive defaults for your own system.

How to use this reference

Open components, iconography, or platform sections on fluent2.microsoft.design—benchmark without copying Microsoft chrome one-to-one.

  1. Define your platform scope

    Pick web-first, mobile-first, or multi-platform before you deep-read component pages.

  2. Open the relevant Fluent section

    Use in-page navigation to Microsoft Fluent UI components, iconography, or platform-specific guidance.

  3. Shortlist patterns that fit your product

    Capture interaction and structure—not only visual chrome from Microsoft apps.

  4. Map choices to internal specs

    Document adopted behaviors, tokens, and intentional deviations for your squad.

  5. Open fluent2.microsoft.design in a new tab if needed

    Some flows work better outside the iframe when copying assets or deep-linking.

Tips for using Fluent 2 references

Adopt principles and behavior before pixel-matching Microsoft products.
  • 01

    Respect platform context

    Android toggle and Windows patterns are not interchangeable without adaptation.

  • 02

    Validate accessibility locally

    Fluent defaults help, but your theme and content still need contrast and focus testing.

  • 03

    Record intentional deviations

    Note where your brand or stack requires different tokens or component APIs.

Who this is for

Teams building scalable, accessible interfaces across Microsoft-aligned or multi-platform products.

  • Design system teams

    Benchmark governance and cross-platform standards against a mature public system.

  • Product designers

    Review Microsoft Fluent UI patterns for navigation, inputs, and layout decisions.

  • Front-end and app engineers

    Align implementation with documented Fluent behavior on web and native surfaces.

  • Accessibility specialists

    Use Fluent a11y references when planning focus, contrast, and interaction requirements.

Why open Fluent 2

Official documentation page without replacing Microsoft’s site.

  • Stable directory path

    Link `/fluent-2-design-system` in specs; Hero attribution points to Microsoft.

  • Near related routes

    Continue to /design-systems-repo or /component-gallery after Fluent research.

  • This site does not mirror Fluent docs

    Content updates on fluent2.microsoft.design; we include and document honest use.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.