Microsoft Fluent

Microsoft Fluent 2 is the official design system from Microsoft, providing comprehensive guidelines, component libraries, and design tokens for building consistent, accessible, and beautiful experiences across Windows, web, mobile, and mixed reality platforms. The design principles emphasize clarity through clean typography and intentional spacing, delivering content-focused interfaces that reduce cognitive load through consistent visual language and predictable interaction patterns. The component library provides production-ready implementations of common interface elements including buttons, menus, dialogs, cards, navigation bars, text fields, and data grids, with variants for different contexts and platforms including React, iOS, Android, and Windows implementations. The color system defines a comprehensive palette with semantic color tokens for brand, neutral, accent, and communication colors, supporting both light and dark themes with automatic contrast adjustment for accessibility compliance. The typography ramp establishes clear text styles from caption through display sizes, with font families optimized for screen rendering across Latin, CJK, and other writing systems. The motion design language provides guidance on animation timing, easing curves, and choreography for creating fluid, natural transitions. The iconography system includes thousands of consistent icons in regular and filled variants. The accessibility guidelines ensure components meet WCAG standards for keyboard navigation, screen reader compatibility, and color contrast. Designed for designers and developers building products on Microsoft platforms.