Fluent 2 Design System (original) (raw)

Welcome to

Let theLet creativity flowLet creativity flowLet creativity flowLet creativity flowLet creativity flowflow

Check out what’s new

Dive into our Figma UI kitsGet started →DevelopFind installation guides and tooling tipsGet started →

Components

Web

react components demo backgroundreact components demo asset 1react components demo asset 2react components demo asset 3

iOS

iOS components demo backgroundios components demo asset 1ios components demo asset 2ios components demo asset 3

Android

Android components demo backgroundAndroid components demo asset 1Android components demo asset 2Android components demo asset 3

Windows

windows components demo backgroundwindows components demo asset 1windows components demo asset 2windows components demo asset 3

Newsworthy

A new era of TeamsA new era of TeamsTeams leverages Fluent 2 to boost performance and reduce complexityEmoji updateEmoji updateWhatever the moment calls for, there's an emoji for thatA modern OutlookA modern OutlookOutlook, Windows, and Fluent unite for a customizable hub experience

Resources

A11y – Focus OrderQuickly annotate your design’s focus and tab order for a meaningful flow of interactive objects.A11y – Color Contrast CheckerEnsure your text is readable by adhering to Web Content Accessibility Guideline standards.Content ReelDesign layouts more efficiently by pulling text strings, images, and icons from one palette.Icon Scaling ToolCreating multiple sizes of icons is easy. Draw once and scale to multiple sizes with a single click.