Fluent Design System for the web | Michael Gillett Online

Fluent Design System for the web

Bringing Fluent to the web

I'm a web developer and love the look of Fluent Design System so I am investigating ways of bring the look of Microsoft's design to the web. So far none of this has been easy as the technologies for the web aren't geared towards some of the elements of Fluent, however I've been able to mimic most of the effects through CSS and JavaScript.

This page shows off what I have done and brief overview of what the implementation involves. I will continue to add to this page so come back soon.

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.

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.

Find out more >

Acrylic

For this effect to work properly you will need to be using Microsoft Edge (Windows 10 April 2018 Update or higher) or Google Chrome with Experimental Web Platform features enabled in chrome://flags

As can be seen in the header of this page there is a working Acrylic effect. There are a few elements to this in order for the effect to work on the web like it does on Windows. These include:

Reveal

Coming soon...

Highlight

Coming soon...

Parallax

Coming soon...

More coming soon

This is very much a work in progress! I plan to add more Fluent inspired designs/implementations soon.