Microsoft Fluent 2 design system reference

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. On Uwarp this page embeds the official site next to /design-systems-repo and /component-gallery. Uwarp does not host Fluent assets or edit Microsoft documentation.

Popular Fluent 2 topics

These intents map to sections on fluent2.microsoft.design. Use the embed to open the matching guidance.

1. Microsoft Fluent UI and Fluent 2 components: Explore fluent 2 design system and microsoft fluent ui component docs for layout, inputs, navigation, and product chrome.
2. Iconography and Microsoft icons: Open /iconography for Microsoft icon guidance, sizing, and usage—common when teams search for microsoft icon or icon pack references.
3. Cross-platform design system guidance: Compare web, Windows, iOS, and Android guidance so one product family does not fork patterns per platform by accident.
4. Tabs, toggles, and control patterns: Review design tab, android toggle button design, and related control docs when you spec forms, settings, and system UI.
5. Design-to-development resources: Follow Figma libraries, implementation notes, and release updates tied to Microsoft product experiences.
6. Accessibility in Fluent 2: Use built-in focus, contrast, and interaction guidance when you benchmark inclusive defaults for your own system.

What Fluent 2 offers

Official Microsoft design system documentation and assets.

1. Cross-platform component guidance: Patterns for web, iOS, Android, and Windows with platform-specific notes where behavior differs.
2. Iconography library: Fluent icon sets and usage rules on dedicated iconography pages.
3. Design and development entry points: Links to Figma resources, tooling, and implementation references for engineering handoff.
4. System updates and examples: Announcements and product-connected examples as Fluent 2 evolves.
5. Works beside Uwarp design-system tools: Pair Fluent research with /design-systems-repo listings or /design-principles for values language.

How to use this embed on Uwarp

Benchmark Fluent 2 without forcing a one-to-one copy of Microsoft styling.

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-embed navigation to 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.

1. Respect platform context: Android toggle and Windows patterns are not interchangeable without adaptation.
2. Validate accessibility locally: Fluent defaults help, but your theme and content still need contrast and focus testing.
3. 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.

1. Design system teams: Benchmark governance and cross-platform standards against a mature public system.
2. Product designers: Review Microsoft Fluent UI patterns for navigation, inputs, and layout decisions.
3. Front-end and app engineers: Align implementation with documented Fluent behavior on web and native surfaces.
4. Accessibility specialists: Use Fluent a11y references when planning focus, contrast, and interaction requirements.

Why open Fluent 2 on Uwarp

Official documentation embed without replacing Microsoft’s site.

1. Stable Uwarp path: Link `/fluent-2-design-system` in specs; Hero attribution points to Microsoft.
2. Near related Uwarp routes: Continue to /design-systems-repo or /component-gallery after Fluent research.
3. Uwarp does not mirror Fluent docs: Content updates on fluent2.microsoft.design; we embed and document honest use.

Technical notes

Embed boundaries for this documentation page.

1. Embed source: The iframe loads https://fluent2.microsoft.design/; deep links include paths such as /iconography.
2. Third-party frame rules: If the frame is blank, open https://fluent2.microsoft.design/ in a new tab—Microsoft or network policies may block embedding.
3. Content ownership: Fluent 2 documentation and assets are maintained by Microsoft; Uwarp does not edit upstream copy.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Design System.

• 

  Design principles

  Product and digital design principles on principles.design—Airbnb, HubSpot, org design, web design system examples. Open the site if the embed is limited.
• 

  DesignSystems.com

  Figma’s design systems publication: articles, getting-started guides, Schema talks, design ops, and the Design Systems Repo; open the site if the embed is limited.
• 

  Component Gallery

  UI component examples on component.gallery—carousel, tabs, accordion, dropdown, color picker. Compare design systems; open the site if the embed is limited.
• 

  Design Systems Repo

  Top design systems, tools, and documentation on Design Systems Repo—examples, enterprise lists, React and UX references. Open the site if the embed is limited.
• DS

  Design System Hub

  A curated collection of popular design systems from Apple, Ant Design, Shopify Polaris, and more.
• 

  Animate.css

  Animate.css on animate.style—animate styles, text fade out, animated sections, tw-animate-css. Cross-browser CSS classes; open the site if the embed is limited.