Fluent Design System
Watch the video
An eloquent design system for a complex world
Now’s the time for bold, scalable, universal design. This is a transformation. A step into the future of sensory experiences. The world is at our fingertips – join Microsoft in building a design evolution.
Sensory
Experiences
A rapid evolution is underway in user interfaces. The spectrum of dimensionality expands from zero to four. We speak, type, ink, touch, and gaze. We’re engaged and immersed. We’re surrounded by devices, interactions, and experiences. To translate across dimensions and contexts, we need to solve for a sensory digital world, and be fluent in our designs.
Co-Creation
We’re a diverse community of creators. Let’s collaborate and build Fluent Design together. We want you to create, produce, code, and perform like you mean it. To transcend your medium and share your fluency with the world.
The Building Blocks
These are our foundational elements — the moments that will make our designs perform beautifully across devices, inputs, and dimensions. This is how we build the next era of Windows.
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.
360 degree video of a white rabbit on a frozen lake with video controls on the screen. The screen fades to a user clicking on blue, green, and red icons. Clicking creates a light box around the icon area. The screen transitions again to the Microsoft Contacts application. User clicks the letter ‘E’ which expands the user interface to list all names beginning with ‘E’.
Depth
Think about the frame that contains your information. Now break it apart, and reinvent how things relate to each other within a more layered, physical environment. This is how we’ll keep people in their flow – by giving them more space.
User interface describing the current weather in Redmond, WA. The weather application fades out to reveal the desktop. The calendar for January 24th, 2012 then fades and transitions to the Forza Horizon 3: Ultimate Edition store website. Text and images scroll past and overlap one and another as the user scrolls down the page.
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.
User playing the Forza 3: Ultimate Edition video game. Car racing on highway with lake and mountain in the background. Sidebar slides from the left side of the screen. User highlights the Xbox icon. The video transitions to a black screen with four graphs created by five bars each. The bars are purple, teal, blue, pink, and green. The lines shift upward to create a variety of triangles. The video fades to the Voice Recorder application that displays a pink stop icon in the middle with a timer above.
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.
Black, white, and purple acrylic cubes fall and and land on a wood table. The screen transitions to the Photos application with images of pink roses. The video fades to the Alarm & Clock application, which displays a square orange timer that reads 00:09:56.
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.
User drawing an image with the HoloLens and pen. Video transitions to user turning Surface Dial and using a pen on the Surface tablet. Woman wearing Microsoft HoloLens in an open warehouse space. She gestures to move a holographic image of a small staircase with shoes from one one area to another.
Building the Future
We’re at a precipice. Our digital world is prolific and complex, and building the future of design means creating effortless, natural experiences. As technology continues to evolve across dimensions, we’re here to define those captivating moments. Let’s make the future fluent.
There’s a multi-sensory movement in design. We type, touch, ink, and speak. We’re surrounded by devices. This is an opportunity to look at a complex world, and make it more eloquent.
Tim Allen
Partner Director of Design
Partner Director of Design
We want people to work, play, communicate, learn, and explore in an effortless way. And that starts with articulate design.
Karen Scott
Senior Designer
Senior Designer
A design system is that intangible quality you feel as things work together. And we can light up that captivating feeling with Fluent Design.
Shelley Bjornstad
Principal Program Manager
Principal Program Manager
It’s about connecting people’s experiences with thoughtful design.
Daniel Varon
Principal Director of Design
Principal Director of Design
We’re bringing more dimension to everyday moments. More fluidity and expression.
Marianne Giesemann
Senior Designer
Senior Designer
So much of design’s past is about consumption. This is a move toward creation, letting people solve and imagine in new environments.
Rodney Edwards
Partner Director of Design
Partner Director of Design