The Fluent Design System

Introduction

Fluent Design System

The user interface is evolving, expanding to include new dimensions and interactions. We speak, type, ink, touch, and gaze. We're engaged and immersed. We're surrounded by devices, interactions, and experiences. This evolution provides new opportunities and challenges that need us to be fluent in our designs. This is Fluent Design.

Fluent Design for UWP

The Fluent Design System for UWP is a set of UWP features and guidelines for creating UWP apps that perform beautifully across devices, inputs, and dimensions. Our guidelines are divided into several categories: layout, style, controls, input and devices, and usability.

Fluent Design platform features are built into UWP and help you create apps that are Fluent. Some of these features--such as effective pixels and the universal input system--are automatic. You don't have to write any extra code to take advantage of them. Other features, such as acrylic, are optional; you include them in your app by writing code to include them.

To learn more about the basic features that are automatically included in every UWP app, see the Intro to UWP app design article. To learn more about the new features that help you incorporate Fluent Design into your app, read on.

The building blocks of Fluent Design


Light
Depth
Motion
Material
Scale
Light Depth Motion Material Scale

Light

Light
Light has a way of drawing our attention. It’s warm and inviting; it’s fluid and purposeful. Light creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

Use these features to add light to your UWP app:

  • Reveal uses light to make interactive elements stand out. Light illuminates the interactive element the user can interact with, revealing hidden borders. The light also gently illuminates other interactive elements that are nearby.

Depth

Depth
We live in a three-dimensional world. By purposefully incorporating depth into the UI, we transform a flat, 2-D interface into something more, something that efficiently presents information and concepts by creating a visual hierarchy. It reinvents how things relate to each other within a more layered, physical environment.

Use these features to add depth to your UWP app:

  • Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.
  • Parallax creates the illusion of depth by making items in the foreground appear to move more quickly than items in the background.

Motion

Motion
Think of motion design like a movie. Seamless transitions keep you focused on the story, and bring experiences to life. We can invite that feeling into our designs, leading people from one task to the next with cinematic ease.

Use these features to add motion to your UWP app:

  • Connected animations help the user maintain context by creating a seamless transition between scenes.

Material

Material
The things that surround us in the real world are sensory and invigorating. They bend, stretch, bounce, shatter, and glide. Those material qualities translate to digital environments, making people want to reach out and touch our designs.

Use these features to add material to your UWP app:

  • Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.

Scale

Scale
The industry lives and breathes 2D design. Now’s the time to expand our toolkit for more dimensions. We’re scaling our design system from 0D to 3D, inviting innovation across new forms. And we’re looking to you to help us imagine this new world.

UWP articles that help you build an app that scales:

  • Input shows you how to optimize your app for the different input types of different devices.
  • Devices shows you how to optimize your app for different devices.

Get the complete guidelines

This article has highlighted some of the visual features that make Fluent Design stand out, but if you're interested, there's more to read: We've provided a complete set of guidelines that help you design and implement every aspect of your app.


Layout
Layout
Structure your pages and add navigation elements.
Style
Style
Use color, typography and Fluent Design features to create a stunning UI.
Controls and patterns
Controls
Jumpstart your app with our extensive set of controls.
Inputs and devices
Input and devices
Customize how your app handles input and optimize it for specific devices.
Usability
Usability
Make your app inclusive and easy to use for everyone.