Design principles
FREE
Product and digital design principles on principles.design—Airbnb, HubSpot, org design, web design system examples. Open the site if the embed is limited.
Microsoft Fluent 2 design system reference
Tool powered by Microsoft Fluent 2 on Microsoft.
Browse Microsoft Fluent 2: cross-platform components, iconography, design tabs, 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.
- Define your platform scope: Pick web-first, mobile-first, or multi-platform before you deep-read component pages.
- Open the relevant Fluent section: Use in-page navigation to Microsoft Fluent UI components, iconography, or platform-specific guidance.
- Shortlist patterns that fit your product: Capture interaction and structure—not only visual chrome from Microsoft apps.
- Map choices to internal specs: Document adopted behaviors, tokens, and intentional deviations for your squad.
- 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.
- Respect platform context: Android toggle and Windows patterns are not interchangeable without adaptation.
- Validate accessibility locally: Fluent defaults help, but your theme and content still need contrast and focus testing.
- 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
Have questions? We have answers.
Related tools
More tools from Learn & References.
World Time Buddy
FREEWorld clock and time zone converter for comparing time zones at a glance and scheduling meetings across regions; open the site if the embed is limited.
Paper Sizes
FREEPaper sizes on papersizes.io—envelope dimensions, photo sizes, Legal, Tabloid, A5. Charts in mm and inches; open the site if the embed is limited.
DesignSystems.com
FREEFigma’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
FREEUI 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
PAIDTop design systems, tools, and documentation on Design Systems Repo—examples, enterprise lists, React and UX references. Open the site if the embed is limited.