Fluent 2 Design System

Fluent 2 Design System

Welcome to

Let theflow

Check out what’s new

Dive into our Figma UI kits

Get started →

Develop

Find installation guides and tooling tips

Get started →

Components

react components demo background react components demo asset 1 react components demo asset 2 react components demo asset 3

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

Android components demo background Android components demo asset 1

windows components demo background windows components demo asset 1

Newsworthy

A new era of Teams

Teams leverages Fluent 2 to boost performance and reduce complexity

Emoji update

Whatever the moment calls for, there's an emoji for that

A modern Outlook

Outlook, Windows, and Fluent unite for a customizable hub experience

Resources

A11y – Focus Order

Quickly annotate your design’s focus and tab order for a meaningful flow of interactive objects.

A11y – Color Contrast Checker

Ensure your text is readable by adhering to Web Content Accessibility Guideline standards.

Content Reel

Design layouts more efficiently by pulling text strings, images, and icons from one palette.

Icon Scaling Tool

Creating multiple sizes of icons is easy. Draw once and scale to multiple sizes with a single click.